AJAX 의 재 구성

AJAX 의 실현 은 주로 XML HttpRequest 대상 에 의존 하지만 비동기 데이터 전송 을 실행 할 때 XML HttpRequest 대상 의 인 스 턴 스 가 처리 시간 이 끝나 면 소각 되 기 때문에 이 대상 을 패키지 처리 하지 않 으 면 다음 호출 이 필요 할 때 다시 구축 해 야 합 니 다. 또한 호출 할 때마다 코드 를 크게 써 야 합 니 다.사용 하기에 매우 불편 하 다.현재 많은 오픈 소스 AJAX 프레임 워 크 는 XML HttpRequest 대상 에 대한 패 키 징 방안 을 제공 하고 있 지만 이 프레임 워 크 를 사용 하려 면 추가 자원 을 많이 불 러 와 야 하기 때문에 서버 자원 을 많이 낭비 할 수 밖 에 없다.그러나 자바 script 스 크 립 트 언어 는 OO 프로 그래 밍 스타일 을 지원 합 니 다. 이 를 통 해 AJAX 에 필요 한 기능 을 대상 에 밀봉 할 수 있 습 니 다.
모두 세 단계 로 나 뉜 다.
(1), 별도의 JS 파일 만 들 기 (파일 이름: AjaxRequest. js)

// JavaScript Document
//AJAX  
var net=new Object();//         
//      
net.AjaxRequest=function(url,onload,onerror,method,params){
	this.req=null;
	this.onload=onload;
	this.onerror=(onerror)?onerror:this.defaultError;
	this.loadDate(url,method,params);
}
//       XMLHttpRequest         ，    HTTP     
net.AjaxRequest.prototype.loadDate=function(url,method,params){
	if(!method){
		method="GET";
	}
	if(window.XMLHttpRequest){// IE     
		this.req=new XMLHttpRequest();//  XMLHttpRequest  
	}else if(window.ActiveXObject){//IE     
		try{
			this.req=new ActiveXObject("Microsoft.XMLHTTP");//  XMLHttpRequest  
		}catch(e){
			try{
				this.req=new ActiveXObject("Msxml2.XMLHTTP");//  XMLHttpRequest  
			}catch(e){
				
			}
		}
	}
	if(this.req){
		try{
			var loader=this;
			this.req.onreadystatechange=function(){
				net.AjaxRequest.onReadyState.call(loader);
			}
			this.req.open(method,url,true);//         
			if(method=='POST'){
				//         
				this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				//        
				this.req.setRequestHeader("x-requested-with","ajax");
			}
			this.req.send(params);//    
		}catch(err){
			this.onerror.call(this);//        
		}
	}
}
//      
net.AjaxRequest.onReadyState=function(){
	var req=this.req;
	var ready=req.readyState;//      
	if(ready==4){
		if(req.status==200){
			this.onload.call(this);//    
		}else{
			this.onerror.call(this);//        	
		}
	}
}
//           
net.AjaxRequest.prototype.defaultError=function(){
	alert("    
    ："+this.req.readyState+"
  ："+this.req.status);
}

(2) 、 AJAX 를 사용 해 야 하 는 페이지 에 다음 과 같은 문 구 를 적용 한다.

(3) AJAX 를 사용 하 는 페이지 에서 오류 처리 방법, AJAX 대상 을 예화 하 는 방법 과 리 셋 함 수 를 작성 합 니 다.

    /*       */
    function onerror(){
        alert("      ");
    }
    /*   Ajax     */
    function getInfo(){
        var loader=new net.AjaxRequest('index.jsp',deal_getInfo,onerror,'GET',null);
    }
    /*    */
    function deal_getInfo(){
        document.querySelector("#objDiv").innerHTML=this.req.responseText;
    }
    //     Ajax
    window.onload=function(){
        getInfo();
    }