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 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 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面试题(对属性或方法的访问控制)
2012/09/13 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
JavaScript this 深入理解
2009/07/30 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python动态参数用法实例分析
2015/05/25 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
保管员岗位职责
2015/02/14 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
大学运动会加油稿
2015/07/22 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL