JavaScript实现Ajax

binta 发布于2019-08-26 10:31 / 1092人阅读

摘要：用于从网络上获取数据，有了对象，就可以实现页面的无刷新请求数据，就可以做到一个局部的更新，也可以获取多种类型的数据文件。这篇文章主要是分享了中对象的基本属性和方法从实例化初始化发送和接受四个阶段完成了网络请求核心内容封装。

1：基本概念

jQuery的Ajax请求实际上是封装的一个XHLHttpRequest，从字面意思来看是，XML是一种文件格式，Http是一个网络请求，Request最开始是用于请求XML文件的，后来不断扩展可以请求多种类型的文件。

XHLHttpRequest，网络请求模块，或者是一个浏览器网络线程。用于从URL网络上获取数据，有了对象，就可以实现页面的无刷新请求数据，就可以做到一个局部的更新，也可以获取多种类型的数据(ftp、文件)。

2：要实现和使用XMLHttpRequest

它是一个对象，首先我们需要实例化，定义一个：

    var xhr = new XMLHttpRequest();

3：初始化请求，给定一些必要的配置，给它一些property

    //Ajax请求时的参数设置
    method          请求方式
    url             请求地址
    async           是否异步
    user            用户名
    password        密码
    
    xhr.open(method,url,async,user,password);

4：发送请求(encodeURLComponent)

    xhr.send(data);
    等待接收

5：接收网络请求返回

一般有如下属性：

responseText，请求返回的数据内容，可以是一段文本，是一段二进制或者是一个json

responseXML，是一个文件，如果响应头内容是text/xml，这个属性将保留响应数据的XML、DOM文档。

status，响应的HTTP状态，如 200(正常，200-300之间都表示成功) 304(使用缓存) 404(没找到) 500(服务器内部错误)等

statusText，HTTP状态说明

readyStatus，请求/响应过程的当前活动阶段，一共有5个值：0(未被调用open)，1(已被调用open但未发送)，2(已调用send)，3(已接收到请求返回的数据)，4(请求已完成)。

timeout，设置请求超时时间

    xhr.onreadystatechange = () => {
        if (xhr.readyStatus === 4) {
            /* HTTP 状态在 200-300 之间表示请求成功 */
            /* HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取 */
            if (xhr.status >= 200 &&
                xhr.status < 300 ||
                xhr.status == 304) {
                console.log("请求成功", xhr.responseText)
            }
        }
    }

6：封装(promise)

    function ajax (options) {
        /* 获取请求地址 */
        let url = options.url;
        /* 获取请求方法 */
        const method = options.method.toLocaleLowerCase() || "get";
        /* 默认异步 */
        const async = options.async != false;
        /* 获取请求request数据 */
        const data = options.data;
        /* 实例化XMLHttpRequest */
        const xhr = new XMLHttpRequest();
        /* 设置超时时间 */
        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }
    
        return new Promise ( (resolve, reject) => {
            /* 添加超时回调 */
            xhr.ontimeout = () => reject && reject("请求超时");
            /* 成功回调 */
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText);
                    } else {
                        reject && reject();
                    }
                }
            }
    
            /* 失败回调 */
            xhr.onerror = err => reject && reject(err);
    
            /* 拼接参数 */
            let paramArr = [];
            let encodeData;
            if (data instanceof Object) {
                for (let key in data) {
                    paramArr.push( encodeURIComponent(key) + "=" + encodeURIComponent(data[key]) );
                }
                encodeData = paramArr.join("&");
            }
    
            /* get请求 */
            if (method === "get") {
                const index = url.indexOf("?")
                if (index === -1) url += "?"
                else if (index !== url.length -1) url += "&"
                url += encodeData
            }
    
            /* 初始化请求 */
            xhr.open(method, url, async);
    
            /* get直接发送拼接的URL */
            if (method === "get") xhr.send(null);
    
            if (method === "post") {
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8")
                xhr.send(encodeData)
            }
        })
    }

总结：
关于网络请求，一般常用的有四种：

一个是get，获取网络资源

然后是post，一般用于提交数据，提交数据的参数是放在请求的body里面的

delete，删除

put，标准的一个修改

关于Http的简单请求和非简单请求或者是跨域，在跨域时由于浏览器的安全机制，涉及到一个问题关于在Ajax请求，是在请求之后还是请求之前判断跨域，这时候就需要了解一下简单请求和复杂请求。

简单请求是先把资源请求回来，然后再去判断是否跨域。如果是一个复杂请求，浏览器会先去发送一个嗅探或者是欲请求（一般是一个option），先判断是否跨域，如果不是跨域那就执行，如果是跨域那就直接不请求了。一般来讲，如果get不修改它的Content-Type，那么基本上都是简单请求。post如果采用www-form的形式，也是一个简单请求。

这篇文章主要是分享了Javascript中XMLHttpRequest对象的基本属性和方法, 从实例化、初始化、发送和接受四个阶段完成了Ajax网络请求核心内容封装。

云服务器 GPU云服务器 javascript+ajax Ajax实现机制 get实现ajax ajax实现百度搜索

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

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

异步 JavaScript 与 Promise

摘要：为这些回调函数分别命名并分离存放可以在形式上减少嵌套，使代码清晰，但仍然不能解决问题。如果在一个结束成功或失败，同前面的说明后，添加针对成功或失败的回调，则回调函数会立即执行。异步？我在很多地方都看到过异步(Asynchronous)这个词，但在我还不是很理解这个概念的时候，却发现自己常常会被当做已经很清楚(*￣ﾛ￣)。如果你也有类似的情况，没关系，搜索一下这个词，就可以得到大致...

livem 2019-08-21 10:26 评论0 收藏0
原生javaScript实现Ajax 和 jQuery实现Ajax

摘要：作者后台使用的是语言，所以这里以后台为例子不影响学习一原生使用方法创建对象兼容处理处理低版本不兼容问题准备发送请求方式接口参数名参数值异步执行发送回调是表示数据解析完成，后台处理完成了。是表示处理的结果是的。作者后台使用的是php语言，所以这里以php后台Api为例子,不影响学习Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.创建对象兼容处理 var ...

ssshooter 2019-08-23 17:03 评论0 收藏0
原生JavaScript实现AJAX、JSONP

摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript...

xcc3641 2019-08-20 14:06 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
Python3网络爬虫实战---35、 Ajax数据爬取

摘要：所以说，我们所看到的微博页面的真实数据并不是最原始的页面返回的，而是后来执行后再次向后台发送了请求，拿到数据后再进一步渲染出来的。结果提取仍然是拿微博为例，我们接下来用来模拟这些请求，把马云发过的微博爬取下来。上一篇文章：Python3网络爬虫实战---34、数据存储：非关系型数据库存储:Redis下一篇文章：Python3网络爬虫实战---36、分析Ajax爬取今日头条街拍美图 ...

Thanatos 2019-07-31 10:36 评论0 收藏0