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是强语言还是弱语言,没有一个具体官方的说法 数据类型也就是变量类型,一般编程语言的变量类型可以分成下面两类. 静态类型与动态类型 静态类型语言:一种在编译期间就确定数据类型的语言.大多数静 ...
- redis 教程(一)-基础知识
redis 简介 redis 是高性能的 key-value 数据库,读的速度是110000次/s,写的速度是81000次/s ,它以内存作为主存储 具有以下优点: 1. 支持数据的持久化,将内存中的 ...
- Node.js+webSocket
// 引入WebSocket模块 var ws = require('nodejs-websocket') var PORT = 3030 var server = ws.createServer(f ...
- python中session的使用
- Rust学习笔记2
继续继续... 转眼都开学啦... Building Blocks 2 building blocks里讲了一些关于Log structure storage的东西,这也是用于在硬盘上持久化KvSto ...
- Docker其他操作：查看内部细节、IP、删除容器
1.查看容器内部细节 查看容器运行内部细节,比如可看容器的IP docker inspect mycentos2 2.查看容器IP地址 直接显示IP地址 docker inspect --format ...
- MySQL数据类型和约束条件
一.数据库操作数据的存储引擎 INNODB:支持事务 行锁 外键 查询速度比MYSiam慢 但是保证了数据的安全性 5.1 版本之后 MYSIAM:老版本用 5.1版本之前 搜索速度快 不支持事务 没 ...
- egret 发布ios记录
根据官方文档http://developer.egret.com/cn/github/egret-docs/Native/native/hybrid/hybrid/index.html 将现有的项目发 ...
- AtCoder Beginner Contest 088 D Grid Repainting
Problem statement We have an H×W grid whose squares are painted black or white. The square at the i- ...
- moc_XXXX.o:(.data.rel.ro._ZTI12CalculatorUI[_ZTI12CalculatorUI]+0x10): undefined reference to `typeinfo for QWidget' collect2: error: ld returned 1 exit status make: *** [Makefile:144: myCalculator]
main.cpp:(.text.startup+0x22): undefined reference to `QApplication::QApplication(int&, char**, ...