フロントエンド開発の始まり --- オブジェクト指向 Ajax class_js オブジェクト指向をベースとした

まず呼び出しメソッドを見てみましょう:

コードをコピー コードは次のとおりです:

ajax.request( "ajax.html",{v:Math.random(),num:1},function(data){
//何かをする
},'get'); >

メソッドはjqueryのようなものです。 。 。やはりこのように呼んだほうが便利だと思います。 。 。

コードをコピー コードは次のとおりです。

var ajax = {
// Xmlhttprequest class
Xmlhttprequest :function() {
this.xhr =false;
},
//外部呼び出しインターフェイス
request : function(url,data,callback,type) {
/ /ajax 呼び出しが相互に影響しないように、毎回 Xmlhttprequest オブジェクトを作成します。
var xhr = new this.Xmlhttprequest();
xhr.request(url,data,callback,type); >}
}
//json データ形式 {num:1,t:'a'} を文字列形式 num=1&t=a
var json2str = function(data){
var _data = [];

for(データ内の変数名) {
_data.push(name "=" data[name]);
}
return _data.join( ' &');
}
//Xmlhttprequest クラスを拡張するメソッド
ajax. >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"]; i=0,l=a.length;itry{
return new ActiveXObject(a[i])
}catch(e){};
}
},
//コールバック function
fnCallback: function(callback ){

if(this.xhr.readyState === 4 && this.xhr.status = == 200) {
callback?callback(this.xhr.responseText):void(0);
}
},
//ajax request
request: function(url, data) 、コールバック、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); ("Content-Type","application/x-www-form-urlencoded"):'';
this.xhr.onreadystatechange = function(){that.fnCallback(callback);}; xhr.send(ispost?json2str(data):null);
}
}



このカテゴリにはいくつかの欠点があるはずです。お気軽にご指摘ください。試す！誰もが独自の習慣的な使い方を持っています。最も重要なことは、それを適切に使用することです。