最近在复习ajax的知识,练习了下ajax的封装,此处做下笔记

废话不多说,直接代码

//发请求
//此处的url为请求地址,type为请求方式,success为请求成功的回调函数
myaxios({
url: 'http://127.0.0.1:8080/doRegister',
type: 'post',
data: {
userName: '狗子',
password: '12323',
phone: '12154545',
},
success:function(res) {
console.log(res)
}
}) function myaxios(config={}) { //将值以一个兑现的方式传入
const {
url,
type,
data,
success
} = config
let xhr = new XMLHttpRequest();
//由于get方法与post方法数据请求的方式不同,需要做下处理
let arr = []
if (type.toLowerCase === 'get') {
for (let key in data) {
arr.push(`${key}=${data[key]}`)
}
//需要装化为 键=值&键=值的方式
url = url + '?' + arr.join('&')
} xhr.open(type, url);
//请求方式若为post
if (type.toLowerCase === 'post') {
for (let key in data) {
arr.push(`${key}=${data[key]}`)
}
//设置请球头,使其以键值对的方式传输数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 然后发送请求
xhr.send(data);
} else {
xhr.send();
}
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
//console.log(xhr.responseText)
if (xhr.getResponseHeader('Content-Type').indexOf('json') !== -1) {
// 证明 content-type 这个响应头里面包含 json ,证明返回的就是json格式字符串
response = JSON.parse(xhr.responseText);
success(response) } }
}
}

ajax的封装——jq简化版的更多相关文章

  1. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  2. AJAX(JS&&JQ&&H5)

    一 AJAX的简介: AJAX是"Asynchronous Javascript And XML"(异步JavaScript和XML),通过后台与服务器实现少量的数据交换,可以使页 ...

  3. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  4. Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  5. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  6. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  7. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  8. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  9. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

随机推荐

  1. 使用Properties配置文件进行配置读取

    #使用Properties配置文件进行配置读取: 例如:有一个配置文件的内容如下: # setting.properties last_open_file=/data/hello.txt auto_s ...

  2. 并查集(不相交集)的Union操作

    在并查集(不相交集)中附加操作\(Deunion\),它实现的功能是取消最后一次\(Union\)的操作. 实现思想 初始化一个空栈,将每一次的\(Union\)操作的两个集合的根和其值\(Push\ ...

  3. file_put_contents生成ansi文件

    $line_body = array('张三','李四','王五'); $line_body = array_map(function ($element){return iconv('UTF-8', ...

  4. webpack基础配置(一)

    第一次写博客,有点小小的兴奋,也有一点点的慌张--- 我是一个小白,仅记录自己的学习过程,内容仅供参考,如果有问题的地方,还希望各位大牛多多指教,我菜,菜是原罪,但是我可以学-- 1.最基本的:如何使 ...

  5. 关于vue-cli3打包时遇到Cannot assign to read only property 'exports' of object '#<Object>'问题的解决方法。

    vue-cli3打包时遇到Cannot assign to read only property 'exports' of object '#<Object>'问题的解决方法. 大致是说, ...

  6. 10个机器学习人工智能开发框架和AI库(优缺点对比表)/贪心学院

    概述 通过本文我们来一起看一些用于人工智能的高质量AI库,它们的优点和缺点,以及它们的一些特点. 人工智能(AI)已经存在很长时间了.然而,由于这一领域的巨大进步,近年来它已成为一个流行语.人工智能曾 ...

  7. optimizing Wi-Fi solution for International School

    https://aweisoft.azurewebsites.net/Knowledge/Cisco/OptimizeWiFi/OptimizeWiFi.aspx Connect me on Link ...

  8. 去除 inline-block 元素间距

    案例重现 布局时经常能发现inline元素和inline-block元素水平呈现的元素间,会存在着一些意想不到的间距,举例: .inline-block { display: inline-block ...

  9. Spark入门(六)--Spark的combineByKey、sortBykey

    spark的combineByKey combineByKey的特点 combineByKey的强大之处,在于提供了三个函数操作来操作一个函数.第一个函数,是对元数据处理,从而获得一个键值对.第二个函 ...

  10. Uiautomator1.0与Uiautomator2.0测试项目搭建与运行原理

    Uiautomator是Android原生测试框架,可以用于白盒接口测试也可以用于UI自动化测试,Uiautomator分1.0版本与2.0版本,它们都是基于UiAutomation的测试框架,都是通 ...