AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换, 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下, 对网页的某部分进行更新.
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).
XMLHttpRequest 是 AJAX 的基础. 所有现代浏览器均支持 和内嵌 XMLHttpRequest 对象 (IE5 和 IE6 使用 ActiveXObject).XMLHttpRequest 用于在后台与服务器交换数据.
创建 XMLHttpRequest 对象的语法: variable=new XMLHttpRequest();
不确定浏览器是否支持时:
- var xmlhttp;
- if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest(); }
- else {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
向服务器发送请求:
- xmlhttp.open(method,url,async);// 规定请求的类型, URL 以及是否异步处理请求. //method: 请求的类型; GET 或 POST.url: 文件在服务器上的位置. //async:true(异步) 或 false(同步)
- xmlhttp.send(string);// 将请求发送到服务器. String: 仅用于 POST 请求
一个简单的 GET 请求:
- xmlhttp.open("GET","demo_get.asp",true);
- xmlhttp.send();
一个简单 POST 请求:
- xmlhttp.open("POST","demo_post.asp",true);
- xmlhttp.send();
区分: 与 POST 相比, GET 更简单也更快, 并且在大部分情况下都能用.
然而, 在以下情况中, 请使用 POST 请求:
1. 无法使用缓存文件 (更新服务器上的文件或数据库)
2. 向服务器发送大量数据 (POST 没有数据量限制)
3. 发送包含未知字符的用户输入时, POST 比 GET 更稳定也更可靠
当使用 async=true 时, 请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
- xmlhttp.onreadystatechange=function() //onreadystatechange 存储函数 (或函数名), 每当 readyState 属性改变时, 就会调用该函数.
- { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // readyState 存有 //XMLHttpRequest 的状态. 从 0 到 4 发生变化 (0: 请求未初始化; 1: 服务器连接已建; //2: 请求已接收; 3: 请求处理中; 4: 请求已完成, 且响应已就绪) status 只有两种状态: //200: "OK";404: 未找到页面
- document.getElementById("Div").innerhtml=xmlhttp.responseText; } }
- // 之后再执行 GET 或 POST 请求
当使用 async=false 时, 不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
- //GET 或 POST 请求
- document.getElementById("Div").innerHTML=xmlhttp.responseText;
注释: onreadystatechange 事件被触发 5 次 (0 - 4), 对应着 readyState 的每个变化.
需获得来自服务器的响应:
使用 XMLHttpRequest 对象的 responseText (获得字符串形式的响应数据) 或 responseXML(获得 XML 形式的响应数据) 属性.
上面的例子用到的就是 responseText 属性.
如果来自服务器的响应是 XML, 而且需要作为 XML 对象进行解析, 则使用 responseXML 属性:
- xmlDoc=xmlhttp.responseXML;
- txt="";
- x=xmlDoc.getElementsByTagName("title");
- for (i=0;i<x.length;i++)
- { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }
- document.getElementById("Div").innerHTML=txt;
注释: 若网站上存在多个 AJAX 任务, 那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数, 并为每个 AJAX 任务调用该函数.
来源: http://www.jianshu.com/p/600e2ec73908