ajax的本来面目

ll_feng

于 2010-05-22 19:09:11 发布

阅读量50

点赞数

分类专栏： ajax 文章标签： Ajax IE JavaScript Cache Microsoft ViewUI

本文链接：https://blog.csdn.net/ll_feng/article/details/83632786

版权

ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、认识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");
	}
}

ll_feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的本来面目

一、认识XMLHttpRequestXMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的，开始只能在IE中使用，后来被广泛采用而成为事实上的标准。二、属性onreadystatechange 每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数readState 请求的状态。有5个可取值：0=未初始化，1=正在加载，2=已加载...
复制链接

扫一扫

专栏目录