Ajax 异步请求的基本步骤

Ajax与服务器异步通信的的基本步骤

      以完成用户名验证为例：（主要表单代码如下）

   

<form action="UserCheck.php" method="post">
用户名:<input type="text" name="username" id="username">
<input type="button" onclick="sendRequest();" value="验证用户名">
<input style="border-width: 0" type="text" id="myres"><br/>
密　码:<input type="password" name="password"><br>
<input type="submit" value="用户注册">
</form>

 

     1. 创建一个Ajax引擎对象，即XMLHttpRequest对象

    

//创建ajax引擎对象
function getXmlHttpObject(){

var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
//IE
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");

}else{
//非IE
xmlHttpRequest=new XMLHttpRequest();
}

return xmlHttpRequest;

}

 

     2. 创建请求服务器的 url 地址和发送的数据 data ，通过xmlHttpRequestObject.open(url，[data],true)函数打开请求，通过myXmlHttpRequestObject.onreadystatechange=function（）{ ...}指定回调函数，通过xmlHttpRequestObject.send(data)发送ajax请求

   

var myXmlHttpRequest="";//全局变量表示ajax引擎对象
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判断是否创建成功
if(myXmlHttpRequest){
var url="/ajax/registerProcess.php[?data];//若是get，后面还可以添加数据
var data="useranme="+document.getElementById('username');//获取用户名，post方式发送的数据
//打开请求.
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示 true表示使用异步机制,如果false表示不使用异步
myXmlHttpRequest.open("post",url,true);
//若是post方式发送，则必须有下面这句
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数,chuli_Func是函数对象名
myXmlHttpRequest.onreadystatechange=chuli_Func;
//如果是get请求,填入null即可
//如果是post请求，填入实际的数据 data
//myXmlHttpRequest.send(null);//get
myXmlHttpRequest.send(data); //post
}
}

 

     3. 服务器端接受 ajax 的请求，并作相应的处理（操作数据库、文件...）,然后返回结果（通过 echo 语句返回）

  

<?php
//表示返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//表示不要缓存数据
header("Cache-Control: no-cache");
$username=$_POST['username'];
if($username=="张三"){
echo "不可用!";
}else{
echo "可用!";
}
?>

 

     4. 客户端在回调函数中通过xmlHttpRequestObject 的属性reponseText , responseXML取数据，完成局部刷新操作

    

function chuli_Func(){
//4: ajax成功返回
if(http_request.readyState==4){
// 200: http 请求成功返回状态码
if(http_request.status==200){
//从ajax引擎中取出结果
var res=http_request.responseText;
document.getElementById('myres').value=res;
}
}
}

 服务器端可以返回三种数据格式：普通文本、XML格式数据、json个格式数据，通过header("Content-Type: text/html [ xml ];charset=utf-8")来设置返回那种数据格式。