XMLHttpRequest对象详解

一直用习惯了Jquery的$.Ajax,之前面试时有一笔试题要求用原生Javascript写一个AJax请求,特做一个整理。

什么是Ajax?

Ajax代表异步JavaScript和XML。简言之,它是使用XMLHttpRequest对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息,包括JSON,XML,HTML和甚至文本文件。然而,AJAX的最有吸引力的的特征是它的“异步”的性质,这意味着它可以做这一切,而无需刷新页面。这使您可以更新部分基于用户事件页面。
AJax的两个特点是,你可以:

  • 无需重新加载页面对服务器的请求
  • 接收和处理来自服务器的数据

如何创建一个XMLHttpRequest对象?

最简单的方法是:

//创建xhr对象
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

//事件响应
httpRequest.onreadystatechange = nameOfTheFunction;
<pre>httpRequest.onreadystatechange = function(){
    // process the server response
};
<pre>//发送请求
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

XMLHttpRequest对象的属性与方法:

XHR 请求:

open(method,url,async):

指定请求的类型,URL,如果请求应当异步处理或没有。

method: 设定请求类型,GET或POST
url: 请求地址
async: true (异步) or false (同步)

send(string):

向服务器发送请求。

string: 只在使用POST方式请求的时候使用

setRequestHeader(header,value):

添加请求主机头信息。

header:指定的头名
value:指定的标头值

XHR 响应:
responseText:作为一个字符串的响应数据

responseXML:作为XML的响应数据


XHR readyState:

onreadystatechange: readyState值改变时的触发事件

readyState:

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

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status:

HTTP响应状态码

  • 200: “OK”
  • 404: 未找到页面

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

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
 }

<strong>
一个简单的完整示例:</strong>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}
} //missing closing bracket added by bwalton 5/11/11.
)();
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注