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处理完成后以及任何其他使用的全局回调函数已被调用之后