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： 检查一下接口环境是否部署
