Ajax技术1——XMLHttpRequest对象

最新推荐文章于 2024-11-10 15:10:09 发布

冉茂松

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量302

点赞数 1

分类专栏： Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/u014630987/article/details/58142512

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax技术1——XMLHttpRequest对象

Ajax是Asynchronous JavaScript and XML的简写，他可以向服务器请求额外的数据而无须卸载页面，意味着用户单击后，可以不必刷新页面也能去的数据。Ajax技术的核心是XMLHttpRquest对象（简称XHR)

创建XMLHttpRequest对象
针对不同浏览器和不同版本，创建XMLHttpRequest对象的方法不同，对于IE5.5及以下版本，使用new ActiveXObject("Microsoft.XMLHTTP"),而IE6则使用new ActiveObject("Msxml2.XMLHTTP"),IE7及以上和其他浏览器则使用new XMLHttpRequest(),以下是一个适用于据大多数浏览器创建XMLHttpRequest对象的函数:

function createXHR() {
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActivexObject("Msxml.XMLHTTP");
    }
    return xhr;
}

xhr发送请求
XHR对象创建后，使用的第一个方法是open(mehtod, url, async):
- method: String，表示请求的类型，通常为“post”和“get”;
- url: String,请求的URL;
- async: Boolean,表示是否异步请求，true表示异步，false表示同步，默认为true
open()方法不会真正发送请求，只是启动一个请求以备发送，要想发送请求必须通过send()方法，send()方法接受一个参数，作为请求主体发送的数据，如果open()发送选择get类型，则为了浏览器兼容，传入null，即send(null),如果open（）选择post，则传入发送的数据，参数类型类似”key1=value1&key2=value2”,此时浏览器就就已经向服务发送请求了，我们只需等待。
接收服务器响应
由于Ajax一般都用于异步加载数据，故同步加载不作详细描述，在收到服务器的响应，响应的内容会自动填充XHR的相关属性：
- responseText：作为响应主题被返回的文本，
- responseXML：如果相应的内容类型是“text/xml”或”application/xml”,则保存着响应数据的XML DOM文档；
- status：响应的HTTP状态（一般将200作为成功的标志，304表示资源没有被修改，可以使用缓存资源）
- statusText：HTTP状态的说明
XHR对象还有一个readyState属性，表示请求/响应过程的当前活动阶段，有如下可取的值：
- 0：未初始化。创建了对象，尚未调用open()方法
- 1：启动。已经调用oepn()方法，但未调用send()方法
- 2：发送。已调用send()方法，但未收到响应
- 3：接收。已经接受到部分相应数据，但未全部收到
- 4：完成：接收到全部响应数据
只要readyState属性的值变化就会触发readystatechange事件，通常我们支队readyState为4的阶段感兴趣。注意，为了浏览器的兼容，通常将指定onreadystatechange事件处理程序放在open()方法之前，以下是获得服务器相应数据的代码:
```
var xhr = createXHR();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: "+ xhr.status);
        }
    }
xhr.open("get", "example.txt", true);
xhr.send(null);
```
XHR其它方法
- setRequestHeader(key, value):设置请求头，位于oepn()和send()方法之间；
- getResponseHeader(key): 获取相应内容相应key的响应头；
- getAllResponseHeaders():返回全部的响应头；
  使用GET请求时，我们要注意对查询字符串编码，使用encodeURLComponent()函数编码：
```
url += "?" + encodeURIComponent(key) + "=" + encodeURIComponent(value;)
```
使用post传递表单数据时，要设置Content-Type请求头为：application/x-www-form-urlencoded
总结
使用Ajax大致流程：
- 创建XMLHttpRequest对象
- 为onreadystatechange事件添加事件处理程序
- 使用open()方法
- 使用setRequestHeader()设置请求头
- 使用send()方法