原生JS实现Ajax请求

2016年09月10日Web前端

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的时候,注意同源策略。