AJAX

一、什么是AJAX

AJAX是一种技术，AJAX是一种JavaScript技术，AJAX是一种可以调用后台服务器获取数据的JavaScript技术。

与传统开发模式做比较，传统开发模式中，用户每对页面做一次操作，就要触发一次，返回web服务器的HTTP请求。服务器进行处理后，返回一个HTML页面给客户端。

在AJAX开发模式中，用户没对页面做一次操作，就要触发一次AJAX引擎，AJAX引擎与服务器进行交流，要求数据。服务器处理后，把数据返回给AJAX引擎，AJAX引擎再将获取到的数据插入到HTML页面中。

AJAX开发的优点就是：在不刷新整个页面的情况下，对部分数据进行更新，降低了网络流量。

二、AJAX的组成

由5部分组成：XMLHttpRequest对象（核心）、XML语言、js脚本语言、DOM、CSS。

三、XMLHttpRequest对象

XMLHttpRequest对象是一个对象，是一个js对象，是一个有接口的js对象，能够使用http（超文本传输协议）连接一个服务器。

1、XMLHttpRequest对象的初始化

XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化方法不同。

IE浏览器是将XMLHttpRequest对象实例化为一个ActiveX对象。非IE（比如火狐）将XMLHttpRequest对象实例化为一个本地的js对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象。代码如下：

 1 // XMLHttpRequest对象的初始化
 2 function initIt(){
 3     if(window.XMLHttpRequest){ //非IE浏览器
 4         http_request=new XMLHttpRequest();
 5     }else if(window.ActiveXObject){ //Ie浏览器
 6         try {
 7             http_request=new ActiveXObject('Msxml2.XMLHTTP');
 8         }catch(e){
 9             try{
10                 http_request=new ActiveXObject('Microsoft.XMLHTTP');
11             } catch(e){}
12         }
13     }
14 }

而在IE7及其以上版本，IE浏览器也支持XMLHttpRequest对象，所以直接实例化一个xhr对象就可以了。如果想要支持比IE7更低的版本，就还是要判断activeXobject对象。

2、XMLHttpRequest对象的属性

当建立的xhr请求被send()发送后，任何状态的改变都会触发onreadystatuschange属性。一旦这个属性被触发了，说明状态值status改变了。

（1）指定状态改变时所触发的事件处理器onreadystatuschange

//onreadystatechange属性
http_request.onreadystatechange=function(){
    alert('指定状态改变时，通常会出发一个js函数');
}

（2）获取请求状态readystatus，有5个属性值，我们一般只关注redaystatus=4的时候，它表示请求已经完成。检测完readystate之后，就应该检查status的状态值了。

status表示请求是成功还是失败。

//readystate属性，包括了5个属性值

（3）获取服务器字符串响应

无论status是成功还是失败，服务器都会返回一个responseText的字段。我们需要这个字段。

//responseText属性，获取服务器字符串响应
var response=http_request.responseText;

（4）获取服务器XML响应

//responseXML属性，获取服务器XML响应
var responseOfXml=http_request.responseXML;

（5）返回服务器的HTTP状态码

//status属性，获取状态码。注意：该属性只有send()方法返回成功时才有效。
if(http_request.readyState==4){
    if(http_request.status==200){
        alert('请求成功！');
    }else{
        alert('请求失败');
    }
}

（6）上面属性的判断使用

var xhr=createXHR();
xhr.onreadystatechange=function(){
    if (xhr.readyState==4){
        if( (xhr.status>=200&& xhr.status<300) ||xhr.status==304 ){
            console.log(xhr.reponseText);
        }else{
            console.log("本次连接没有成功。")
        }
    }
}
xhr.open("get","http://www.somewhere.com",true);
xhr.send(null);

3、XMLHttpRequest对象的方法

（1）创建新的请求

//open(),创建新请求的方法，参数分别为：http_request.open['请求类型','请求URL','是否为异步','用户名','密码']
http_request.open('GET','deal.jsp',true);

open()方法只是创建了一个新的请求，并不代表发送。发送必须需要send()方法。

请求的第三个值是一个布尔值，是否要异步发送。false表示否，请求为同步，这就要求js必须等待需求被响应之后才能继续执行。

如果该值为true，就表示请求为异步。js可以去处理其他事情，当有回应了，再过来处理数据。

（2）向服务器发送新的请求

//sned(),向服务发送请求的方法
http_request.send(null);  //向服务器发送一个不含任何参数的请求

即使不向服务器发送任何参数，也要传一个null进去，因为对有些浏览器来说，这个参数是必须得。

（3）设置请求的HTTP头

//setRequestHeader('header','value'),设置请求的HTTP开头
//该方法只有在调用open()方法之后才能被调用
http_request.setRequestHeader('Content-Type','application/x-www-form');

（4）停止或放弃当前异步请求

//abort(),停止或放弃当前异步请求
http_request.abort();

（5）返回HTTP头，有两种方法

//getReponseHeader('headerLabel'),返回http头特定信息
//headerLabel可选项有三个：content-Type,Server和Date
http_request.getResponseHeader('Content-Type');
//getAllResponseHeader(),赶回HTTP头的所有信息
alert(http_request.getAllResponseHeader());

四、两种发送请求GET和POST

1、GET

GET一般是我们向服务器请求某些数据。必要时，会把查询字符串追加在url的末尾，不过这些字符串要经过url编码，编码还记得吧，encode。decode是解码，不要在搞混了。而且查询字符串是有格式要求的。

通过编写函数，可以规范字符串的格式：

//这个方法并不是只能添加一个查询字符串，而是可以添加多个。
function addURLParam(url, name, value) {
    url = url + ((url.indexOf("?")) == -1 ? "?" : "&");
    url=url+encodeURIComponent(name)+"="+encodeURIComponent(value);
    return url;
}
var url="example.php";
url.addURLParam(url,"book","I lvoe U");
url.addURLParam(url,"name","Alice");
xhr.open("get",url,false);

2、post请求

post请求是发送数据到服务器，好让服务器保存。可以发送大量数据，不像get查询字符串一样，格式有要求。

首先创建一个post的open请求，然后用send将数据传送过去。

常见返回值：

400：检查一下自己请求接口的数据格式是否正确

404：检查一下接口环境是否部署