AJAX通信
简介
AJAX(Asynchronous JavaScript and XML,即异步JavaScript和XML),是一种用于创建快速动态网页的技术,可以对网页的部分进行刷新,而传统网页需要重新加载整个页面。
AJAX应用程序的优势在于:
(1)通过异步模式,提升了用户体验;
(2)优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用;
(3)AJAX引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
AJAX 工作原理
- 在浏览器界面触发事件,然后创建一个XMLHttpRequest对象,将XMLHttpRequest对象发送给服务端
- 服务端处理XMLHttpRequest对象,并将数据回传给浏览器
- 浏览器使用JavaScript处理回传的数据,局部更新页面
1
XMLHttpRequest 对象
流程图:
- 创建 XMLHttpRequest 对象:variable=new XMLHttpRequest();
- 创建HTTP请求:open(method,URL[,asyncFlag[,“userName” [, “password”]]])
- method:HTTP请求方法
- URL:请求的URL地址,可以为网址或本地文件
- asyncFlag:布尔型,指定此请求是否为异步方式,默认为true(异步)
- userName,password:是指服务器验证需要的用户名和密码,可省略
- 设置状态改变时的事件:XMLHttpRequest对象有个属性readyState,它有5个值,分别对应了5个状态:
- 未初始化,对象已创建,但还未使用open方法
- 正在加载,还未使用send方法
- 已加载,send方法已使用,但当前的状态未知
- 交互中,接收了部分数据
- 完成,数据接收完毕
- 发送HTTP请求:XMLHttpRequest对象的 send() 方法负责发送HTTP请求
- 若请求中不包含请求正文:xhr.send(null);
- 若请求包含正文:xhr.send(“a=2&b=3”);仅用于POST请求
- 获取异步返回的数据:XMLHttpRequest对象在数据接收完成后,需要使用status或statusText属性,来判断请求是否成功,status和statusText属性返回当前请求的响应状态代码和状态描述
例:
function loadXMLDoc()
{
//创建XMLHttpRequest对象
var xmlhttp=new XMLHttpRequest();
//readyState属性值改变时触发该函数
xmlhttp.onreadystatechange=function()
{
//readyState状态码为4,表明服务器已响应
//status为200,表明请求成功
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//处理返回的数据responseText
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//创建HTTP请求
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
//发送HTTP请求
xmlhttp.send();
}
FormData对象
- 创建FormData对象的两种方式:
- var formData=new FormData();
formData.append(key,value);
key:value是键值对 - var oform=document.getElementById(“myForm”);
var formdata=new FormData(oform);
- var formData=new FormData();
- 发送FormData数据:xmlhttp.send(formdata)
- 解析XML数据:
当使用XMLHttpRequest请求数据,返回的是XML格式时,就需要用到它的另一个属性responseXML,这个属性代表一个XML DOM对象,可以专门用来解析XML格式数据,这个XML DOM对象提供了个getElementsByTagName方法(和HTML DOM的方法一样),可以根据标签名来得到数据
var bookname=xhr.responseXML.getElementsByTagName("title")[0].childNodes[0].nodeValue;
jQuery中的AJAX方法
- get方法:$.get(URL [,data] [,function(data,status,xhr)] [,dataType])
- post方法:$(selector).post(URL [,data] [,function(data,status,xhr)] [,dataType])
2
- get方法获取json数据:$(selector).getJSON(url,data,success(data,status,xhr))
success(data,status,xhr):当请求成功时运行的函数。 - 底层方法:$.ajax({name:value, name:value, … })