一、简介
AJAX=Anchronous JavaScript and XML(异步的JavaScript和XML),是一种用于创建快速动态网页的技术。
AJAX通过在后台与服务器进行少量数据交换,在无需重新加载整个页面的情况下,能够更新部分网页的技术。
与传统网页对比:传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页。
二、XmlHttpRequest对象
AJAX的核心是JavaScript对象XmlHttpRequest。所有现代浏览器均支持XMLHttpReques对象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据。
1.建XMLHttpRequest对象:
//创建XMLHttpReques对象的语法
variable = new XMLHttpRequest();
//老版本的Internet Explorer(IE5和IE6)使用ActiveX对象
variable = new ActiveXObject("Micriosoft.XMLHTTP");
//为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。
//如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveXObject;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2.XMLHttpRequest对象和服务器交换数据:
//将请求发送到服务器,使用XMLHttpRequest对象open()和send()方法。
//GET方式
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();
//POST方式
xmlhttp.open("POST", "test.asp", true);
xmlhttp.send();
说明:
open(method,url,async):规定请求的类型、URL以及是否异步处理请求
method:请求的类型:GET或POST
1.与POST相比,GET更简单也更快,并且在大部分情况下都能用。
2.在以下情况中,使用POST请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据量限制)
发送包含未知字符的用户是,POST比GET更稳定也更可靠
url:文件在服务器上的位置。该文件可以使任何类型的文件,比如.txt和.xml,或者服务器脚本文件,比如.asp和.php(在传回响应之前,能够在服务器上执行该任务)
为避免得到的是缓存的结果,向URL添加一个唯一的ID,如下:
xmlhttp.open("get","test1.asp?t="+Math.random(),true);
xmlhttp.send();
async:true(异步)或false(同步)
当使用async=true时,请规定在响应出于onreadystatechange事件中的就绪状态时执行的函数;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getelementById("myDIV").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
三、响应
如需获得来自服务器的响应,请使用XMLHttpRequest对象的responsText或responseXML属性 。
responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
//responseText属性返回字符串形式的响应
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
//responseXML属性返回XML,需要解析
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;