Java开发之AJAX基础入门

一、 XMLHttpRequest概述

XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XMLHttpRequest最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

现在的绝对多数浏览器都增加了对XMLHttpRequest的支持，IE中使用ActiveXObject方式创建XMLHttpRequest对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建XMLHttpRequest对象。

二、 XMLHttpRequest类

1、 XMLHttpRequest成员属性

2、 XMLHttpRequest成员函数

3、 XMLHttpRequest的readystate的状态

4、 XMLHttpRequest接口声明

interface XMLHttpRequest { // event handler attribute EventListener onreadystatechange; // state const unsigned short UNSENT = 0; const unsigned short OPENED = 1; const unsigned short HEADERS_RECEIVED = 2; const unsigned short LOADING = 3; const unsigned short DONE = 4; readonly attribute unsigned short readyState; // request void open(in DOMString method, in DOMString url); void open(in DOMString method, in DOMString url, in boolean async); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); void setRequestHeader(in DOMString header, in DOMString value); void send(); void send(in DOMString data); void send(in Document data); void abort(); // response DOMString getAllResponseHeaders(); DOMString getResponseHeader(in DOMString header); readonly attribute DOMString responseText; readonly attribute Document responseXML; readonly attribute unsigned short status; readonly attribute DOMString statusText;};

5、 XMLHTTPRequest接口常用方法与属性说明

a) readyState属性

A. 0 (未初始化) B. 1 (初始化) C. 2 (发送数据)D. 3 (数据传送中) E. 4 (完成)

b) responseText属性

XMLHttpRequest尝试将响应信息解码为Unicode字符串，XMLHttpRequest默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHttpRequest可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。需要使用responseXML来处理。

c) responseXML属性

将响应信息格式化为Xml Document对象并返回。如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。

d) open函数

A. 语法XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);B. 参数1. bstrMethod：http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 2. bstrUrl：请求的URL地址，可以为绝对地址也可以为相对地址。 3. varAsync[可选]：布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用 onreadystatechange属性指定的回调函数。 4. bstrUser[可选]：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。 5. bstrPassword[可选]：验证信息中的密码部分，如果用户名为空，则此值将被忽略。

e) send函数

A. 语法XMLHttpRequest.send(varBody);B. 参数1. varBody：欲通过此请求发送的数据。C. 注意：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。

三、 XMLHTTPRequest使用例子

1. 构造XMLHttpRequest对象

XMLHttpRequest对象的生成需要根据不同浏览器来决定。由于历史原因MS对JavaScript的支持停留在1.1的版本上。所以在IE中生成XMLHttpRequest对象采用的是ActiveX组件的方式。JavaScript标准方式：var oxmlhttp=new XMLHttpRequest();MS的ActiveX方式：var oxmlhttp=new ActiveXObject(“MSXML2.XMLHTTP”);其中ActiveX组件名称还有：Microsoft.XMLHTTP，MSXML2.XMLHTTP.3.0

1. 打开连接

xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax");xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax",false,"louis","young");xmlhttp.open("post","http://127.0.0.1:9999/ajaxdemo/simple.ajax",false,"louis","young");

1. 绑定事件

xmlhttp.onreadystatechange=ajaxevent;xmlhttp.onreadystatechange=function(){};//绑定匿名方法

1. 发送数据与服务器数据接受

xmlhttp.send(null);xmlhttp.send("啊里粑粑!");XMLHttpRequest对象的请求状态与相应得处理.

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）1 (初始化) 对象已建立，尚未调用send方法2 (发送数据) send方法已调用，但是当前的状态及http头未知3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

服务器的相应状态：

1××　保留2××　　表示请求成功地接收3××　　为完成请求客户需进一步细化请求4××　　客户错误5××　　服务器错误

1. 客户数据接收

a) 接受正常数据

//打开连接xmlhttp.open("get","http://127.0.0.1:9999/ajaxdemo/simple.ajax?key1=value1&key2=value2",false,"louis","young");//绑定事件xmlhttp.onreadystatechange=function(){switch(xmlhttp.readyState){ case 0: data.innerHTML="对象已经建立!"; break; case 1: data.innerHTML="准备send..."; break; case 2: data.innerHTML="数据发送中..."; break; case 3: data.innerHTML="数据传送中..."; break; case 4: data.innerHTML="请求完毕!"; if(xmlhttp.status==200){ data.innerHTML=xmlhttp.responseText; } break; default: data.innerHTML="意外"; }};//发送请求与数据xmlhttp.send("啊里粑粑!");

b) 接受状态和利用header接收

case 4:data.innerHTML="请求完毕!";if(xmlhttp.status==200){var txt=xmlhttp.responseText;txt+=xmlhttp.getResponseHeader("mycode");data.innerHTML=txt;}if(xmlhttp.status==501){data.innerHTML="501错误";}break;

c) 客户数据发送与服务器数据接收

public String readDataFromAJAX(HttpServletRequest req){StringBuffer data = new StringBuffer();String line = null;try{BufferedReader br = req.getReader();while((line=br.readLine())!=null){data.append(line);}}catch(Exception e){e.printStackTrace();}return data.toString();}

d) 用户与口令接收

客户接受数据与服务器数据发送

1. 客户接收数据有个麻烦：服务器过来的数据到底是文本还是XML？

case 4:data.innerHTML="请求完毕!";if(xmlhttp.status==200){var txt=xmlhttp.responseXML;data.innerHTML=txt;}if(xmlhttp.status==501){data.innerHTML="501错误";}break;default:data.innerHTML="意外"; }