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