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这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
随机推荐
- codeforces 515C C. Drazil and Factorial(水题,贪心)
题目链接: C. Drazil and Factorial time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- node.js 安装及配置(hello world)及 node 的包管理器(npm)
下载地址:Download | Node.js,无脑下一步安装即可: 安装时,会自动将 node 可执行文件路径添加进 Path 内,这样进入 cmd 命令行,以查看 node 的安装版本: > ...
- redis学习--String数据类型。
本文摘自:http://www.cnblogs.com/stephen-liu74/archive/2012/03/14/2349815.html 一.概述: 字符串类型是Redis中最为基础的数据存 ...
- bzoj3569 DZY Loves Chinese II & bzoj3237 [AHOI2013] 连通图
给一个无向连通图,多次询问,每次询问给 k 条边,问删除这 k 条边后图的连通性,对于 bzoj3237 可以离线,对于 bzoj3569 强制在线 $n,m,q \leq 500000,k \leq ...
- ACM学习历程—HDU1695 GCD(容斥原理 || 莫比乌斯)
Description Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD(x, y) = ...
- vs code 安装Scala
首先本机要安装scala(官网肿么下不了,CSDN上面下的): 配置scala到环境变量PATH中(Scala的根目录): VS中安装以下扩展: 1. Scala: 2. Sbt: 3. Code R ...
- 孤独地、凄惨地AK
一个\(OIer\)要写多少\(for\) 才能被称为一个\(OIer\) 一位巨佬要爆过多少次零 才能在省选逆袭 手指要多少次掠过键盘 才能安心地休息 \(OI\)啊 我的朋友 在风中\(AK\) ...
- 转载 : 10大H5前端框架
原文作者: http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知 ...
- Python:map()、reduce()、filter()的区别
文章转于:https://blog.csdn.net/goupper1991/article/details/49803355 原文博主:https://blog.csdn.net/goupper19 ...
- java基础知识(2)---语法基础
二:java语法基础: 1,关键字:其实就是某种语言赋予了特殊含义的单词. 保留字:其实就是还没有赋予特殊含义,但是准备日后要使用过的单词. 2,标示符:其实就是在程序中自定义的名词.比如类名,变量名 ...