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 相关文章推荐
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JS高级运动实例分析
Dec 20 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
微信小程序用户授权最佳实践指南
May 08 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 ajax 分页类代码
2008/11/13 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
python中global与nonlocal比较
2014/11/21 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python 中的 else详解
2016/04/23 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
美的官方商城:Midea
2016/09/14 全球购物
王老吉广告词
2014/03/20 职场文书
创先争优个人承诺书
2014/08/30 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang