一个功能可以用很多方式去实现,我们通常会选择最省事,最高效的。
在合适的地方使用Ajax,通过异步模式,提升用户体验;Ajax在客户端运行,承担部分本来由服务器承担的工作,从而减少大用户量下的服务器负载;优化浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用。
实现ajax的步骤:js事件触发js函数
1.js创建XMLHttpRequest
2.在XMLHttpRequest中设置要发送的请求和参数
3.使用XMLHttpRequest对象将请求发送给服务器
4.接收服务器返回的数据
5.将数据显示在页面上
针对不同浏览器创建XMLHttpRequest对象的固定代码
functioncreateXmlHttp(){
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){
try{
xmlHttp=newActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不能创建XmlHttpRequest");
}
}
}
}
varxmlHttp;
functionmethod(obj){
createXmlHttp();//创建XMLHttpRequest对象
xmlHttp.open('get',url,true);
//第一个为提交方式get或者post
//第二个要发送的请求路径及其参数
//第三个参数同步还是异步模式
xmlHttp.send(null);
//发送请求;send()方法无参传递一般是发送null值,否则Firfox中使用会报错
xmlHttp.onreadystatechange=callback{
//获取返回值,
//根据xmlHttp的readyState状态判定请求状态。
//根据xmlHttp的status中的HTTP状态码判定请求处理结果
//xmlHttp的responseText属性值就是服务器返回的数据
};
}
readyState值含义:
0:表示XMLHttpRequest对象已建立,但还未初始化,这时尚未调用open方法
1:表示open方法已经调用,但未调用send方法(已创建,未发送)
2:表示send方法已经调用,其他数据未知
3:表示请求已经成功发送,正在接受数据
4:表示数据已经成功接收。