什么是Ajax

标签：

什么是Ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML ），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
传统模式：等待——响应——等待
优势：
1：使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况
与Web服务器交换数据。
2：AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
执行流程：
1、创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)
var xhr = function getXmlHttpObject() {
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
2、使用XMLHttpRequest对象打开一个连接(指定连接方式和连接地址以及是否同步)
xhr.open("POST","URL ",true);
3、设置请求的头部(请求的类型和请求的编码格式)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4、设置回调函数
ajax状态码(readyState):
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
xhr.onreadystatechange=function(){
//如果readyState为4，表示响应已经被完全接收。
if(xhr.readyState==4){
//如果获得的结果状态代码为200，表示服务端正常返回
if(xhr.status==200){
var txt=xhr.responseText;
document.getElementById("err").innerHTML=txt;
}
}
}
5、发送请求
调用XMLHttpRequest对象的send方法实现数据的发送。
xhr.send("name="+name);
完整代码:
var xhr = getXmlHttpObject();
xhr.open("get", "./users.json", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function() {
//如果readyState为4，表示响应已经被完全接收。
if (xhr.readyState == 4) {
//如果获得的结果状态代码为200，表示服务端正常返回
if (xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
}
function getXmlHttpObject() {
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}

什么是Ajax

标签：

原文地址：http://www.cnblogs.com/wanghaijian/p/5450721.html