一年都沒寫過博客了，不是懶，是不知有啥好寫的。。。現在本人從一個后臺開發.net的轉向前端開發了。。。

之前去面試的時候，給面試官問過，有沒有屬于自己的ajax類，當時很奇怪，因為我基本上ajax開發都是用jquery來完成，后來想了想，也是應該寫一個。

先看調用方式：

1?ajax.request("ajax.html",{v:Math.random(),num:1},function(data){
2?????//do?something
3?},'get');

?

?方式好像jquery哦。。。還是覺得這樣調用方便些。。。

?1?var?ajax?=?{
?2?????//Xmlhttprequest類
?3?????Xmlhttprequest?:function()?{
?4?????????this.xhr?=false;
?5?????},
?6?????//外部調用接口
?7?????request?:?function(url,data,callback,type)?{
?8?????????//每次都創建一個Xmlhttprequest的對象，使ajax調用互不影響
?9?????????var?xhr?=?new?this.Xmlhttprequest();
10?????????xhr.request(url,data,callback,type);
11?????}
12?}
13?//將{num:1,t:'a'}這種json數據格式轉為num=1&t=a這種字符串形式
14?var?json2str?=?function(data){
15?????var?_data?=?[];
16?????
17?????for(var?name?in?data)?{
18?????????_data.push(name+"="+data[name]);
19?????}
20?????return?_data.join('&');
21?}
22?//擴展Xmlhttprequest類的方法
23?ajax.Xmlhttprequest.prototype?=?{
24?????//創建XMLHttpRequest
25?????createXmlHttpRequest?:?function(){
26?????
27?????????if(window.XMLHttpRequest)?{
28?????????????return?new?XMLHttpRequest();
29?????????}
30?????????else?{
31?????????????var?a?=?["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
32?????????????for?(var?i=0,l=a.length;i<l;i++){
33?????????????????try{
34??????????????????????return?new?ActiveXObject(a[i]);
35?????????????????}catch(e){};
36?????????????}
37?????????}
38?????},
39?????//回調函數
40?????fnCallback?:?function(callback){
41?????
42?????????if(this.xhr.readyState?===?4?&&?this.xhr.status?===?200)?{
43?????????????callback?callback(this.xhr.responseText):void(0);
44?????????}
45?????},
46?????//ajax請求
47?????request?:?function(url,?data,?callback,?type){
48?
49?????????var?that?=?this;
50?????????var?ispost?=?type==='post'?true:false;
51?????????
52?????????!ispost?&&?(url?+=?(url.indexOf('?')+1?'&':'?')?+?json2str(data));
53?????????
54?????????this.xhr?=?this.createXmlHttpRequest();
55?????????
56?????????this.xhr.open(type,url,true);
57?????????ispost?this.xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"):'';
58?????????this.xhr.onreadystatechange?=?function(){that.fnCallback(callback);};
59?????????this.xhr.send(ispost?json2str(data):null);
60?????}
61?}

?

?

?這個類，肯定有不足的了，歡迎拍磚吧！每個人都有自己的習慣用法，最重要是適合用就行了！

?

轉載于:https://www.cnblogs.com/floyd/archive/2010/09/16/1828132.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的前端开发的开始---基于OO的Ajax类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。