最近在复习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. HTML与CSS 开发常用语义化命名

    一.布局❤️ header 头部/页眉:index 首页/索引:logo 标志:nav/sub_nav 导航/子导航:banner 横幅广告:main/content 主体/内容:container/ ...

  2. centOS 6.5 yum升级 gcc4.8 然后又退回来4.4

    CentOS 6.5 用了很多年了,一直舍不得省7 . 由于要用到 c++ 11 ,所以决定升级一下. 为了省事我选择用 yum 方式升级,结果最后还是不能用,差点搞坏,这是真机,重装麻烦了. get ...

  3. 项目测试中发现产品bug怎么办

    我所在的产品线,并非公司最大最强的产品 甚至为了推广我们这个产品,一般会拿给客户先免费试用 而在试用之前,是要经过一番通测的,测得很急,测得很快 所以产品bug非常多 那么在测试项目的时候,自然会发现 ...

  4. iNeuOS工业互联平台,开放设备驱动管理、服务驱动管理、云组态自定义画布等,促进平台开放、赋能和落地。发布:v2.3版本。

    目       录 1.      概述... 2 2.      iNeuOS平台演示... 2 3.      设备驱动管理... 2 4.      服务驱动管理... 3 5.      云组 ...

  5. 解决Ajax中IE浏览器缓存问题

    解决Ajax中IE浏览器缓存问题 1.首先,先看一张图.从这张图中我们可以清楚的了解到从请求的发出到解析响应的过程. 2.根据图中的三个节点我们可以使用三种方式解决这个缓存问题(主要是针对ie) 2. ...

  6. 使用twisted将mysql插入变成异步执行

    python 异步MySQL存库   对于异步框架而言,这些延迟是无法接受的.因此, Twisted 提供了 twisted.enterprise.adbapi, 遵循DB-API 2.0协议的一个异 ...

  7. Python实现对excel的操作

    1.操作excel使用第三方库openpyxl安装:pip install openpyxy引入:import openpyxl2.常用简单操作1)打开excel文件获取工作簿wb = openpyx ...

  8. ajax 瀑布流 demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. synchronized实现原理及其优化-(自旋锁,偏向锁,轻量锁,重量锁)

    1.synchronized概述: synchronized修饰的方法或代码块相当于并发中的临界区,即在同一时刻jvm只允许一个线程进入执行.synchronized是通过锁机制实现同一时刻只允许一个 ...

  10. 【JAVA进阶架构师指南】之三:深入了解类加载机制

    前言   在上一篇文章中,我们知道了JVM的内存划分,其中在说到方法区的时候说到方法区中存放的信息包括[已被JVM加载的类信息,常量,静态变量,即时编译的代码等],整个方法区其实就和类加载有关. 类加 ...