Ajax的封装。
封装 Ajax
因为Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用GET 还是POST；到
底是使用同步还是异步等等，我们需要封装一个Ajax 函数，来方便我们调用。
封装支持接收来自服务端的数据，不可以发送数据到服务端
/**
* 此封装只支持接收来自服务端的数据，不可以发送数据到服务端
*/
function ajax(obj) {
var xhr = new XMLHttpRequest();
obj.url = obj.url + '?rand=' + Math.random();
xhr.open(obj.method, obj.url, obj.async);
xhr.send(null);
if (obj.async === false) {
callback();
}
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
function callback () {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调
} else {
alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
}
}
}
把上面的代码封装在ajax2.js中，在页面上引入该文件。
<!DOCTYPE html>
<html>
<head>
<title>Ajax的封装</title>
<meta charset="utf-8">
<script src="ajax2.js"></script>
</head>
<body>
<button id="btn">调用Ajax</button>
<script>
document.getElementById("btn").onclick=function(){
ajax({
method : 'get',
url : 'http://localhost:3000/api/2',
success : function (text) {
alert(text);
},
async :false
});
};
</script>
</body>
</html>
7.2 封装支持接收来自服务端的数据，又可以发送数据到服务端
function ajax(obj) {
var xhr = new XMLHttpRequest();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get') {
obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
}
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback () {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调
} else {
alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
}
}
}
//名值对编码
function params(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
希望能够帮到你！
Ajax的封装。的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- Ajax入门（二）Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- JQ中的Ajax的封装
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- Ajax的封装，以及利用jquery的ajax获取天气预报
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
随机推荐
- python常量 （最全常量解析）
常量 一.常量 变量是变化的量,常量则是不变的量.python中没有使用语法强制定义常量,也就是说,python中定义常量本质上就是变量.如果非要定义常量,变量名必须全大写. AGE_OF_NICK ...
- Scrapy 教程(八)-分布式爬虫
scrapy 本身并不是一个分布式框架,而 Scrapy-redis 库使得分布式成为可能: Scrapy-redis 并没有重构框架,而是基于redis数据库重写了框架的某些组件. 分布式框架要解决 ...
- HNUSTOJ-1437 无题
1437: 无题 时间限制: 1 Sec 内存限制: 128 MB提交: 268 解决: 45[提交][状态][讨论版] 题目描述 tc在玩一个很无聊的游戏:每一次电脑都会给一个长度不超过10^5 ...
- bzoj4103 [Thu Summer Camp 2015]异或运算（可持久化trie）
内存限制:512 MiB 时间限制:1000 ms 题目描述 给定长度为n的数列X={x1,x2,...,xn}和长度为m的数列Y={y1,y2,...,ym},令矩阵A中第i行第j列的值Aij=xi ...
- 关于使用iframe的父子页面进行简单的相互传值
当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢 ...
- SQL SERVER 索引维护
-- 全数据库索引重建 DECLARE @name varchar(100)DECLARE authors_cursor CURSOR FOR Select [name] from sysobject ...
- PAT Basic 1026 程序运行时间 (15 分)
要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间.这个时间单位是 clock ...
- 图像描点标注-labelme的安装及使用
1.直接使用pip安装lebelme pip install labelme 2.labelme的使用 找到labelme的安装路径,先找到python的安装路径如我的,C:\Users\Think\ ...
- Linux 正在尝试其他镜像
Linux 正在尝试其他镜像 发生情景: 在windows7系统,安装了虚拟机Oracle VM VirtualBox,使用的CentOS7, 在使用yum的使用,一直提醒"正在尝试其他镜 ...
- Linux虚拟机网络设置问题
使用的是VM 工作站15 和以前的不一样 没有什么虚拟机网络设置 :打开Edit->Virtual NetWork editor, 选中VMnet8,然后点击NAT Setting按钮,再点击D ...