프론트엔드 개발의 시작---객체지향 Ajax class_js 객체지향 기반

먼저 호출 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

ajax.request( "ajax.html",{v:Math.random(),num:1},function(data){
//뭔가
},'get'); >

방식은 jquery와 같습니다. . . 나는 아직도 이렇게 부르는 것이 더 편리하다고 생각한다. . .

코드 복사 코드는 다음과 같습니다.

var ajax = {
// Xmlhttprequest 클래스
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(데이터의 var 이름) {
_data.push(name "=" data[name])
}
return _data.join( ' &');
//Xmlhttprequest 클래스를 확장하는 방법
ajax.>if(window.XMLHttpRequest) {
return new XMLHttpRequest();
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;itry{
return new ActiveXObject(a[i]);
}catch(e){};
}
},
//콜백 함수
fnCallback: function(callback ){

if(this.xhr.readyState === 4 && this.xhr.status = == 200) {
callback?callback(this.xhr.responseText):void(0)
}
},
//ajax 요청
request: function(url, data , 콜백, 유형){

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);}; xhr.send(ispost?json2str(data):null);
}
}



이 카테고리에는 몇 가지 단점이 있을 것입니다. 노력하다! 사람마다 자신만의 습관이 있으니, 가장 중요한 것은 적절하게 사용하는 것입니다!