AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)
从上述就可以看出AJAX并不是一门新的语言,而是一种使用现有语言的新方法。
AJAX是在不重新加载整个页面时与服务器进行交互时而实现部分更新网页的技术。
不理解的可以看我下边的解释:
AJAX是一种用于创建快熟动态网页的技术,通过后台与服务器的少量数据交换,AJAX可以实现网页的异步更新,这也意味着在不加载整个页面的同时,对网页的某个部分进行少量的更新。
一般的网页(不使用AJAX)如果需要更新,则必须重新加载整个页面。
使用过AJAX技术的案例:Google地图、新浪微博。
XMLHttpRequest对象
创建XMLHttpRequesr对象
XMLHttpRequest对象是AJAX的基础。
现在几乎所有的浏览器都支持XMLHttpRequest对象(IE5、IE6使用ActiveObject)。
var request = new XMLHttpRequest();
IE5、IE6
var request = new ActiveXObject("Microsoft.XMLHTTP");
但我建议还是使用下面案例中的方法,避免出现错误
var request ;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//Chrome、Firefox、Opera、Safari
}else{
request = new ActiveXObject("microsoft.XMLHTTP");//IE5、IE6
}
XMLHttpRequest对象发送数据
XMLHttpRequest对象发送数据到服务器,会使用到open()和send()俩个方法:
/*
open(method,url,async);
method:请求的类型,GET或POST。url:文件在服务器上的地址。async:true(异步)false(同步)。
send(string);
string:仅用于POST请求。
*/
request.open("POST","test.php",true);
request.send();
服务器响应
当用户获得了来自服务器的响应,那么这时候就应该使用XMLHttpRequest对象的responseText或responseXML属性。
两者的区别是:responseText获得字符串形式的响应数据,responseXML获得XML形式的相应数据。
//responseText
document.getElementById("myDiv").innerHTML = request.responseText;
//responseXML
txt = "";
x = request.responseXML.getElementByTagName("ARTIST");
for(i=0;i<x.length;i++){
txt += x[i].childNodes[0].nodeValue + "<br/>";
}
document.getElementById("myDiv").innerHTML = txt;
onreadystatechange事件
当请求发送到服务器时,需要执行一些基于响应的任务。
因此当readyState改变时,就会触发onreadystatechange事件;并且readyState属性存储有XMLHttpRequest的状态信息。
/*XMLHttpRequest对象的三个重要属性:
omreadystatechange:存储函数,每当readyState被调用时,就会调用该函数。
readyState:存储有XMLHttpRequest的状态信息,从0~4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status:200:"ok"
404:"not found"
*/
//在onreadystatechange事件中,规定了当服务器响应时所应该执行的任务。
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
document.getElementById("myDiv").innerHTML = request.responseText;
}
}
注意:onreadtstatechange事件被调用了5次。
详细的实例我会在接下来的几天陆续写出来。