Ajax：一种不用刷新整个页面便可与服务器通讯的办法
Ajax实现的步骤：
1、创建XMLHttpRequest对象
2、服务器向浏览器响应请求(注册监听)
3、浏览器与服务器建立连接
4、浏览器向服务器发送请求
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
常用状态码及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
xhr.open(method, url, asynch);
* 与服务器建立连接使用
* method：请求类型，类似 “GET”或”POST”的字符串。
* url：路径字符串，指向你所请求的服务器上的那个文件。请求路径
* asynch：表示请求是否要异步传输，默认值为true(异步)。
send()方法：
* 如果浏览器请求的类型为GET类型时，通过send()方法发送请求数据，服务器接收不到
* 如果浏览器请求的类型为POST类型时，通过send()方法发送请求数据，服务器可以接收
Demo：
Get方式 window.onload=function()
{
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象 xhr.onreadystatechange=function(){//回调函数
if(xhr.readyState==4){//回调状态
if(xhr.status==200 || xhr.status==304)//服务器状态吗
{
var date=xhr.responseText;//服务器返回数据
alert(date);
}
}
};
var id="A001";
alert(id);
xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径，3、请求是否异步，默认为true
xhr.send(null);//发送数据--get方式，这里不用写数据，即使写了数据服务器端也无法接收
}; function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
} };
Post方式
window.onload=function(){
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4)
{
if(xhr.status==200 || xhr.status==304)
{
var data=xhr.responseText;
alert(data);
}
}
};
xhr.open("post","../testGetServelet",true);
//如果是POST请求方式，设置请求首部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("a=1&b=2");
};
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
};
可以返回xml文件，但是返回的相应头必须是text/html,而不是text/xml，接收时用xhr.responseXML。