一、什么是ajax？
AJAX(Asynchronous JavaScript and XML)：异步的JavaScript和XML。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。是在不需要重新加载网页的情况下，与服务器进行数据交互并更新部分网页的技术。
Eg：当你在搜索引擎搜索关键字的时候，JavaScript就向服务器提交字段，并返回得到的数据，实时更新网页中的搜索结果。
二、如何使用AJAX？
1、XHR的创建
XMLHttpRequest的作用是用于在后台与服务器交换数据。
IE5和IE6使用ActiveXObject，其余浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。
语法：
Avriable = new XMLHttpRequest(): //创建XMLHttpRequest对象
或
Avriable = new ActiveXObject(“Microsoft.XMLHttp”); // IE5和IE6使用ActiveX对象
综合上面两种情况，实际情况中应该这样写：
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");
}
2、XHR请求
将请求发送到服务器，使用XMLHttpRequest对象的open()和send()方法。
open(method,url,async)：规定请求的类型、URL以及是否异步处理请求。
method：请求的类型（GET或POST）
ulr：文件在服务器上的位置
async：true（异步）或false（同步）
send(string)：将请求发送到服务器。
string：仅用于POST请求
改使用GET还是POST，具体请查看两者的区别：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
一个简单的GET：
xmlhttp.open("GET","demo_get.asp?t=" +Math.random(),true);
xmlhttp.send();
一个简单的POST：
xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();
如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader(header,value)：向请求添加HTTP头
header：规定头的名称
value：规定头的值
3、XHR响应
获取来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性
responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
以xml为例：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
text = text + x[i].childNode[0].nodeValue + "<br / >";
}
document.getElementById("myDiv").innerHTML=txt;
4、Onreadystatechange事件
readyState属性存有XMLHttpRequest的状态信息，当readyState改变时，就会触发onreadystatechange事件。
下面是XMLHttpRequest对象的三个重要的属性：
Onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState：存有XMLHttpRequest的状态。从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成，且响应已就绪
Status：200: "OK"；404:未找到页面
当readyState等于4且状态为200时，表示响应已就绪：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
网友评论