ajax实现步骤

//当页面加载完毕后,执行以下代码
window.onload = function(){
	document.getElementById("ok").onclick = function(){
		//1	创建XMLHttpRequest对象
		var xhr = ajaxFunction();
		
		/*
		 * 2	客户端与服务器端,建立连接
		 * 
		 * open(method, url, asynch)
		 * 	* method:请求类型,类似 “GET”或”POST”的字符串
		 * 	* url:请求路径
		 * 	* asynch:表示请求是否要异步传输,默认值为true(异步)。
		 */ 
		xhr.open("get","../testServlet?timeStamp="+new Date().getTime()+"&c=9",true);
		
		
		/*
		 * 3	客户端向服务器端发送请求
		 * 
		 * send()方法
		 * 	* 如果请求类型是GET方式的话,send()方法发送的请求数据,服务器端接收不到.这个步骤是不能省略的!
		 */ 
		xhr.send("a=7&b=8");		//send(null);
		
		/* 
		 * 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.onreadystatechange = function(){
//			alert(xhr.readyState);
//			alert(xhr.status);
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					var data = xhr.responseText;
					
					alert(data);
				}
			}
		}
		
		
	}
}

function ajaxFunction(){
   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;
 }

你可能感兴趣的:(ajax实现步骤)