XMLHttpRequest Object
作者：kongxx
什么是XMLHttpRequest对象
一个页面可以通过一个HttpRequest发送一个请求来获取服务器响应，而当前页面不做刷新。
通过使用XMLHttpRequest对象，开发者可以在不刷新当前页面的情况下更新当前页面的数据。
注：XMLHttpRequest对象不是W3C标准，不过目前已有以下浏览器支持此对象操作：IE5.0+,Safari1.2,Mozilla1.0,Firefox,Netscape7。
创建一个XMLHttpRequest对象
要创建XMLHttpRequest对象，可以采用以下方法：
对于IE：
|
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
|
对于For Mozilla, Firefox, Safari, and Netscape：
|
var xmlhttp=new XMLHttpRequest()
|
XMLHttpRequest对象引用
方法：
|
方法
|
描述
|
|
abort
|
取消当前请求
|
|
getAllResponseHeaders()
|
获取完整的Http header信息
|
|
getResponseHeader(headername)
|
获取指定的Http header信息
|
|
open(method,url,async,user,passwd)
|
打开一个请求。
method-指定请求方法get或post
url-请求的url
async-指定异步请求响应。true表示发送请求后不等待回应而去执行别的操作；false表示请求后等待回应后才去继续别的操作。
user-访问用户（可选）
passwd-访问密码（可选）
|
|
send(content)
|
发送请求
|
|
setRequestHeader("label","value")
|
设置请求头部信息
|
属性：
|
属性名
|
描述
|
|
onreadystatechange
|
一个事件，用来捕获所有的状态变换
|
|
readyState
|
返回对象状态：
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
|
|
responseText
|
响应文本
|
|
responseXML
|
响应XML数据
|
|
status
|
返回状态数字（如:”404”
>表示“Not Found” “200”表示“OK”）。
|
|
statusText
|
返回状态文本（如：“Not Found” ，“OK”）
|
一个小例子
test1.jsp创建一个XMLHttpRequest对象，并从服务器获取服务器时间填充到当前页面指定的div中，代码如下：
|
<%@ page contentType="text/html;charset=gb2312" language="java" errorPage=""%>
<html>
<head>
<script language="javascript">
var xmlhttp ;
var url = "test2.jsp";
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function func_test() {
if (xmlhttp) {
xmlhttp.open("GET", url,true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById('testdiv').innerHTML=xmlhttp.responseText;
}
}
}
xmlhttp.send(null);
}
</script>
</head>
<body bgcolor="#FFFFFF" >
<input type="button" value="button" onclick="func_test()">
<div id="testdiv">
</div>
</body>
</html>
|
test2.jsp接收请求输入当前系统时间，代码如下：
|
<%@ page contentType="text/html;charset=gb2312" language="java" errorPage=""%>
<%@ page import="java.util.*"%>
<%
out.println(Calendar.getInstance().getTime());
%>
|
将此两个文件放入Tomcat中，访问test1.jsp页面，点击button，即可显示服务器时间。
由此看出，在一些开发中我们可以使用XMLHttpRequest对象来处理两次请求页面表现形式相似的情况，通过XMLHttpRequest对象来获取数据并替换当前页面的类似的数据内容,从而减少每次响应得数据流量，提高客户端的访问速度。
分享到：
相关推荐
Using the XMLHttpRequest Object Now that we’ve discussed the history of dynamic Web applications and introduced Ajax, it’s time to cover the heart of the matter: how to use the XMLHttpRequest ...
console.log('XMLHttpRequest object created successfully.'); } else { console.error('Failed to create XMLHttpRequest object.'); } ``` #### 六、总结 本文详细介绍了如何在不同浏览器环境下创建`...
It uses the XMLHTTPRequest object in JavaScript to send and receive commands to and from the server. No refreshing of the page is ever needed for this "web application" to work, as everything is ...
This book provides a developer-level introduction along with more advanced and useful ...fly graphicsJavaScript API changes in ...XMLHttpRequest object and CORScomplex patterns including function currying...
Web form形式的网页 The chat lines are sent to the server using a XMLHttpRequest object. 使用XMLHttpRequest对象将chat lines发到服务器 The chat lines are received by a server side script ...
throw new Error("No XMLHttpRequest object available") } } ``` **五、Eclipse下使用DWR源代码** 在Eclipse中，你可以： 1. **导入DWR库**：将DWR的jar包添加到项目的构建路径中。 2. **配置DWR**：设置`dwr....
Part IV is a reference for client-side JavaScript, covering legacy web browser APIs, the standard Level 2 DOM API, and emerging standards such as the XMLHttpRequest object and the <canvas> tag. ...
Part IV is a reference for client-side JavaScript, covering legacy web browser APIs, the standard Level 2 DOM API, and emerging standards such as the XMLHttpRequest object and the <canvas> tag. ...
tried-and-true technologies, along with the XMLHttpRequest object, you can turn browsers into application platforms that closely mirror desktop applications. This capability is allowing existing web ...
通过结合JSON（JavaScript Object Notation）作为数据交换格式，可以轻松地处理服务器返回的结构化数据。此外，还可以利用Ajax实现表单的无刷新提交，提高用户体验。 然而，需要注意的是，由于同源策略的限制，...
ActiveWidgets controls generate html on the client-side and can communicate with the server asynchronously using XMLHTTPRequest object (AJAX-style). <br/>ActiveWidgets library includes powerful ...
新的W3C策略实现了HTTP跨域访问，还亏我找了很久的资料解决这个问题：只需要在servlet中返回的头部信息中添加...代码如下：HTML的JS的ajax请求：复制代码 代码如下:/* Create a new XMLHttpRequest object to talk to
XMLDOM（XML Document Object Model）是XML文档的编程接口，它允许程序读取、修改和创建XML文档。在ASP.NET中，XMLDOM常用于解析XML数据： 1. 加载XML：首先，需要创建一个`System.Xml.XmlDocument`对象，然后使用`...
3. **DOM（Document Object Model）**：用于操作HTML或XML文档结构，通过JavaScript可以动态修改页面内容。 4. **CSS（Cascading Style Sheets）**：用于控制页面样式和布局，常与AJAX结合使用以更新页面视觉元素。 ...
- `IDispatch to an XML Document Object Model (DOM)`：指向XML DOM对象的接口，适用于直接发送XML文档结构。 - `IStream`：流对象，适用于处理大量数据或者需要流式传输的情况。 #### 核心知识点三：编码与数据...
本示例将深入探讨如何使用XMLHttpRequest直接访问Web服务以及通过SOAP（Simple Object Access Protocol）协议进行访问。 首先，让我们了解XMLHttpRequest的基本用法。创建一个XMLHttpRequest实例，然后设置其...
此外，我们还提到了JSON（JavaScript Object Notation），这是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在实际的Ajax应用中，服务器通常会返回JSON格式的数据，而不是原始的XML。...
XMLHttpRequest对象有一个重要的属性——responseXML，当服务器返回的数据是XML格式时，这个属性就会包含一个DOM（Document Object Model）对象，可以用来解析和操作XML数据。通过这个DOM，我们可以使用JavaScript的...