利用Ajax与服务器交谈

1.创建XHR实例

不同的浏览器以不同的方式来实现XHR，必须以适合于当前浏览器的方式来创建XHR实例

对象检测：不依赖于检测用户正在运行哪一种浏览器 可使代码能够应对多种浏览器

var xhr；if(window.XMLHttpRequest  //测试是否已经定义XHR ){xhr=new XMLHttpRequest();} 

               else if(window.ActiveXObject  //测试ActiveX是否存在 IE7){xhr=new ActiveXObject("Msxm12.XMLHTTP");}

               else{throw new Error("Ajax is not supported by this browser ")}

XHR方法

   abort()  当前正在执行的请求被取消   getAllResponseHeaders()  返回包含所有响应标头的名称和值的字符串

  getResponseHeader(name)返回指定的响应标头的值  

  open(method,url,async,username,password) 设置请的方法和目标URL 请求是否异步     send(content) 发起带有指定体内容的请求

   setRequestHeader(name,value)设置请求标头

XHR属性

  onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序

  readyState  指示请求状态 0--未初始化  1--正在加载  2--已加载 3--交互  4--完成

  responseText 在响应里返回的体内容      responseXML如果体内容是XML，根据内容创建XML DOM

   status   服务器返回的响应状态码  200--表示成功 404--表示未找到    statusText 响应所返回的状态文本消息

2.发起请求 

（1）指定HTTP方法，POST或GET  

（2）提供将要接触的服务器端资源的URL    xhr.open('GET','/some/resource/url');

（3）让XHR实例知道如何通报进展   通过指派回调函数到XHR对象的onreadystatechange属性实现

（4）为POST请求提供任何体内容  xhr.send('a=1&b=2&c=3')    GET请求不传递任何体内容作为参数xhr.send(null)

3.跟踪进展

通过将函数的引用指派给XHR实例的onreadystatechange属性作为就绪处理程序（通知自身进展），一旦send()方法发起请求，随着请求在不同状态下转换，回调函数会被调用多次

xhr.onreadystatechange=function(){ if(xhr.readyState==4){   if(shr.status>=200 && shr.status<300){//success}    else{//error}   }  }

处于完成状态后检查status属性的值，确定请求成功与否，HTTP规范定义200-299范围内的编码为成功

4.获得响应

响应体的格式可以是任何文本格式而不限于XML（普通的文本、HTML片段、JSON数组、JS对象文本表示）

通过XHR实例的responseText属性得到响应体 

5.加载内容到元素上

load（url,parameters,callback）向指定的URL发起Ajax请求，请求完成时调用回调函数，响应报文替换已匹配的元素内容

6.serialize() 根据包装集里所有成功表单元素，创建正确格式化的、经过URI 编码的查询字符串

  serializeArray()把所有的成功表单控件的值都收集到对象的数组中

7.GET请求：规定为幂等的，服务器的状态和应用的模型数据不受GET操作影响，完全返回一致的结果 可用来获取数据

  POST请求：可以是非幂等的，发送到服务器的数据可以用来修改应用的模型状态，如：给数据库添加记录或从服务器删除信息

$.get(url,parameters,callback) 利用指定的URL、带着任何已传入的参数作为查询字符串而向服务器发起GET请求

8.获取JSON数据

  如果一个XML文档从服务器返回，XML文档会被自动解析，然后作为结果的DOM对回调函数可用

 当响应式JSON时，调用$.getJSON()可自动解析返回的JSON字符串，使得作为结果的JS数据项在回调函数里可用

$.getJSON(url,parameters,callback) GET请求，响应被解析为JSON字符串，而作为结果的数据被传递给回调函数

9.$.post(url,parameters,callback)利用指定的URL，带着任何包含在请求体内的已传递参数向服务器发起POST请求

10.完全控制Ajax请求

（1）$.ajax(options) 利用已传递的选项来发起Ajax请求

（2）$.ajaxSetup(properties)为后续的$.ajax()调用，把传入的一组属性作为默认值

$.ajaxSetup({type:'POST',timeout:5000,dataType:'html',error:function(xhr){$('#errorDisplay').html('Error:'+xhr.status+' '+xhr.statusText)}  })    确保后续每个Ajax调用使用这些默认值

（3）全局函数  

   ajaxStart(callback)  Ajax函数或命令发起时触发，在XHR实例被创建之前

  ajaxSend(callback)  XHR实例被创建之后，但在XHR实例被发送给服务器之前触发

  ajaxSuccess(callback)请求已从服务器返回之后，并且响应包含成功状态码

  ajaxError(callback)请求已从服务器返回之后，并且响应包含成功状态码

  ajaxComplete(callback)  ajaxSuccess或ajaxError回调函数已被调用之后

  ajaxStop(callback)其他Ajax处理完成后以及任何其他使用的全局回调函数已被调用之后