ajax的本来面目

ll_feng

浏览: 391082 次
性别:
来自: 北京

最近访客更多访客>>

jppaer

su3795

li_zongjin

乜咩耶耶

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax IE JavaScript Cache Microsoft

一、认识XMLHttpRequest
XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的，开始只能在IE中使用，后来被广泛采用而成为事实上的标准。

二、属性
onreadystatechange 每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数
readState 请求的状态。有5个可取值：0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成
responseText 服务器的响应，表示为一个串
responseXML   服务器的响应，表示为xml。这个对象可以解析为一个DOM对象
status        服务器的HTTP状态码（200对应OK，404对应Not Found等等）
statusText    HTTP状态码的相应文本（OK或Not Found等等）

三、方法
abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为健/值对返回
getResponseHeader("header")   返回指定首部的串值
open("method","url")   建立对服务器的调用。method参数可以是post、get、put.url参数可以是相对URL或绝对URL.这个方法还包括3个可选参数。
send(content)   向服务器发送请求
setRequestHeader("header","value")   把指定首部设置为提供的值，在设置任何首部之前必须先调用open()

四、发送请求参数

<html>
<head>
<title>发送请求参数</tile>
<script>
	/**
	 * 定义XMLHttpResuest对象
	 */
	var xhr;
	function getXHR(){
		if(window.ActiveXObject){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}else if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();	
		}
	}
	
	/**
	 * 获取查询参数
	 */
	function getQueryString(){
		var name = document.getElementById("name").value;	
		var pwd = document.getElementById("pwd").value;
		var queryString = "name="+name+"&pwd="+pwd;
		return queryString;
	}	
	
	/**
	 * 以get方式提交请求
	 */
	function doRequestByGet(){
		xhr = getXHR();
		var queryString = "getAndPostExample?";
		queryString = queryString+getQueryString()+"&time="+new Date().getTime();
		xhr.onreadystatechange = stateChangeHandle;
		xhr.open("GET",queryString,true);
		xhr.send(null);	
	}
	
	/**
	 * 以post方式提交请求
	 */
	function doRequestByPost(){
		xhr = getXHR();
		var url="getAndPostExample?time="+new Date().getTime();
		var queryString = getQueryString();
		xhr.onreadystatechange = stateChangeHandle;
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		xhr.send(queryString);	
	}
	
	/**
	 * 监听提交状态，响应服务器返回结果
	 */
	function stateChangeHandle(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				parseResults();	
			}	
		}	
	}
	
	/**
	 * 接收并处理响应结果，
	 */
	function parseResults(){
		var responseDiv = document.getElementById("serverResponse");
		if(responseDiv.hasChildNodes()){
			responseDiv.removeChild(0);	
		}	
		
		var responseText = document.createTextNode(xhr.responseText);
		responseDiv.appendChild(responseText);
	}
</script>
</head>

<body>
<h1>请输入姓名和密码：</h1>
姓名：<input type="text" id="name"/>
密码：<input type="text"	id="pwd"/>

<form action="#">
<input type="button" value="Get方式提交" onclick="doRequestByGet()"/>
<input type="button" value="Post方式提交" onclick="doRequestByPost()"/>
</form>

<div id="serverResponse"></div>
</body>
</html>

五、服务端响应
以servlet为例：

public class GetAndPostExample extends HttpServlet{
	
	protected void processRequest(HttpServletRequest request,HttpServletResponse response,string method) throws ServletExcpetion,IOException{
		response.setContentType("text/xml,charset=UTF-8");
		response.setHeader("Cache-Control","no-cache");
		String name = request.getParameter("name");
		String pwd =  request.getParameter("pwd");
		String responseTxt = "你好！"+name+",你的提交方式是："+Method;
		
		PrintWriter out = response.getWriter();
		out.println(responseTxt);
		out.close();
	}
	
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		processRequest(request,response,"GET");
	}
	
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		processRequest(request,response,"POST");
	}
}

分享到：

运用W3C的DOM 处理xml文档 | [转贴]数据库名、实例名、数据库域名、全 ...

2010-05-22 19:09
浏览 1168
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论