ajax封装

scwang90 发布于2019-08-26 13:45 / 539人阅读

摘要：是什么是在不用刷新页面的情况下，通过中的对象，从服务器获取数据，对网页内容进行更新的技术。

ajax是什么

ajax是在不用刷新页面的情况下，通过js中的XMLHttpRequest对象，从服务器获取数据，对网页内容进行更新的技术。

封装方法

function ajax(params){

申明一些必要的参数，比如成功后的回调函数、错误处理、url、data、type(http method)，并且作兜底处理

 const{
   success = () => {},
   error = () => {},
   type = "get",
   data = {},
   url = "/"
} = params;

过程

创建异步请求对象

   const xhr =  new XMLHttpRequest()

注册xhr发送接收请求时的回调，并且在服务器返回结果后，调用success或者error函数

    xhr.onreadystatechange=function(){
      if(xhr.readyState===4){
        if(xhr.state===200){
          success(JSON.parse(xhr.responseText))
        }else{
          error(xhr.state,xhr.responseText)
        }
      }
    }

let sendParams = "";
Object.keys(data).map((key) => {//Object.keys(对象)，得到一个由对象里的属性名组成的数组  
    sendParams += `${key}=${data[key]}&`
});

判断type

如果是get，参数就挂在url上，(url?sendParams),send空

如果是其他type，参数就放在send中传递，send(sendParams)，但需要在open和send之间先设置请求头信息

  if(type==="get"){
    xhr.open(type,`${url}?${sendParams}`,true)
    xhr.send()
  }else{
    xhr.open(type,url,true)
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(sendParams);
    }
}

调用实例

    ajax({
        url: "/code/1",
        type: "POST",
        data: {
            id: "id",
            name: "name"
        },
        success(result) {
            // do something
        },
        error(error1, error2) {
            // do something
        }
    })

服务器托管云服务器一个封装的Ajax类原生js封装ajax js ajax 请求数据封装封装成

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

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

回调、使用Promise封装ajax()、Promise入门

摘要：回调使用封装入门回调是啥看这里回调是什么方应杭知乎是一种特殊的函数，这个函数被作为参数传给另一个函数去调用。回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a functioncall a function back callback 看这里:Callback（回调）是什么？---方应杭知乎 callback 是一种特殊的函数，这个函数被作为参数...

godlong_X 2019-08-23 10:50 评论0 收藏0
二次封装 query ajax 办法

摘要：本次二次封装，参考可以添加中间件处理数据，返回对象，减少回调，写更加简洁优雅。痛点但是在项目中使用它还是有一些痛点的就是现在基本所有项目的返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。前言在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaque...

zr_hebo 2019-08-20 17:44 评论0 收藏0
原生JS封装ajax以及request

摘要：一封装原生的为类以及用法见之前的文章根据确定请求的头部以及别的信息。二封装实用性的类在项目中经常需要将进行封装，使用类发起请求。请求不带请求带请求不带请求带请求不带请求带这个方法感觉可以再次进行封装。完整代码点击查看以上。一、封装原生的xhr为ajax类 xhr以及用法见之前的文章 1、根据url确定请求的头部以及别的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 评论0 收藏0
jquery ajax 方法封装说明

摘要：简要说明前面我写了一篇方法封装及文件设计文档，主要用来说明我们在项目中通常会对的方法进行进一步的封装处理，便于我们在业务代码中使用。这篇文档我们主要对封装的方法进行一个简要说明。简要说明前面我写了一篇《jquery ajax 方法封装及 api 文件设计》文档，主要用来说明我们在项目中通常会对 jquery 的 ajax 方法进行进一步的封装处理，便于我们在业务代码中使用。从那篇文...

z2xy 2019-08-23 16:26 评论0 收藏0
jquery ajax 方法封装及 api 文件设计

摘要：封装文件封装例如命令数据用来记录每次请求的唯一标识唯一标识生成方法模块主体获取失败比对请求保证返回结果的正确性重复请求有可能会带来返回结果不可靠的问题的默认设置服务器已经错误将大于的数字位以上包裹双引号避免溢出这里是根据后台封装 jquery ajax 文件 /** * 封装 jquery ajax * 例如: * ajaxRequest.ajax.triggerServic...

leone 2019-08-23 16:26 评论0 收藏0
ajax封装和跨域知识

摘要：封装和跨域知识使用还是是通过参数传递到当前脚本的变量数组。对所发送信息的数量也有限制。请求成功时触发，。允许一个域上的网络应用向另一个域提交跨域请求。 ajax封装和跨域知识 ajax 使用get还是post $_GET 是通过 URL 参数传递到当前脚本的变量数组。 $_POST 是通过 HTTP POST 传递到当前脚本的变量数组。何时使用 GET？通过 GET 方法从表单...

Shihira 2019-08-19 18:14 评论0 收藏0