AJAX,Asynchronous JavaScript + XML的简写。作为作为J2EE开发人员J2EE的开发人员,我们总是关注于后台表现,关注于业务层和数据层,对于用户界面和反应,包括用户体验和用户界面反应的灵敏度,我们关注得不够。Ajax,使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
基于 XHTML和 CSS标准的表示; 使用 Document Object Model进行动态显示和交互; 使用XMLHttpRequest与服务器进行异步通信; 使用JavaScript绑定一切。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
Table 1. Common XMLHttpRequest Object Methods
Method | Description |
---|---|
abort() | Stops the current request |
getAllResponseHeaders() | Returns complete set of headers (labels and values) as a string |
getResponseHeader("headerLabel") | Returns the string value of a single header label |
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) | Assigns destination URL, method, and other optional attributes of a pending request |
send(content) | Transmits the request, optionally with postable string or DOM object data |
setRequestHeader("label", "value") | Assigns a label/value pair to the header to be sent with a request |
Table 2. Common XMLHttpRequest Object Properties
Property | Description |
---|---|
onreadystatechange | Event handler for an event that fires at every state change |
readyState | Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete |
responseText | String version of data returned from server process |
responseXML | DOM-compatible document object of data returned from server process |
status | Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK" |
statusText | String message accompanying the status code |
客户端调用XMLHTTP的过程很简单,只有5个步骤
1、创建XMLHTTP对象
2、打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等。
客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样,可以用"GET"方法或"POST"方法指向服务端的服务网页。
3、发送指令。
4、等待并接收服务端返回的处理结果。
5、释放XMLHTTP对象
使用AJAX技术最重要的就是创建XMLHttpRequest对象,一般常用的方法如下:function createXMLHttpRequest() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
alert("创建XMLHttpRequest对象失败!");
}
}
}
return xmlhttp;
}
xmlHttp = createXMLHttpRequest();//得到XMLHttpRequest对象
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;//每次状态改变所触发事件的事件处理程序
xmlHttp.open("post", url, true); //传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
文档对象模型(DOM)
文档对象模型(DOM)是表示文档(比如HTML和XML)和访问、操作构成文档的各种元素的应用程序接口(API)。一般的,支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM,是指W3C定义的标准的文档对象模型,它以树形结构表示HTML和XML文档,定义了遍历这个树和检查、修改树的节点的方法和属性。DOM下,HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型。