一、简介
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
二、XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
XmlHttpRequest常用属性如下所示:
1.readyState
当XMLHttpRequest对象把一个HTTP请求发送到服务器的时候经历的若干状态。一直等待到请求被处理。然后它才接受一个响应。readyState是一个整数值,用于描述“若干种”状态。具体如下表所示
readyState | 对象状态值:· 0 = 未初始(uninitialized)· 1 = 正在加载(loading)· 2 = 加载完毕(loaded)· 3 = 交互(interactive)· 4 = 完成(complete) |
2.onreadystatechange事件
无论readystate的值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。onreadystatechange属性用于定义状态变化响应函数。与图形用户界面中定义事件的响应函数相似。
3.responseText属性
该属性包含客户端接受的HTTP响应文本内容。当readyState的值为0、1、2时,responseText中包含一个空字符串。当readyState的值为3(正在接受),响应中包含客户端还未成的响应信息。当readyState为4时(加载完成),该responseText包含完整的响应结果信息。
4.responseXML属性
该属性用于接受到完整的HTTP响应时(readyState=4),描述响应的XML响应,即接受服务端发送过来的XML格式的信息
5.status属性
该属性描述了HTTP状态代码,而且其类型为short。并且当且仅当readystate的值大于3时才可用。当readyState的值小于3的时候试图存取status的值将引发一个异常。
6.statusText属性
这个属性描述了HTTP状态代码文本;并且当readyState的值为3或4时才可以使用。当readyState为其他值使用该属性会导致一个异常。
XMLHTTPRequest对象提供了各种方法用于初始化合处理HTTP请求,如下所示
1. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型)
2. void send(String body)
用于发送请求
参数:
body: 要发送的数据(字符串类型)
3. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型)
4. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
5. String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header: 响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值
6. void abort()
终止请求
下面是一个ajax的简单示例。
点击receive按钮后
下面为代码部分
- Test.java:Servlet类
@WebServlet("/test") public class TestServlet extends HttpServlet { private final static long serialVersionUID=1L; public TestServlet(){ super(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Post Successfully"); PrintWriter out = resp.getWriter(); out.print("my name is van.I am an artist.A performance artisti." + "I am hired for people to perfill their fantasy.The deep dark fantasy"); } }
- index.jsp:主页面
<html> <head> <script type="text/javascript"> var xmlHttp; function recvState(){ //4表示服务器响应请求 if(xmlHttp.readyState==4){ //200表示成功回应 if(xmlHttp.status==200){ var s = xmlHttp.responseText; var divobj = document.getElementById("content"); divobj.innerHTML=s; } } } function recv(){ alert("recv") var url = "test"; //获取xmlHttp对象 xmlHttp = createXmlHttp(); xmlHttp.open("post",url,false); xmlHttp.onreadystatechange=recvState; xmlHttp.send(); } //获得XmlHttp对象 function createXmlHttp() { //对于大多数浏览器都使用的写法 var xmlHttp; if (window.XMLHttpRequest) { //部分浏览器获取xmlHttp实例的方式 xmlHttp = new XMLHttpRequest(); } if (window.ActiveXObject) { //考虑浏览器的兼容性 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } </script> </head> <body> <input type="button" id="recv" value="receive" onclick="recv()"/> <hr> <div id="content" style="width:200px;height:200px;border:solid 1px black"></div> </body> </html>