Ajax是Asynchronous JavaScript and XML的缩写。主要用于页面无刷新请求数据。
Ajax简单来说就是通过XMLHttpRequest对象向服务器发送异步请求，从服务器取得数据，然后用js操作DOM来更新页面。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
下面来详细介绍一下XMLHttpRequest.，首先是创建一个XMLHttpRequest对象。
function CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
}
XMLHttpRequest对象的方法：
1.abort()：停止当前请求。
2.open("method","URL",[asyncFlag],["userName"],["password"])：发送请求，建立与服务器之间的连接。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码。
3.send(content)：向服务器发送请求。
4.setRequestHeader("header", "value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )。
XMLHttpRequest对象的属性：
1.onreadystatechange：每次状态改变所触发事件的事件处理程序。
2.readyState：请求的状态，有5个状态值：
0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
3.responseText：服务器的响应，返回数据的文本。
4.responseXML：服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。
5.status：服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）。
6.statusText：服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等）。
一个完整的ajax请求：
function fetchMsg() {
var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST", url, false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
Ajax的优点：
1.页面无刷新请求数据，用户体验很好；
2.异步与服务器通信，不需打断用户操作，响应能力迅速；
3.ajax的原则是“按需加载”，可以减少冗余请求和服务器的负担。
Ajax的缺点：
1.破坏了浏览器的后退机制；
2.对搜索引擎的支持较弱；
3.安全问题。
暂时介绍到这里，如果不对，欢迎指出~
网友评论