Ajax快速入门

Ajax的应用，实现了页面的局部刷新，改善了客户体验．直接在js中调用远程服务器上的方法，就像方法在js中一样．

Ajax使用的核心步骤：

1.创建XmlHttpRequest 对象．

　

var xmlhttp;
function  createXMLReq(){
if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Micorsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
}

代码解释:　如果当前浏览器支持ActiveXObject对象.则由ActiveXObject来创建XmlRequest对象；否则采用本地浏览器模式创建．

2. 建立与服务器的连接，为远程调用做准备． open(String method,String url,boolean sybn, String uname, String pwd)

method:请求的方式　　url:请求资源的路径　　sybn 是否采用异步处理．若为异步，则在发送请求的同时,继续执行后面的js代码；否则必须等到服务器发送响应后才能继续执行．默认为true异步处理．　uname,pwd为可选项．

3.发送请求．

　send(): 若为get请求，则参数为请求参数所构成的字符串，Post为Null;

function show(){
CreateXMLReq();
var uname=document.getElementById("uname").value;
xmlHttp.onreadystatechange=callbackfun;
<%--
xmlHttp.open("get","Avalible?uname="+uname+"&upwd=111",true);
xmlHttp.send(null);
--%>
xmlHttp.open("post","Avalible",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("uname="+uname+"&upwd=111");
}

4.处理结果　

　通过设置回调函数onreadystatechange来处理结果．

　两种结果： responseText 　文本

responseXml xml/json

function callbackfun(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("msg").innerHTML=xmlHttp.responseText;

}
}

function isSubmit(){
if(xmlHttp.responseText=="用户名已被占用"){
return false;
}
}

xmlHttpRequest对象的重要属性及方法总结：

方法：

void open(String method,String url,boolean sybn,String uname,String pwd)

send(null/String)

setRequestHeader(String headname,String value)

void getRequestHeader(String headname)

getRequestHeaders()

属性:

onreadystatechange: 　

readyState 4 　已完成

status 404 　not Found 200 Ok

responseText 文本

responseXml　　xml,json