原生js实现Ajax

lily_wang 发布于2019-08-22 18:40 / 477人阅读

摘要：对象通过实现是第一个引入对象的浏览器中对象是通过库中的一个对象实现的中可能会遇到种不同版本的对象，即适用于之前的版本通过构造函数和都支持原生对象生成对象的方法支持之前的版本对象的属性表示请求响应过程的当前活动阶段值变化将触发事件，利用该事件

XMLHttpRequest对象


通过ActiveXObject实现（）

new ActiveXObject("Microsoft.XMLHTTP")
IE5是第一个引入XMLHttpRequest对象的浏览器；
IE5中,XHR对象是通过MSXML库中的一个ActiveX对象实现的；
IE中可能会遇到3种不同版本的XHR对象，即 MSXML2.XMLHttp.6.0, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp；
适用于IE7之前的版本



通过XMLHttpRequest构造函数

var xhr = new XMLHttpRequest();
IE7+、FireFox、Opera、Chrome和Safari都支持原生XMLHttpRequest对象；

生成XMLHttpRequest对象的方法

function createXHR() {
    if (typeof XMLHttpRequest !== "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== "undefined"){
        // 支持IE7之前的版本
        if (typeof arguments.callee.activeXString !== "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
            for (var i = 0; i < versions.length; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available!");
    }
}

XHR对象的readyState属性

readyState 表示请求/响应过程的当前活动阶段；

readyState值变化将触发readystatechange事件，利用该事件检测每次状态变化后的readyState值；

通常只对readyState值为4的阶段感兴趣，此时所有数据已就绪；

为了确保跨浏览器兼容性，必须在调用open()之前指定readystatechange事件处理程序；

readyState属性取值：

值	阶段	说明
0	未初始化	还没有调用 open() 方法
1	启动	已调用 send() 方法，正在发送请求
2	发送	send() 方法完成，已收到全部响应内容
3	接收	正在解析响应内容
4	完成	响应内容解析完成，可以在客户端调用

XHR对象收到响应后添加的属性

属性	说明
responseText	作为响应主体被返回的文本；
responseXML	若响应内容类型是"text/xml"或"application/xml", 其值包含着响应数据的XML DOM文档；对于非XML数据而言，responseXML值为null
status	响应的HTTP状态
statusText	HTTP状态的说明

封装AJAX方法

/**
 *
 * @param type 请求类型：get,post,...
 * @param url
 * @param dataObj 请求参数：对象字面量{key:value,...}
 * @param callback
 * @param async 是否异步
 */

function ajax(type, url, dataObj, callback, async) {
    var paramsStr = buildParamsStr(dataObj), xhr = null;
    if (type === "get" && dataObj) {
        url = addURLParams(url, paramsStr);
    }
    xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            var status = xhr.status;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                callback && callback(xhr.responseText);
            } else {
                console.log("请求异常！状态码：" + xhr.status);
            }
        }
    };
    xhr.open(type, url, async); // open()方法启动一个请求以备发送；
    if (type == "get") {
        xhr.send(null);
    } else {
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(paramsStr);
    }
}

encodeURIComponent()方法

GET请求经常发生查询字符串格式引发的错误；

可以对查询字符串中每个参数的名称和值用encdoeURIComponent()进行编码；

function buildParamsStr(paramsObj){
    var str = "";
    for (key in paramsObj) {
        // 排除原型中属性
        if (dataObj.hasOwnProperty(key)) {
            // 对查询字符串中每个参数名称和值用encdoeURIComponent()进行编码
            str += "&" + encodeURIComponent(key) + "=" + encodeURIComponent(paramsObj[key]);
        }
    }
    return str.slice(1);
}

function addURLParams(url, paramsStr) {
    url += (url.indexOf("?") === -1) ? "?" : "&";
    url += paramsStr + "&" + new Date().getTime();
    return url;
}

调用示例

window.onload = function(){
    var btn = document.getElementById("btn1");
    btn.onclick = function(){
        ajax("get", "a.txt", function fnSucc(str){
            alert(str)
        });
    }
}

GPU云服务器云服务器 ajax原生js实现原生js实现ajax 原生js封装ajax 原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96078.html

原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

newsning 2019-08-02 15:56 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

hiyang 2019-08-30 13:08 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

Travis 2019-08-20 12:33 评论0 收藏0
原生js实现ajax及get post方法

摘要：使用过的同学，应该对事件绑定方法有一定的了解。实现方式以下为个人类库中实现方式。代码中使用到一个基础方法对象，该对象为的基础类。如果想了解更多，可以通过点击进入查看原码。使用过jQuery的同学，应该对事件绑定方法ajax有一定的了解。在个人类库jTool 中实现了这个方法，这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Ajax 实现方式。代码中使用到一个基...

pkhope 2019-08-26 13:54 评论0 收藏0