无为清净楼资源网 Design By www.qnjia.com
你没有看错标题,本文的确是在讲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;
}
这段代码还是比较容易理解的:
"codetitle">复制代码 代码如下:
/**
* 发送一个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扩展的。
由于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;
}
这段代码还是比较容易理解的:
"codetitle">复制代码 代码如下:
/**
* 发送一个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扩展的。
标签:
ajax,request
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】