Ajax 비동기 전송 절차 및 예시

Ajax: 비동기 전송 절차: 1, XML HttpRequest 대상 의 생 성 2, 요청 방식 및 요청 주소 설정 3, 요청 의 세부 사항 설정 (필요 하지 않 음) 4, 전송 요청 5, 응답
1. XML HttpRequest 대상 의 생 성 방법 1: var request = new XML HttpRequest;var request = new ActiveXObject(“Microsoft.XMLHTTP”);

       ：
        var request = "";
        function createXmlRequest(){
            if(window.XMLHttpRequest){
                request = XMLHttpRquest();
            }else if(window.ActiveXObject){
                request = ActiveXObject();
            }else{
                alert("   Ajax");
            }
        }
       var reques=""      ，      return request    
        function createXmlRequest(){
            var request="";
            if(window.XMLHttpRequest){
                request = XMLHttpRquest();
            }else if(window.ActiveXObject){
                request = ActiveXObject();
            }else{
                alert("   Ajax");
            }
                return request;
        }

2. 요청 방식 과 요청 주소 request. open ("GET", "경로") 을 설정 합 니 다.

        void open(String method,String url,boolean asynch);
                 ，method     GET、POST  PUT。
        url       URL    URL，  asynch     
        asynch:          ，   true，      ，   false，
              ，           。

3. 요청 의 세부 사항 을 설정 합 니 다. > 필요 한 setRequestHeader () 가 아 닙 니 다.void setRequestHeader (String header, String value) 이 방법 은 HTTP 요청 에서 지정 한 첫 번 째 필드 에 값 을 설정 합 니 다. 이 방법 은 open () 방법 을 호출 한 후에 야 호출 할 수 있 습 니 다.
4. 요청 request. send (null) 보 내기;요청 주체 내용 이 없 으 면 null 또는 생략 합 니 다.

        void send(content)
                      ，        ，
                      ，                     。
               content   DOM     、        ，
                                。 send(null)      。

5. onreadystatechange 에 응답 하면 XML HttpRequest 대상 의 상태 가 바 뀔 때마다 이 이벤트 프로 세 서 를 실행 합 니 다. 이 이벤트 프로 세 서 는 보통 자바 스 크 립 트 함 수 를 호출 하여 관련 코드 를 실행 합 니 다.

    request.onreadystatechange = function(){
         if(request.readyState === 4 && request.status ===200){
                      
                                      ，                : json  xml  html  text
                responseText：     ，         。
                  
        }


        
              ： request.xxxx

           status                HTTP       
            200                     OK
            404                 Not Found
            403             forbidden   JSONP
            500                       
        statusText         HTTP     OK  Not Found
        getResponseHeader()            
        getAllResponseHeaders()        
        responseText              
        responseXML       Document      
        readyState        HTTP    
            0   open()      UNSENT
            1   open()          OPENED
            2               HEADERS_RECEIVED
            3               LOADING
            4                   DONE
        readystatechange         
         readyState    4          ，            

        /*
            HTTP  
        */
        function getText(url,callback){
            var request = new XMLHttpRequest();
            request.open("GET",url);
            request.onreadystatechange = function(){
                //      ，      
                if(request.readyState === 4 && request.status ===200){
                    var type = request.getResponseHeader("Content-type");
                    if(type.match(/^text/)){    //       
                        callback(request.responseText);//      
                    }
                }
            };
            request.send(null);
        }

예제 코드: / 1. XML HttpReques 창 을 준비 합 니 다.οnlοad = function () {var request = new XML HttpRequest (); / / 첫 번 째 단 계 는 XmlHttpRequest 대상 request. open ("GET", "xxx") / / 설정 요청 방식 request. send (null); request. onreadystatechange = function () {if (request. readyState = = = = 4 & & & request. status = = = 200) {var xx = request. responseText; / / 해당 내용 을 가 져 와 showNum (xx); / / 표 에 응답 한 데 이 터 를 봉인 하 는 방법} / / var stus = xx; var tbody = document. getElements ByTagName ('tbody') [0]; function showNum (stus) {/ / 배열 var arr = JSON. parse (stus); arr. foreach (function (item) {/ tr var tr tr = document. createElement ("tr"); for (var attr in item) {var td = document. createElement ("td"); td.innerHTML=item[attr]; tr.appendChild(td); } tbody.appendChild(tr); }); } }