前端開發(fā)的開始---基于面向?qū)ο蟮腁jax類
更新時(shí)間:2010年09月17日 09:21:04 作者:
因?yàn)槲一旧蟖jax開發(fā)都是用jquery來完成,后來想了想,也是應(yīng)該寫一個(gè)。這樣才能提高自己的整體水平。
先看調(diào)用方式:
ajax.request("ajax.html",{v:Math.random(),num:1},function(data){
//do something
},'get');
方式好像jquery哦。。。還是覺得這樣調(diào)用方便些。。。
var ajax = {
//Xmlhttprequest類
Xmlhttprequest :function() {
this.xhr =false;
},
//外部調(diào)用接口
request : function(url,data,callback,type) {
//每次都創(chuàng)建一個(gè)Xmlhttprequest的對(duì)象,使ajax調(diào)用互不影響
var xhr = new this.Xmlhttprequest();
xhr.request(url,data,callback,type);
}
}
//將{num:1,t:'a'}這種json數(shù)據(jù)格式轉(zhuǎn)為num=1&t=a這種字符串形式
var json2str = function(data){
var _data = [];
for(var name in data) {
_data.push(name+"="+data[name]);
}
return _data.join('&');
}
//擴(kuò)展Xmlhttprequest類的方法
ajax.Xmlhttprequest.prototype = {
//創(chuàng)建XMLHttpRequest
createXmlHttpRequest : function(){
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
var a = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
for (var i=0,l=a.length;i<l;i++){
try{
return new ActiveXObject(a[i]);
}catch(e){};
}
}
},
//回調(diào)函數(shù)
fnCallback : function(callback){
if(this.xhr.readyState === 4 && this.xhr.status === 200) {
callback?callback(this.xhr.responseText):void(0);
}
},
//ajax請(qǐng)求
request : function(url, data, callback, type){
var that = this;
var ispost = type==='post'?true:false;
ispost?url:url += '?'+json2str(data);
this.xhr = this.createXmlHttpRequest();
this.xhr.open(type,url,true);
ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):'';
this.xhr.onreadystatechange = function(){that.fnCallback(callback);};
this.xhr.send(ispost?json2str(data):null);
}
}
這個(gè)類,肯定有不足的了,歡迎拍磚吧!每個(gè)人都有自己的習(xí)慣用法,最重要是適合用就行了!
復(fù)制代碼 代碼如下:
ajax.request("ajax.html",{v:Math.random(),num:1},function(data){
//do something
},'get');
方式好像jquery哦。。。還是覺得這樣調(diào)用方便些。。。
復(fù)制代碼 代碼如下:
var ajax = {
//Xmlhttprequest類
Xmlhttprequest :function() {
this.xhr =false;
},
//外部調(diào)用接口
request : function(url,data,callback,type) {
//每次都創(chuàng)建一個(gè)Xmlhttprequest的對(duì)象,使ajax調(diào)用互不影響
var xhr = new this.Xmlhttprequest();
xhr.request(url,data,callback,type);
}
}
//將{num:1,t:'a'}這種json數(shù)據(jù)格式轉(zhuǎn)為num=1&t=a這種字符串形式
var json2str = function(data){
var _data = [];
for(var name in data) {
_data.push(name+"="+data[name]);
}
return _data.join('&');
}
//擴(kuò)展Xmlhttprequest類的方法
ajax.Xmlhttprequest.prototype = {
//創(chuàng)建XMLHttpRequest
createXmlHttpRequest : function(){
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
var a = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
for (var i=0,l=a.length;i<l;i++){
try{
return new ActiveXObject(a[i]);
}catch(e){};
}
}
},
//回調(diào)函數(shù)
fnCallback : function(callback){
if(this.xhr.readyState === 4 && this.xhr.status === 200) {
callback?callback(this.xhr.responseText):void(0);
}
},
//ajax請(qǐng)求
request : function(url, data, callback, type){
var that = this;
var ispost = type==='post'?true:false;
ispost?url:url += '?'+json2str(data);
this.xhr = this.createXmlHttpRequest();
this.xhr.open(type,url,true);
ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):'';
this.xhr.onreadystatechange = function(){that.fnCallback(callback);};
this.xhr.send(ispost?json2str(data):null);
}
}
這個(gè)類,肯定有不足的了,歡迎拍磚吧!每個(gè)人都有自己的習(xí)慣用法,最重要是適合用就行了!
您可能感興趣的文章:
- 簡(jiǎn)單的前端js+ajax 購物車框架(入門篇)
- 前端彈出對(duì)話框 js實(shí)現(xiàn)ajax交互
- laypage前端分頁插件實(shí)現(xiàn)ajax異步分頁
- Laravel接收前端ajax傳來的數(shù)據(jù)的實(shí)例代碼
- Spring MVC前端與后端5種ajax交互方法【總結(jié)】
- Node.js獲取前端ajax提交的request信息
- 前端ajax的各種與后端交互的姿勢(shì)
- ASP.NET使用AjaxPro實(shí)現(xiàn)前端跟后臺(tái)交互詳解
- 關(guān)于前端ajax請(qǐng)求的優(yōu)雅方案(http客戶端為axios)
相關(guān)文章
javascript 面向?qū)ο缶幊袒A(chǔ):繼承
"繼承是面向?qū)ο箝_發(fā)的又一個(gè)重要概念,它可以將現(xiàn)實(shí)生活的概念對(duì)應(yīng)帶程序邏輯中"?!? 雖然在JavaScript中沒有專門的機(jī)制來實(shí)現(xiàn)類的繼承,但可以通過拷貝一個(gè)類的prototype 到另外一個(gè)類來實(shí)現(xiàn)繼承”。2009-08-08js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好,大家給予了回復(fù),感覺不錯(cuò),特分享給大家。2011-10-10JavaScript 面向?qū)ο蟮闹接谐蓡T和公開成員
這節(jié)來說下JavaScript的私有成員和公開成員,雖然JavaScript沒有private和public關(guān)鍵字,但還是那句話——作為開發(fā)人員我們要有面向?qū)ο蟮乃枷耄?2010-05-05JavaScript 設(shè)計(jì)模式學(xué)習(xí) Singleton
JavaScript設(shè)計(jì)模式學(xué)習(xí) Singleton2009-07-07js對(duì)象的構(gòu)造和繼承實(shí)現(xiàn)代碼
js對(duì)象的構(gòu)造和繼承實(shí)現(xiàn)代碼,學(xué)習(xí)javascript面向?qū)ο蟮呐笥芽梢詤⒖枷?。寫出跟漂亮與復(fù)用的代碼。2010-12-12JavaScript 工具庫 Cloudgamer JavaScript Library v0.1 發(fā)布
研究了一年多的js,也差不多寫一個(gè)自己的js庫了。 我寫這個(gè)不算框架,只是一個(gè)小型的js工具庫,所以我用的名字是Library。2009-10-10