jQuery ajax(复习)—Baidu ajax request分离版


Posted in Javascript onJanuary 24, 2013

你没有看错标题,本文的确是在讲Baidu ajax,不过是很久很久以前的版本了。
由于jQuery ajax模块有800+行,而核心函数jQuery.ajax就有380+行,直接分析这段代码很容易被代码逻辑弄晕。

所以我们先分析一段简单的ajax代码,来自早期的百度七巧板项目。
通过这个来先复习一遍ajax的知识。

baidu.ajax.request分离版

/** 
* 发送一个ajax请求 
* @author: allstar, erik, berg 
* @name ajax.request 
* @function 
* @grammar ajax.request(url[, options]) 
* @param {string} url 发送请求的url 
* @param {Object} options 发送请求的选项参数 
* @config {String} [method] 请求发送的类型。默认为GET 
* @config {Boolean} [async] 是否异步请求。默认为true(异步) 
* @config {String} [data] 需要发送的数据。如果是GET请求的话,不需要这个属性 
* @config {Object} [headers] 要设置的http request header 
* @config {number} [timeout] 超时时间,单位ms 
* @config {String} [username] 用户名 
* @config {String} [password] 密码 
* @config {Function} [onsuccess] 请求成功时触发,function(XMLHttpRequest xhr, string responseText)。 
* @config {Function} [onfailure] 请求失败时触发,function(XMLHttpRequest xhr)。 
* @config {Function} [onbeforerequest] 发送请求之前触发,function(XMLHttpRequest xhr)。 
* 
* @meta standard 
* @see ajax.get,ajax.post 
* 
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象 
*/ 
var ajax = {}; 
ajax.request = function(url,options,type){ 
// 是否需要异步 
var async = options.async||true, 
// 用户名、密码 
username = options.username||"", 
password = options.password||"", 
// 需要传输的数据 
data = options.data||"", 
// GET还是POST 
method = (options.method||"GET").toUpperCase(), 
// 请求头 
headers = options.headers||{}, 
// 事件处理函数表 
eventHandler = {}, 
// 请求数据类型 
dataType = type||"string";//xml||string 
function stateChangeHandler(){ 
// 看看是否已经准备好了 
if(xhr.readyState == 4){ 
// 得到xhr当前状态 
var sta = xhr.status; 
// 判断是否成功 
if(sta == 200||sta == 304){ 
// 成功则触发成功 
fire("success"); 
}else{ 
// 失败则触发失败 
fire("failure"); 
} 
// 清除绑定 
window.setTimeout(function(){ 
xhr.onreadystatechange= new Function(); 
if (async){ 
xhr = null; 
} 
},0); 
} 
} 
function fire(type){ 
// 把type变成ontype 
type = "on"+type; 
// 在事件处理器表中找到对应事件的处理函数 
var handler = eventHandler[type]; 
// 如果函数存在,则 
if(handler){ 
// 不成功的话 
if(type != "onsuccess"){ 
handler(xhr); 
// 成功了 
}else{ 
// 则根据dataType返回不同的数据 
handler(xhr,dataType!="xml"?xhr.responseText:xhr.responseXML); 
} 
} 
} 
// 组装eventHandler 
for(var key in options){ 
eventHandler[key] = options[key]; 
} 
// 新建一个XMLHttpRequest对象 
var xhr = new XMLHttpRequest(); 
// 如果方法是GET,则把数据组装到url中 
if(method == "GET"){ 
url += (url.indexOf("?")>=0)?"&":"?"; 
url += data; 
// 清空data 
data = null; 
} 
// 如果是异步 
if (async){ 
// 绑定readystatechange的处理器 
xhr.onreadystatechange = stateChangeHandler; 
} 
// 看看是否需要输入密码 
if(username){ 
xhr.open(method,url,async,username,passowrd); 
}else{ 
xhr.open(method,url,async); 
} 
// 如果是POST 
if(method == "POST"){ 
// 设置一下请求头 
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
} 
// 把options中的请求头信息全部设置进去 
for(var key in headers){ 
xhr.setRequestHeader(name,headers[key]) 
} 
// 触发事件beforerequest 
fire("beforerequest"); 
// 发送数据 
xhr.send(data); 
// 如果不是异步 
if (!async){ 
// 则直接运行stateChangeHandler来处理数据 
stateChangeHandler(); 
} 
return xhr; 
}

这段代码还是比较容易理解的
•通过XMLHttpRequest()新建一个XMLHttpRequest对象。
•看看是GET,还是POST方式,如果是GET则组装url,如果是POST,设置一下请求头。
•看看是不是异步,如果是则注册监听函数stateChangeHandler。
•看看需不需要用户名和密码,执行open。
•发送请求。
•等待监听函数处理事件。
baidu.ajax.get & baidu.ajax.post
/** 
* 发送一个post请求 
* @name ajax.post 
* @function 
* @grammar ajax.post(url, data[, onsuccess]) 
* @param {string} url 发送请求的url地址 
* @param {string} data 发送的数据 
* @param {Function} [onsuccess] 请求成功之后的回调函数,function(XMLHttpRequest xhr, string responseText) 
* @meta standard 
* @see ajax.get,ajax.request 
* 
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象 
*/ 
ajax.post = function(url,data,onsuccess){ 
return ajax.request(url,{"data":data,"onsuccess":onsuccess,method:"POST"}); 
}

/** 
* 发送一个get请求 
* @name ajax.get 
* @function 
* @grammar ajax.get(url[, onsuccess]) 
* @param {string} url 发送请求的url地址 
* @param {Function} [onsuccess] 请求成功之后的回调函数,function(XMLHttpRequest xhr, string responseText) 
* @meta standard 
* @see ajax.post,ajax.request 
* 
* @returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象 
*/ 
ajax.get = function(url,data,onsuccess){ 
return ajax.request(url,{"data":data,"onsuccess":onsuccess}); 
}

baidu.ajax.get和baidu.ajax.post都是通过baidu.ajax.request扩展的。
Javascript 相关文章推荐
js showModalDialog参数的使用详解
Jan 07 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
Jan 19 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 #Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
You might like
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
使用requests库制作Python爬虫
2018/03/25 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
职务聘任书范文
2014/03/29 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
小学感恩主题班会
2015/08/12 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP