AJAX数据传输

在此之前，我们提交数据都是通过表单来完成数据提交的，使用表单提交数据的最大问题是体验度不好。提交表单会造成整个页面跳转刷新，如果是上传较大文件，页面会长期卡顿，而且用户无法知晓上传进度，可能会提前关闭网页。

因此为了改善这种状况，出现了ajax这种新的传输技术。

Ajax概念

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是一种局部刷新技术，即ajax提交数据不会导致整个页面刷新，而且在提交数据与接受数据返回期间，用户可以在页面上进行其他操作，不会产生卡顿的感觉。上传文件的时候，还可以显示上传进度，极大的改善了用户体验

Ajax的核心对象是XMLHttpRequest（xhr）,该对象实现方法浏览器之间不太相同，因此实际使用中，可以使用js框架，避免兼容性问题

var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr =new ActiveXObject("Microsoft.XMLHTTP");
  }

XHR实例对象方法

# 发出一个get请求
# open(method，url，async)
xhr.open("GET","http://www.python-xp.com",true);
xhr.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：http方法 url：请求的资源url async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅在用于 POST 请求时有效

GET方法避免缓存

初学者有时会碰到请求数据总是陈旧的数据，这是因为get结果很可能是浏览器缓存结果（取决于缓存设置），可以使用下面的方法避免

xhr.open("GET","get_message_list?t=" + Math.random(),true);
xhr.send();

通过加上一个t时间戳，每次请求的时候，由于带上了不同的时间戳，浏览器就会重新发送这个请求，而不是使用缓存

请求头设置

在发送数据之前可以通过setRequestHeader设置请求头

xmlhttp.open("POST","send_message",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("to_name=luxp&from_name=zxp");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

XHR事件与响应

onreadystatechange 事件

当xhr从创建实例到发送数据，再到接受服务器返回的数据，整个过程期间，有一个属性readyState值会从0变化至4，代表了5个阶段

readyState

xhr的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪

当readyState值变为4的时候，表示已经完成接受服务器的响应，可以在前端处理接受的内容了，我们可以使用onreadystatechange来捕捉这个变化

xhr.onreadystatechange=function()
  {
      console.log(xhr.readyState)
  }

响应状态xhr.status

当readyState值为4的时候，并不代表服务器响应是正常的，还需要检查xhr.status值，这个值为服务器响应状态码，正常值即200

响应文本

服务器响应值存储在xhr的响应文本值中，有两个responseText 与 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseXML只有返回的数据为xml格式时才使用

综合示例：

监测readystate，并输出服务器返回的数据

xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4 && xhr.status==200)
    {
         console.log(xhr.responseText);
    }
  }