您现在的位置:首页 >> 前端 >> 内容

XMLHttpRequest对象创建和使用

时间:2017/2/18 14:27:21 点击:

  核心提示:根据上一小节已经知道XMLHttpRequest是Ajax实现的基础,所有现代浏览器都支持并内建了XMLHttpRequest对象。我们下面就来看一下该对象的使用。1、创建XMLHttpRequest...

根据上一小节已经知道XMLHttpRequest是Ajax实现的基础,所有现代浏览器都支持并内建了XMLHttpRequest对象。我们下面就来看一下该对象的使用。

1、创建XMLHttpRequest对象

要实现异步操作首先就需要创建一个XMLHttpRequest对象,创建语法如下:

var XHR = new XMLHttpRequest();

有了XMLHttpRequest对象,我们就可以通过它来实现发送服务器请求了。

2、向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法,相应语法规则如下:

方法描述

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。

method:请求的类型;GET 或 POST

url:文件在服务器上的位置

async:true(异步)或 false(同步)

send(string)将请求发送到服务器。

string:仅用于 POST 请求

下面是对百度请求的一个简单示例:

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

3、服务器响应

有了请求必然有响应,如需获得来自服务器的响应,可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述

responseText获得字符串形式的响应数据。

responseXML获得 XML 形式的响应数据。

具体使用哪一个根据服务器响应结果来确定,如果来自服务器的响应并非 XML,请使用 responseText 属性,否则使用responseXML 属性。

根据以上内容可以知道,我们已经可以通过XMLHttpRequest对象来发送服务器请求和接收来自服务器的响应数据了。但是只有这些还不足以实现异步操作,下面谈到的onreadystatechange 事件是关键。

4、readystate状态

readyState是XMLHttpRequest对象的一个属性,该属性存有 XMLHttpRequest 的状态信息,其值会随着响应而发生变换,每当readyState 改变时,就会触发 onreadystatechange 事件。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性描述

onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

status200: "OK"

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪,下面给出完整示例:

Let AJAX change this text

通过 AJAX 改变内容

Tags:XM ML LH HT 
作者:网络 来源:不详