一、什么是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;
}
}