AJAX:创造动态性更强的应用程序。
作用:与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下进行数据传递与获取。
AJAX使用四部曲:
第一部:创建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"); }
代码解释:为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 。
第二部:请求。
代码:
xmlhttp.open(method,url,async); xmlhttp.send(string);代码解释:
method:请求的类型:GET或POST
url:文件在服务器中的位置
async:true(异步)或false(同步)
string:仅用于POST请求
【-- PS:GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 --】
第三部:响应。
1)responseText属性;
代码例子:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;代码解释:
如果来自服务器的响应并非 XML,请使用 responseText 属性。responseText 属性返回字符串形式的响应,
2)responseXML属性。
代码例子:
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;代码解释:
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:请求 books.xml 文件,并解析响应
第四部:onreadystatechange事件解释:当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
代码例子:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }代码解释:
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:
200: "OK"
404: 未找到页面