XMLHTTP 객체 캡슐화 기술 샘플 코드에 대한 자세한 설명

Ajax 기술의 구현은 주로 xmlhttprequest에 의존하지만 비동기 데이터 전송을 위해 호출할 때 xmlhttp는 단기 프로세스이므로(이벤트 처리 후 파기됨) 객체가 패키징되지 않으면 호출해야 하는 xmlhttprequest 재구성에서는 각 호출에 대해 큰 코드 섹션을 작성해야 하는데 이는 실제로 좋은 생각이 아닙니다. 다행히도 이제 많은 오픈 소스 Ajax 프레임워크가 xmlhttp 캡슐화를 위한 솔루션을 제공합니다. 여기서는 ajaxtags와 함께 제공되는 프로토타입-1.4.0.js를 마스터로 사용하여 xmlhttp 객체를 재사용 가능한 메서드로 캡슐화하는 방법을 확인합니다.

prototype.js에서는 Ajax

　 var Ajax = {
　　　 getTransport: function() {
　　　　 return Try.these(
　　　　　 function() {return new ActiveXObject('Msxml2.XMLHTTP')},
　　　　　 function() {return new ActiveXObject('Microsoft.XMLHTTP')},
　　　　　 function() {return new XMLHttpRequest()}
　　　 ) || false;
　 },
　　 
　　 activeRequestCount: 0
}

변수가 먼저 정의됩니다. 이 변수는 Ajax.getTransport()를 호출하면 매번 반환되는 것을 볼 수 있습니다. 새로운 xmlhttprequest 객체.

기본 메소드 Ajax.Base와 기본 메소드의 프로토타입은 Ajax 변수에 정의되어 있습니다(초기에는 각 스크립트 메소드에는 기본적으로 Object의 프로토타입을 상속하는 빈 프로토타입이 있습니다. 만약 우리가 프로토타입이 Object에서 변경되면 모든 스크립트 메소드가 변경됩니다.) 이 기본 메소드는 Ajax.Request에 상속됩니다. 상속받은 프로토타입의 동일한 이름의 메소드나 변수가 Ajax.Request에 채워지면 변경됩니다. .

Ajax.Base 프로토타입에서 가장 중요한 것은 나중에 사용할 setOptions 메소드입니다.

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 parameters:　 ''
　　 }

프로토타입의 요청은 Ajax.Request 프로토타입(Ajax.Request.prototype)을 정의하여 구현됩니다. 그러나 Ajax.Request를 직접 호출할 수는 없습니다. 주된 이유는 Ajax.Request가 통합된 처리 프로세스를 제공하지 않기 때문입니다. 그리고 요청을 통해 응답을 얻어야 할 수도 있습니다. (고객이 메시지를 보냈지만 응답을 받지 못했다고 상상해 보세요. 매우 짜증날 것입니다~) 프로토타입도 우리를 위해 응답(Ajax.Responders)을 캡슐화하지만 둘 다 서로 독립적입니다. 어떻게 통합합니까?

은 프로토타입에 두 가지 솔루션을 제공합니다. 하나는 Ajax.Updater이고 다른 하나는 Ajax.PeriodicalUpdater입니다. 두 솔루션은 3개의 매개변수를 전달해야 한다는 공통점이 있습니다.

container :

응답 데이터를 전달할 위치입니다. 예를 들어 html에서 반환된 데이터를

/*表单提交用post方法*/
function doRequest(container,paraments,url){
　　 var options ={
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 postBody: paraments
　　 };
　　 new Ajax.Updater(container,url,options);　　
}