js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
function ajax(obj){
// 默认参数
var defaults = {
type : 'get',
data : {},
url : '#',
dataType : 'text',
async : true,
success : function(data){console.log(data)}
}
// 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数
for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新
defaults[key] = obj[key];
}
// 1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本
}
// 把对象形式的参数转化为字符串形式的参数
/* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */
var param = '';
for(var attr in obj.data){
param += attr + '=' + obj.data[attr] + '&';
}
if(param){//substring(start, end)截取字符串去掉最后的&符号
param = param.substring(0,param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if(defaults.type == 'get'){
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送(设置发送的参数)
xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息(必须设置)
var data = null;
if(defaults.type == 'post'){
data = param;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//post模式下必须加的请求头,这个请求头是告诉服务器怎么去解析请求的正文部分。
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求,不会调用回调函数
if(!defaults.async){
if(defaults.dataType == 'json'){
return JSON.parse(xhr.responseText);
}else{
return xhr.responseText;
}
}
// 4、指定回调函数(处理服务器响应数据)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//4 获取数据成功
if(xhr.status == 200){
//200 获取的数据格式正确
var data = xhr.responseText;
if(defaults.dataType == 'json'){
// data = eval("("+ data +")");
data = JSON.parse(data);
//JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用
}
defaults.success(data);//回调函数
}
}
}
}
js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装的更多相关文章
- jQuery实例—选项卡(js源码和jQuery)【一些常见方法(1)-练习】
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- Jquery.cookie.js 源码和使用方法
jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- Ajax学习(二):模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...
- 耗子大叔弹窗来自百度搜索引擎导流的弹窗JS源码赏析
刚看到https://coolshell.cn/articles/9308.html 耗子大叔评价梁斌站点被百度封杀事件言论 然后在自己个人网站酷壳网站上发布了一段JS代码 当请求来自百度导流过来 ...
- 深入理解unslider.js源码
最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
- Underscore.js 源码学习笔记(下)
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- underscore.js源码研究(7)
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
随机推荐
- nodejs cluster 学习记录
最近在使用 egg.js ,这个框架提供多进程管理机制 我们知道 JavaScript 代码是运行在单线程上的,换句话说一个 Node.js 进程只能运行在一个 CPU 上.如何榨干服务器资源,利用上 ...
- linux命令学习笔记(61):tree 命令
shendu@shenlan:~$ tree 程序“tree”尚未安装. 您可以使用以下命令安装: sudo apt-get install tree shendu@shenlan:~$ sudo a ...
- Java进阶06 容器
Java中有一些对象被称为容器(container).容器中可以包含多个对象,每个对象称为容器中的一个元素.容器是用对象封装的数据结构(data structure). 充满梦想的容器 不同的数据结构 ...
- 【遍历二叉树】12往二叉树中添加层次链表的信息【Populating Next Right Pointers in Each Node II】
本质上是二叉树的层次遍历,遍历层次的过程当中把next指针加上去. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- [原]NYOJ-A*B Problem II-623
大学生程序代写 A*B Problem II 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 ACM的C++同学有好多作业要做,最头痛莫过于线性代数了,因为每次做到矩阵相 ...
- oracle 12c 多租户 pdb 恢复(单个pdb数据文件、非系统pdb表空间、整个pdb数据库)
环境:数据库版本 Oracle Database 12c Enterprise Edition Release 12.2.0.1.0 - 64bit Production 实验准备:1.-- 数据库归 ...
- Operating System-Thread(4) 线程的调度激活机制(Scheduler Activations)
本文主要介绍线程的调度激活机制(Scheduler Activations),主要内容: 调度激活机制简介 上行调用(upcall) 中断处理(Interrupt) 一. 调度激活机制简介 上一篇文章 ...
- BZOJ1217:[HNOI2003]消防局的设立
我对贪心的理解:https://www.cnblogs.com/AKMer/p/9776293.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...
- 洛谷【P2005】A/B Problem II
题目传送门:https://www.luogu.org/problemnew/show/P2005 高精除低精:https://www.cnblogs.com/AKMer/p/9724556.html ...
- 洛谷【P1142】轰炸
我对状态空间的理解:https://www.cnblogs.com/AKMer/p/9622590.html 题目传送门:https://www.luogu.org/problemnew/show/P ...