ajax的本来面目
一、认识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()
四、发送请求参数
五、服务端响应
以servlet为例：
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");
}
}