AJAX / XHR ：XMLHttpRequest对象

Ajax在我之前的博客中，多多少少已经提起一点了，今天介绍下Ajax中XMLHttpRequest对象。

Ajax 通俗地讲可以实现网页的局部刷新，减轻服务的负荷量，给用户更好的体验度。

Ajax的工作原理：Ajax可以通过回调函数的使用，在获取服务器的数据后，实现部分加载的功能。如图：

XHR（xmlhttprequest）是Ajax的核心对象。其实就是Ajax实例化的执行者，很多方法和属性需要由它来执行。

那么XHR具体实如何来实现局部刷新的呢？分五步：

1.建立XHR对象。

2.注册回调函数。

3.使用open（）方法设置和服务交互的基本信息。

4.使用send（）方法设置发送的数据，开始和服务器交互。

5.在回调函数中判断交互状态readystate，更新页面。

其中需要注意的几点：

1.建立XHR对象很简单variable = new XMLHttpRequest()，但是需要兼容不同的浏览器：

  var xmlhttp;
if(window.XMLHttpRequest)
  {
// 兼容 IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {
// 兼容 IE6,IE5
  xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  }

2.Open 方法的参数设置：

Open（method，URL，async）：

Method：表示请求服务的类型，分为get 和 post 两种。

URL：表示要存储文件在服务器上的位置。如果是采用数据库则要确定到数据库的【.mdb】的位置。如果是在项

目中自己建立的servlet容器或者xml存储文件，则确定要项目中对应的位置即可。

3.XMLHttpRequest对象的属性：

responseText：表示返回字符串形式的数据；

responseXML：表示返回xml形式的数据；

onreadystatechange:存储函数，当有readystate属性改变时，就会调用该函数；

readystate：

0 ：请求未初始化；

1 ：服务器已经建立连接；

2 ：请求已经接收；

3 ：请求处理中；

4 ：请求已经完成，且响应就绪；

Status：

200 ：“OK”

404 ：未找到页面。

当readystate 等于4且状态为200 时，表示向服务器提交的请求已经反馈回来且准备就绪。

总结：

Ajax 是一项用于创建web 交互的技术，它是写在JS 文件中的，通过对HTML中元素注册特殊事件，在JS 中和数

据库进行交互，同时使用回调函数完成局部刷新（其实就是在HTML中先写一个容器div或其他，然后通过Ajax的五步

骤，将返回的数据装入到d容器中，因为本来容器就是存在的，所以看上去好像并不突兀，也没有整个页面提交）。

目前对Ajax的学习还比较浅，有不对的请多指教。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!