Ajax技术
核心：XMLHttpRequest 对象(简称 XHR)
提供了向服务器发送请求和解析服务器响应提供了流畅的接口。
能够以异步方式从服务器获取更多的信息。
使用XHR对象条件：
1、调用open()方法，这个方法并不会真正发送请求，而只是启动一个请求以备发送。
Open（）方法接受三个参数：（1）请求类型（get、post）
（2）请求的URL
（3）表示是否异步
Send()方法进行发送请求，接受一个参数，作为请求主体发送的数据，如果不需要，则必须填null，执行send（）方法之后，请求就会发送到服务器上了。
2、发送请求的步骤
1）得到XMLHttpRequest对象
new XMLHttpRequest()
2）准备请求
xhr.open(请求类型GET/POST,请求的URL,是否异步)；
3）发送请求
xhr.send([参数])
注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
如果是POST请求，无参数设置为null，有参数则设置参数即可
4）判断响应状态，得到后台响应
Xhr.responserText;
当请求发送到服务器端，收到响应后，响应数据会自动填充XHR对象的属性；
属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml"，
则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明
注意：接受到响应后，第一步检查status属性，以确定响应已经成功返回。一般情况下HTTP状态代码为200作为成功的标志。
同步调用固然简单，但使用异步调用才是我们真正常用的手段。
使用异步调的时候，检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。
这个属性有五个值：
值 状态 说明
0 未初始化 尚未调用 open()方法
1 启动 已经调用 open()方法，但尚未调用 send()方法
2 发送 已经调用 send()方法，但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据，而且可以使用
封装Ajax
1、 得到XMLHttpRequest对象
new XMLHttpRequest()
2、 打开请求
Open(请求类型GET/POST,请求的URL，是否异步)
注：这三个参数是由调用传递
判断如果是POST请求，请求路径直接设置即可，如果是GET，需要拼接请求参数。
3、 发出请求
xhr.send([参数])
注：如果是GET，请求的参数设置在URL的后面，所以send（null）
如果是POST请求，无参数设置为null，有参数则设置参数即可。
4、 判断响应状态，得到后台响应
xhr.responseText;
注：判断是否是异步请求，如果是同步则直接获取响应数据，如果是异步，则需要判断数据是否完全响应（readyState==4）,再获取响应的数据。
//A用户
var userA={
type:”GET”,
url: "js/data.json?a=1",
data:{
uname: "zhangsan",
upwd:"123456"
},
async:true,
success:function(result){
console.log(result);
},
error:function(result) {
console.log(result);
}
};
ajax(userA);
// 用户B
var userB = {
type:"POST",
url:"js/data.json",
data:{
uname:"zhangsan",
upwd:"123456"
},
async:false,
success:function(result){
alert(result);
},
error:function(result) {
console.log(result);
}
};
ajax(userB);
ajax({
type:"POST",
url:"js/data.json",
data:{
uname:"zhangsan",
upwd:"123456"
},
async:false,
success:function(result){
alert(result);
},
error:function(result) {
console.log(result);
}
});
封装Ajax
Function ajax(obj){
//01得到对象
var xhr=new new XMLHttpRequest();
//格式化参数
obj.data=formatParam(obj.data);
//判断施工是GET请求
if(obj.type.toUpperCase()==”GET”){
//GET请求拼接参数
obj.url+=( obj.url).indexOf(“?”)>-1?”&”+ obj.data : "?" +obj.data;
}
//02打开请求
xhr.open(obj.type,obj.url,obj.async);
//03发送请求
if(obj.type.toUpperCase() == "POST"){
//如果是post请求，模拟表达提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xhr.send(obj.data);
}else{
//是get请求
xhr.send(null);
}
//04判断响应状态
//判断是否是异步请求
if(obj.async){
// 如果是异步请求，需要先知道数据是否完全响应
// 监听readyState的值的变化
xhr.onreadystatechange = function(){
// 判断是否完全响应，即readyState的值等于4
If(xhr.readyState == 4){
callback();
}
}
}else{
//同步请求
callback();
}
//获取响应结果
function callback(){
if(xhr.status==200){
var responseTxt = xhr.responseText;
//调用成功的回调函数；
obj.success(responseTxt);
}else{
//调用失败的回调函数
obj.error("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
}
}
}
/*将对象形式的参数转换成字符串*/
function formatParam(data){
var arr=[];
for(var key in data){
var str=key+”=”+data[key];
//将数组追加到数组中
Arr.push(str);
}
var params=arr.join(“&”);
return params;
}
Jquery 的 ajax
1、 jQuery调用ajax
格式：$.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
2、$.get()
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
3、$.post()
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
4、$.getJSON()
表示请求返回的数据类型是 JSON 格式的 ajax 请求
5、 jsonp
远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
添加属性：
jsonp:’callback’
dataType:’jsonp’
