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")来设置返回那种数据格式。