一、XMLHttpRequest 对象的方法与属性
|
方 法 |
描 述 |
|
abort() |
停止当前请求 |
|
getAllResponseHeaders() |
把HTTP请求的所有响应首部作为键/值对返回 |
|
getResponseHeader("header") |
返回指定首部的串值 |
|
open("method", "url") |
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数 |
|
send(content) |
向服务器发送请求 |
|
setRequestHeader("header", "value") |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
|
属 性 |
描 述 |
|
onreadystatechange |
每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数 |
|
readyState |
请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成 |
|
responseText |
服务器的响应，表示为一个串 |
|
responseXML |
服务器的响应，表示为XML。这个对象可以解析为一个DOM对象 |
|
status |
服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等） |
|
statusText |
HTTP状态码的相应文本（OK或Not Found（未找到）等等） |
二、使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端index.jsp代码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>xmlhttprequest ajax demo</title> <script type ="text/javascript" language ="javascript" > var req; //定义变量，用来创建xmlhttprequest对象 function creatReq() // 创建xmlhttprequest,ajax开始 { var url="/ajaxDemo/ajaxServer"; //要请求的服务端地址 var browser=navigator.appName; if(browser=="Microsoft Internet Explorer"){ var arrVersions=["Microsoft.XMLHttp","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"] for(var i=0;i<arrVersions.length;i++){ try{ req=new ActiveXObject(arrVersions[i]); } catch(exception){ } } } else{ req=new XMLHttpRequest(); } if(req) //成功创建xmlhttprequest { req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步) req.onreadystatechange = callback; //指定回调函数 req.send(null); //发送请求 } } function callback() //回调函数，对服务端的响应处理，监视response状态 { if(req.readystate==4) //请求状态为4表示成功 { if(req.status==200) //http状态200表示OK { Dispaly(); //所有状态成功，执行此函数，显示数据 } else //http返回状态失败 { alert("服务端返回状态" + req.statusText); } } else //请求状态还没有成功，页面等待 { document .getElementById ("myTime").innerHTML ="数据加载中"; } } function Dispaly() //接受服务端返回的数据，对其进行显示 { document .getElementById ("myTime").innerHTML =req.responseText; } </script> </head> <body> <input id="Button1" type="button" value="Get Time" onclick ="creatReq();"/> <div id="myTime"></div> </body> </html>
服务端AjaxServer.java代码
import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServer extends HttpServlet { public AjaxServer() { super(); } public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Date d = new Date(); SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd kk:mm:ss "); String str=sdf.format(d); response.getWriter().write(str); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } public void init() throws ServletException { // Put your code here } }
web.xml
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>AjaxServer</servlet-name> <servlet-class>servlet.AjaxServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServer</servlet-name> <url-pattern>/ajaxServer</url-pattern> </servlet-mapping> </web-app>