您的位置：首页 > 理论基础 > 计算机网络

第一章：使用XMLHttpRequest对象

2016-04-20 23:29 501 查看

1.创建XMLHttpRequest对象

var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

创建XMLHttpRequest对象相当容易，首先创建一个全局作用域变量xmlHttp来保存这个对象的引用，window.ActiveXObject会返回一个对象或null，if语句会把调用返回的结果看做事true或false，以指示浏览器是否支持ActiveX控件，相应的得知浏览器是否是IE浏览器，如果是则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个字符串指示要创建何种类型的ActiveX对象，传入Microsoft.XMLHTTP，表示想创建XMLHttpRequest的一个实例；如果window.ActiveXObject调用失败（返回null），JavaScript就会转到else分支，确定浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。如果存在window.XMLHttpRequest，就会创建XMLHttpRequest的一个实例。

2.XMLHttpRequest对象的方法和属性

1.方法

abort()    //停止当前请求
getAllResponseHeaders()    //把http请求的所有响应首部作为键/值对返回
getResponseHeader("header")   //返回指定首部的串值
open("method","url")//建立对服务器的调用，method参数可以是get、post或put，URL参数可以是相对URL，也可以是绝对URL，这个方法还包含3个可选参数
send(content)    //向服务器发请求
setRequestHeader("header","value")    //把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()

下面详细介绍这些方法：

void open(String method,String url,boolean asynch,String username,String password)

这个方法会建立对服务器的调用，这是初始化一个请求的纯脚本方法，它有两个必要的参数和三个可选的参数，第一个指定调用的方法（GET、POST或PUT），第二个指定所调用资源的URL，第三个传递一个Boolean值，指示这个调用是异步还是同步的，默认值为true，表示请求是异步的，如果这个参数设置为false，处理就会等待，直到服务器返回响应为止，最后两个参数允许指定一个特定的用户名和密码。

void send(content)
这个方法向服务器发出请求，如果请求声明是异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。传入这个方法的内容会作为请求整体的一部分发送。

void setRequestHeader(String header,String value)
这个方法为HTTP请求中一个给定的首部设置值，它有两个参数，第一个表示要设置的首部，第二个表示要在首部中放置的值，注意，这个方法必须在调用open()之后才能调用。

void abort()
这个方法用来停止请求。

String getAllResponseHeaders()
这个方法返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-Length、Date和URL。

String getResponseHeader(String header)
这个方法用于返回指定的HTTP响应首部。

2.属性

<span style="font-size:10px;">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等等

3.交互示例



1.一个客户端事件触发一个Ajax事件，比如有下面代码：

<input type="text" id="email" name="email" onblur="validateEmail">
2.创建XMLHttpRequest对象的一个实例，使用open方法建立调用，并设置所希望的HTTP方法（GET或POST）以及URL，再使用send方法发送请求，代码如下：

var xmlHttp;
function validateEmail () {
var email = document.getElementById('email');
var url = "validate?email=" + escape(email.value);
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET",url);
xmlHttp.onreadystatuschange = callback;
xmlHttp.send(null);
}

3.向服务器做出请求，可以调用任何服务端技术；

4.服务器可以做你想做的事情，包括访问数据库，甚至访问另一个系统；

5.请求返回浏览器，下面的代码使浏览器不会在本地缓存结果：

response.setHeader("Cache-Control","no-cache")
response.setHeader("Pragma","no-cache")    //Pragma和Cache-Control是一样的，设置Pragma是为了保证向后兼容
6.在这个示例中，XMLHttpRequest对象在请求返回时会调用callback()函数：

function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//do something
}
}
}
如上所示，这个函数会检查XMLHttpRequest对象的readState属性，然后查看服务器返回的状态码，如果都正常，callback()函数就会在客户端做一些事。

4.GET与POST

当使用POST方式提交请求时，需要设置XMLHttpRequest对象的Content-Type首部，如下所示：
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")

5.一个简单的请求示例

simpleRequest.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}

function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>

<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
</form>
</body>
</html>
simpleResponse.xml文件：
Hello from the server!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax xmlhttprequest
相关文章推荐
新的分享
章节导航