1999年,微软公司发布IE5,第一次引入新功能:允许javascript脚本向服务器发起HTTP请求。
ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。虽然名字中包含XML,但ajax通信与数据格式无关。
ajax包括以下几步骤:1、创建AJAX对象;2、发出HTTP请求;3、接收服务器传回的数据;4、更新网页数据。
概括起来,就是一句话,ajax通过原生的XMLHttpRequest
对象发出HTTP请求,得到服务器返回的数据后,再进行处理。
发送请求:
// 创建xhr对象(这种方法不适用于ie5) var xhr = new XMLHttpRequest(); // open()方法(第三个参数为是否一部进行请求,若为false则会阻塞,直至请求完成) xhr.open("get","example.PHP",false); // send()方法(如果是post请求则需要带参数,get请求则参数可以为null或无参数) // xhr.send("id=9&name=yawn&age=18"); xhr.send(null);
接收响应:
responseText: 作为响应主体被返回的文本(文本形式) responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式) status: HTTP状态码(数字形式) statusText: HTTP状态说明(文本形式)
1.同步请求:
send()方法将会阻塞,一直等待后台响应后才返回,可以i使用以下方法处理返回的信息:
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert('request was unsuccessful:' + xhr.status); }
2.异步:
若是异步的响应,则需要检测xhr的readyState属性,readyState取值如下:
0(UNSENT): 未初始化。尚未调用open()方法 1(OPENED): 启动。已经调用open()方法,但尚未调用send()方法 2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息 3(LOADING): 接收。已经接收到部分响应主体信息 4(DONE): 完成。已经接收到全部响应数据,而且已经可以在客户端使用了
可以在onReadyState()方法中对响应进行处理:
xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == 200){ alert(xhr.responseText); } } }