最近在复习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. Arthas 实战,助你解决同名类依赖冲突问题

    上篇文章中,小黑哥分析 Maven 依赖冲突分为两类: 项目同一依赖应用,存在多版本,每个版本同一个类,可能存在差异. 项目不同依赖应用,存在包名,类名完全一样的类. 第二种情况,往往是这个场景,本地 ...

  2. Linux-基本操作(登入登出,图形化界面,命令行界面)

    命令行界面登录 (1)命令行登录界面 安装好Centos后,系统启动默认进入的是图形化界面,可以通过如下命令修改进入命令行界面: 命令行登录:systemctl  set-default  multi ...

  3. 图解MySQL索引(上)—MySQL有中“8种”索引?

    关于MySQL索引相关的内容,一直是一个让人头疼的问题,尤其是对于初学者来说.笔者曾在很长一段时间内深陷其中,无法分清"覆盖索引,辅助索引,唯一索引,Hash索引,B-Tree索引--&qu ...

  4. Vue请求第三方接口跨域最终解决办法!2020最终版!

    废话少说,再百度的近三个小时尝试了近10种方法无解后,终于皇天不负有心人! 这个vue axios 跨域问题被我解决了! 需求:请求客户端ip地址获取客户ip,再根据ip获取用户位置 工具:Vue,a ...

  5. 如何给女朋友讲SSM和springBoot的区别?(简单描述一下)

  6. day07深浅copy与流程控制

    目录:流程控制 0:补充(了解) 短路运算:偷懒原则,偷懒到哪个位置,就把当前位置的值返回 深浅copy 1.循环之while循环 循环的语法与基本使用 死循环与效率问题 循环的应用 退出循环的两种方 ...

  7. MySQL 【优化宝典】

    概述 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计数据库 ...

  8. 环境变量之classpath配置和临时配置

    前言 本篇文章介绍classpath环境变量的配置和一个环境变量配置的技巧:临时配置path环境变量. 正文 classpath环境变量配置 在上完了"Hello World"这堂 ...

  9. 移动端Rem适配(基于vue-cli3 ,ui框架用的是vant-ui)

    介绍postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值 1.安装lib-flexible(用于设置 rem 基准值 ...

  10. 在Centos系统中基于PowerDNS实现master和slave的域名解析服务双备份

    在上一篇文章中,阐述了如何在Centos 7系统(其他版本的Centos未尝试)中基于PowerDNS和poweradmin自建域名解析服务器替代DnsPod的过程.但是在一般的DNS服务中,我们需要 ...