原生js实现ajax的封装

更新日期: 2019-10-10阅读: 2.2k标签: 封装

1. ajax的介绍

1.1 含义

ajax 的全称是Asynchronous JavaScript and XML
简单理解下:ajax就是异步的js和服务端的数据

1.2 组成

异步的js:事件,对象等
其他js:数据处理和解析的js
服务器的载体:xhr对象
服务端的数据:json,xhr,html,txt等字符型数据

1.3 作用

它作为前端向后端发送数据请求的重要手段,可以实现网页无刷新加载数据.

1.4 利弊

与传统的form表单的get和post方式相比较,ajax的优点很明显

优点:1.提升加载速度,实现局部加载
     2.节省性能,能很好提升用户体验

当然,事物都是相对的,缺点如下

缺点:1.破坏了浏览器的前进后退功能
     2.破坏了seo的网络优化


2. ajax的书写

2.1.1 ajax的GET请求方式

GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.xhr的发送方式:get  
xhr.open("GET", url, true)
//参数1:请求方式
//参数2:url是后端文件所在服务器的位置
//参数3:异步true;同步false
//3.监听xhr对象的状态
xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //客户端状态码为4:响应内容解析完成,可以调用
            //服务端的状态码为200:交易成功
            console.log(xhr.responseTxt)
            //返回响应信息
        }
        //4.发送信息
        xhr.send();

2.1.2 小bug

以上是最基本的ajax代码,有两处小bug, 在封装过程中会解决

bug1:传的参数为空时,会报错
bug2:浏览器的缓存干扰使得数据无法刷新

2.1.3 ajax的Get方式封装

//接收三个参数:后端文件地址,回调函数和数据(对象格式)
function ajaxGet(url, callback, data) {
    //1.解析发送的数据
    data = data || {};
    //修复bug1:参数为空变为空对象
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
        //拼接get的数据格式
    }
    //2.拼接url
    var d = new Date();
    url = url + "?" + str + "__sjc=" + d.getTime();
    //修复bug2:拼接一个不会重复的时间戳,欺骗缓存;
    //时间戳的命名应该尽量复杂,防止后端读取到.
    //3. 准备ajax
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

2.2.1 ajax的POST请求方式

ajax的POST和GET的结构大体相同,但有以下三点区别

区别1:post发送数据位置是send()内,而不是拼接在url后
区别2:open的请求方式变为POST
区别3:send会原样发送数据,为确保后端能识别,必须设置数据格式为表单格式

2.2.1 ajax的POST方式封装

function ajaxPost(url, callback, data) {
    data = data || {};
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
    }
    //不必拼接时间戳
    var xhr = new XMLHttpRequest();
    //区别2
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    //区别3:发送前设置数据格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //区别1:数据发送在send内
    xhr.send(str);
}

链接: https://www.fly63.com/article/detial/6184

原生js实现ajax请求封装,类似于jquery的操作

ajax可以实现不阻塞用户,达到无刷新更新部分页面的效果,它的异步请求都会首先考虑的是jquery,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?

通过2行js代码实现DOM属性的封装以及交换两个变量的值

JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。

浅谈Vue v-model实现原理,如何封装,以及封装方法

vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)

如何去设计一个组件封装_前端组件化设计思路

目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。

fetch请求二次封装

JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

微信和支付宝中的一些常用方法封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西

JS防抖函数、节流函数工具类封装

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!