AJAX编程（异步/XMLHttpRequest/API详解/GET和POST请求的差异/创建浏览器内建对象的兼容写法）

最新推荐文章于 2024-12-10 09:17:46 发布

carriehaohao

最新推荐文章于 2024-12-10 09:17:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 异步 XMLHttpRequest get post

本文链接：https://blog.csdn.net/carriehaohao/article/details/54096252

ajax 专栏收录该内容

13 篇文章

订阅专栏

AJAX，即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。

本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

ajax作用：提高网页程序运行的效率，提高请求通信的效率，降低服务器压力。

1. 异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

XMLHttpRequest 对象可以以异步方式的处理程序。

2. XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

首先需要创建 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

（1）请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系：

① 请求行

xhr.open('post','01.php');

②请求头

get请求可以不设置

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

③请求主体

get可以传空(null)

xhr.send("name=xjj&age=10");

（2）响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

**readyState**

0：请求未初始化（还没有调用open()）

1：请求已经建立，但是还没有发送（还没有调用send()）

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成

4：响应已完成；您可以获取并使用服务器的响应了

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态。

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系：

①获取状态行（包括状态码&状态信息）

xhr.status//状态码

xhr.statusText//状态码信息

②获取响应头

xhr.getResponseHeader('Content-Type');

xhr.getAllResponseHeaders();

③响应主体

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

xhr.responseText

xhr.responseXML

从发起请求到响应成功的完整写法示例：

/*js 内置的 http 请求对象  XMLHttpRequest*/
/*1.初始化这个内置对象*/
var xhr = new XMLHttpRequest();
/*2.请求报文*/
/*请求行*/
xhr.open('post','01.php');
/*请求头*/
//get  没有必要设置
//post 必须设置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');
/*请求主体*/
//get: xhr.send(null);
//post: xhr.send("数据");
xhr.send("name=xzz&age=10");/*发送请求*/
/*3.响应报文*/
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){/*通讯完全完成*/    
        if(xhr.status == 200){/*响应成功*/      
            document.querySelector('body').innerHTML = xhr.responseText;//渲染页面
        }
    }
}

（3）API 详解

xhr.open()//发起请求，可以是get、post方式

xhr.setRequestHeader()//设置请求头

xhr.send()//发送请求主体get方式使用xhr.send(null)

xhr.onreadystatechange=function(){}//监听响应状态

xhr.status//表示响应码，如200

xhr.statusText//表示响应信息，如OK

xhr.getAllResponseHeaders()//获取全部响应头信息

xhr.getResponseHeader('key')//获取指定头信息

xhr.responseText//表示响应主体

xhr.responseXML//表示响应主体

注意：GET和POST请求方式的差异

① GET没有请求主体，使用xhr.send(null)

② GET可以通过在请求URL上添加请求参数

③ POST可以通过xhr.send('name=itcast&age=10')

④ POST需要设置请求头 content-type

⑤ GET效率更好（应用多），增删改优先用post，查优先用get

⑥ GET大小限制约4K，POST则没有限制

3. 兼容性

ActiveXObject：低版本浏览器的内建对象，高版本是XMLHttpRequest

创建浏览器内建对象的兼容写法：

function XHR() {
    var xhr;
    try {
        xhr = new XMLHttpRequest();
    }
    /*如果 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/
    catch(e) {
        /*在不同的IE版本下初始  ActiveXObject  需要传入的标识*/
        var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i=0;i