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

AJAX创建XMLHttpRequest对象实例

2016-12-03 17:36 537 查看

AJAX（Asynchronous JavaScript and XML），异步的JavaScript和XML，它并不是新的编程语言，而是在我们之前学过的JavaScript，HTML，CSS和XML等标准上的一个新方法，AJAX作为一种快速创建动态网页的技术，最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容。

所谓同步异步，让我想起小学时候学到的统筹兼顾这个词。一小例子说明：

一壶水烧开需要20min，扫地拖地10min，浏览新闻10min，完成三件事情方案很多，其中两种为：

①按顺序，烧上水等待水烧开20min后，扫地拖地10min完后休息浏览新闻10min，总计40min

②烧上水后就去扫地而后休息，等待水壶鸣笛，提醒你水烧开了，此时花费20min

在等待水壶烧开的过程中的两种方案就分别体现了同步和异步，第一种必须一心只完成一件事，即等待20min后水烧开，随后进行其他任务，可称为同步，第二种则是统筹时间，能够利用时间高效做事，可称为异步。在程序中AJAX就提供了与服务器异步通讯的一种能力，从而使用户从请求/响应的循环中解脱出来。借助于AJAX可以使用户在单击按钮时，使用JavaScript和HTML立即更新UI界面，并向服务器发出异步请求，以执行更新或查询数据库等操作。当请求返回时，就可以使用JavaScript和CSS来响应更新UI，而不是刷新整个页面。在这个过程中，用户甚至是不知道浏览器正在与服务器通讯，他看到的就是web站点及时响应了他的操作。

下边以获取当前服务器时间为例，详细解说一下实现AJAX的基本步骤

（1）创建XMLHttpRequest对象，也就是创建一个异步调用对象（注意浏览器兼容问题）

（2）创建新的Http请求，并指定该请求的方法、URL及验证信息。

（3）设置响应Http请求状态变化的函数

（4）发送Http请求

（5）获取异步调用返回的数据

（6）使用JavaScript和DOM实现局部更新。

获取当前服务器时间GetTime的HTML页需要请求服务器HandlerShowTime一般处理程序以得到服务器响应的时间，通过JavaScript请求如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>获取当前服务器时间</title>
<style type="text/css">
#dvTime
{
color: Red;
border: 1px solid blue;
width: 500px;
height: 50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
//为按钮注册一个单击事件
document.getElementById('btnClick').onclick = function () {

//-------------------开始发起请求--------------------
document.getElementById('img1').style.display = 'block';

//请求服务器的一个一般处理程序，获取时间，并设置到div中。
//请求HandlerShowTime.ashx一般处理程序，获取服务器响应的时间
//通过JavaScript请求服务器的步骤：

//1.创建一个XMLHttpRequest对象，这里直接进行判断并未指定创建XMLHttpRequest对象的方法。
var xhr = null;
//通过能力检测，在不同浏览器下创建该对象
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();//创建Firefox,Google Chrome,opera等其他浏览器的XMLHttpRequest对象
} else if (ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp");//创建IE浏览器中的XMLHttpRequest对象
}

//2.初始化请求。告诉xhr对象，使用get还是post发起请求，要请求那个地址，是否是异步的。
xhr.open('get', 'HandlerShowTime.ashx', true);

//3.设置回调函数，响应Http请求状态变化
xhr.onreadystatechange = function () {
//在请求的不同阶段都会回调这个函数
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('img1').style.display = 'none';
document.getElementById('dvTime').innerHTML = ' 当前时间：' + xhr.responseText;
}
}
//这里readState属性值为4表示异步调用完毕，status属性值为20表示异步调用成功。

//4.开始发起请求
xhr.send(null); //因为当前使用的是get请求，没有请求报文体，所以传递null参数。

};
};
</script>
</head>
<body>
//5.6.通过AJAX异步调用获取服务器数据后，用JavaScript进行局部更新，这里就是上边的window.onload
<input type="button" id="btnClick" value="获取服务器时间" />
<div id="dvTime">
当前时间：
</div>
<img id="img1" style="display: none" src="加载-002.gif" alt="Alternate Text" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航