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动态添加option和删除option(附实例代码)
Apr 01 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php数组使用规则分析
2015/02/27 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
css配合jquery美化 select
2013/11/29 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python itertools模块详解
2015/05/09 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python如何在bool函数中取值
2020/09/21 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
灵泰克Java笔试题
2016/01/09 面试题
商务英语本科生的自我评价分享
2013/11/15 职场文书
图书室标语
2014/06/21 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
80后婚前协议书范本
2014/10/24 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏