기본 Javascript_javascript 기술로 캡슐화된 AJAX 기능 공유

최근 작업에는 ajax 작업이 많이 포함되어 있으며 백그라운드에서 수행해야 하는 작업을 수행해야 합니다. 현재 사용되는 ajax 기능은 백그라운드 사람에 의해 캡슐화되지만 jquery의 ajax를 기반으로 합니다. jquery가 없는 함수는 쓸모가 없습니다. 그리고 jquery의 ajax 메서드는 매우 완벽하고 직접 사용할 수 있다고 생각합니다. 이미 jquery가 있으면 해당 ajax가 헛되이 사용되지 않을 것입니다. jquery 없이도 사용할 수 있습니다.

그래서 저도 하나 작성하는데 하루를 보냈습니다. 매개변수와 호출 방법이 jquery의 ajax와 비슷합니다. xhr=XMLHttpRequest이기 때문입니다.

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

/*
* 이름: xhr,AJAX 래퍼 함수
* 설명: jquery의 ajax 호출 방식을 모방한 ajax 호출 캡슐화 클래스
* 저자 : 십년램프
*/
var xhr = 함수 () {
변수
ajax = 함수() {
           return (창의 'XMLHttpRequest') ? 함수 () {
                    새 XMLHttpRequest() 반환;
               } : 기능 () {
               새 ActiveXObject("Microsoft.XMLHTTP") 반환
}
}(),
formatData= 함수(fd) {
        var res = '';
for(var f in fd) {
               res = f '=' fd[f] '&';
}
          res.slice(0,-1) 반환;
},
AJAX = 함수(ops) {
                                                  루트=이것,
          req = ajax();
root.url = ops.url;

         root.type = ops.type || 'responseText';
          root.method = ops.method || 'GET';
          root.async = ops.async || true;                             root.data = ops.data || {};
root.complete = ops.complete || 함수 () {};
root.success = ops.success || function(){};
root.error = ops.error || 함수(들) { Alert(root.url '->status:' s 'error!')};
         root.abort = req.abort;
          root.setData = 함수(데이터) {
               for(데이터의 변수) {
                    root.data[d] = 데이터[d];
            }
}
root.send = 함수() {
          var datastring = formatData(root.data),
                sendstring,get = false,
비동기 = root.async,
             완료 = 루트.완료,
            메소드 = root.method,
            유형=root.type;
If(메서드 === 'GET') {
                     root.url ='?' 데이터 문자열;
                    get = true;
            }
                req.open(method,root.url,async);
               if(!get) {
                 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                      sendstring = 데이터 문자열;
~

                       //보내기 전에 onreadystatechange 메소드를 재설정합니다. 그렇지 않으면 새로운 동기화 요청이 발생하고 두 번의 성공적인 콜백이 실행됩니다(Chrome 등도 동기화 요청 중에 onreadystatechange를 실행합니다)
                req.onreadystatechange = 비동기 ? 함수 () {
                          // console.log('async true');
If (req.readyState ==4){
완료();
If(req.status == 200) {
                               root.success(req[type]);
                     } else {
Root.error(req.status);
~                                                 ​                  }
               } : null;
                req.send(sendstring);
               if(!async) {
//console.log('async false');
완료();
                    root.success(req[type]);
            }
}
         root.url && root.send();                                                      };
반환 함수(ops) {return new AJAX(ops);}
}();

매개변수 설명:

1.url: 요청 주소를 작성하지 않으면 요청이 시작되지 않습니다. 하지만 작성하지 않고 강제로 보내면 문제가 발생하더라도 저를 비난하지 않습니다. 🎜> 2.방법: 'GET' 또는 'POST', 모두 대문자, 기본값 GET

3.data : 전송할 데이터가 첨부되며, 형식은 객체입니다

4.async: 비동기화 여부, 기본값은 true
5.type: 반환되는 데이터 유형은 responseText 또는 responseXML입니다. 기본값은 responseText
입니다. 6.complete: 요청이 완료되면 실행되는 함수
7.success: 요청이 성공했을 때 실행되는 함수
8.오류: 요청 실패 시 실행되는 함수

참고: 유형 매개변수는 jquery의 dataType만큼 풍부하지 않습니다. 기본 AJAX에는 responseText 또는 responseXML만 있습니다. json 데이터가 반환되면 텍스트를 json으로 변환하기 위해 성공 함수에서 직접 처리해야 합니다.

기능 설명:

인스턴스화된 xhr 객체에는 두 가지 기능을 사용할 수 있습니다. 하나는 전송이고 호출 메서드는 xhr.send()이며 매개변수가 없으며 해당 기능은 초기화 중에 URL이 없으면 요청 프로세스를 시작하는 것입니다. 나중에 URL을 추가하고 수동으로 보내기를 시작할 수 있도록 send 메서드를 실행하세요. 보낼 때 URL이 없으면 요청이 실패하고 이 오류를 직접 찾을 수 없습니다.

또 다른 메소드는 setData입니다. 호출 메소드는 xhr.setData(data_obj)이고 해당 매개변수는 객체입니다. setData 메소드의 기능은 xhr의 데이터 속성 값을 부분적으로 바꾸는 것입니다. 이미 xhr.data에 페이지가 있습니다. 1. xhr.setData({page:2})를 사용하면 이미 데이터에 존재하는 다른 속성 값 ​​​​에 영향을 주지 않고 해당 값을 업데이트할 수 있습니다.

통화 방법:

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

var a1 = xhr({
~ ~          데이터:{               '사용자 이름':'lix',               '비밀번호':'123456',
            '성별':'남성',
             'interset':'재생'
},
비동기:거짓,
방법:'GET',
성공: 함수(데이터) {
          var obj = JSON.parse(data);
                  //....
}
});


참고: 새로 작성할 필요가 없습니다

기능 소개:
이 프로젝트 경험을 통해 나는 ajax 클래스가 반복적인 요청을 용이하게 하는 매우 일반적인 기능을 가져야 한다는 것을 깨달았습니다. 예를 들어 프로젝트에서 페이지 매기기 ajax를 작성할 때 페이지가 호출될 때마다 요청을 보내야 했습니다. 그러나 현재 페이지 번호와 페이지당 항목 수를 제외하고 다른 데이터는 변경되지 않습니다. 이러한 요청을 여러 번 수행하면 변경되지 않은 매개 변수를 반복적으로 정의해야 하며 이는 의심할 여지 없이 리소스 낭비입니다.

따라서 이 xhr 함수는 이미 페이징의 예를 들어 페이지가 로드될 때 xhr 객체를 초기화하고 페이지 넘김 요청이 시작되면 이를 변수 a1로 저장할 수 있습니다. 변경되었지만 pageNumber가 변경되었습니다. 이때 xhr의 setData 메소드를 호출하여 pageNumber를 변경할 수 있습니다.

코드 복사 코드는 다음과 같습니다. a1.setData({pageNumber:2});

참고: setData의 매개변수도 개체입니다.

물론 전체 데이터를 교체할 수도 있습니다.

a1.data = {…};

데이터뿐만 아니라 URL 변경, 성공 함수 변경, GET에서 POST로, 동기에서 비동기로... 변경 후 a1.send()를 다시 호출하는 등 인스턴스화된 xhr 객체 a1에 더 많은 변경을 수행할 수 있습니다. 방법을 사용하면 설정에 따라 요청이 다시 시작됩니다.

물론 전혀 관련이 없는 또 다른 Ajax 요청인 경우에는 이미 만들어진 a1을 사용할 필요가 없습니다. 다른 xhr을 인스턴스화하고 이를 a2라고 부를 수 있습니다.

xhr이라는 이름이 만족스럽지 않다면 직접 변경해야 합니다.

압축 및 암호화 버전도 제공됩니다. 비압축 버전은 주석을 제거한 2kb 정도이고, 압축 버전은 1.00kb입니다.

코드 복사 코드는 다음과 같습니다. var xhr=function(){var e=function(){return "XMLHttpRequest" in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t =function(e){var t="";for(var n in e){t =n "=" e[n] "&"}return t.slice(0,-1)},n=function( n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r. async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){} ;r.error=n.error||function(e){alert(r.url "->status:" e "오류!")};r.abort=i.abort;r.setData=function(e ){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o= r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url="?" e;s=true}i.open( a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function( ){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}: null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};return 함수(e){return new n( e)}}()

xhr에 몇 가지 불완전한 부분이 있을 것입니다. 향후 사용 중에 발견되면 시간 내에 수정하겠습니다. 만족스럽지 않거나 부족하다고 생각되면 언제든지 개선 사항을 제안해 주세요.