原生JS实现Ajax请求

2016年09月10日Web前端0

Ajax，Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。我们可以通过Ajax实现局部刷新，在不刷新整个页面的情况下，就能够与后端进行交互，进行数据交换。

在Ajax交互中，我们需要用到一个XMLHttpRequest对象，注：支持IE7+(所有现在浏览器)。

Get方式

var xhr = new XMLHttpRequest();
xhr.open('get', './admin.php?a=' + Math.random(), true);
// 接收
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }
};
// 发送
xhr.send();

xhr对象的open方法中，第一个参数是请求方法，此处是get请求，第二个参数是请求地址，GET方法的话，传递的参数是跟在url后面的，并用&隔开，第三个参数是该方式是否异步，此处是true，所以采用异步方式。

send()方法表示发送这个请求。

注：当同步请求情况下，要先绑定readystatechange事件。其中readyState为4表示请求已经完成，status是200表示请求成功。

POST方式

var xhr = new XMLHttpRequest();
xhr.open('post', './admin.php', true);
// 设置编码格式
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 接收
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }
};
// 发送
xhr.send('a=1&b=2');

POST方式下，只需将请求方法改为post，而需要传给后端的参数放到send()方法中，且格式必须是=相连键和值，&相连不同的参数。 在POST方法中，将Content-Type 设置为 application/x-www-form-urlencoded，是因为默认情况下，Ajax将以Content-Type: text/plain的方式提交数据，此时，服务器会忽略POST实体部分的数据，所以会导致服务端程序无法获取POST数据。

数据接收

在接收到响应后，响应的数据会自动填充xhr对象。他包含这几个属性：

  • responseText：响应返回的主体内容，为字符串类型。
  • responseXML：当响应的内容类型是 "text/xml" 或 "application/xml"时，这个属性中将保存着相应的xml 数据。
  • status：响应的HTTP状态码。 statusText：HTTP状态的说明。

readyState属性

xhr队形的readyState属性的值都对应着请求的状态。

  • 0：未初始化，尚未调用open()方法。
  • 1：启动，调用了open()方法，未调用send()方法。
  • 2：发送，已经调用了send()方法，未接收到响应。
  • 3：接收，已经接收到部分响应数据。
  • 4：完成，已经接收到全部响应数据。

所以当readyState有变化时，就会出发readystatechange事件。而在这事件中先判断是否接收完成，再判断服务器是否成功处理了请求。 注：使用Ajax的时候，注意同源策略。

JavaScript

目录