Ajax+js 비동기 대화 실현

비동기 상호작용 이 라 고 하면 ajax 라 고 할 수 있 습 니 다.마치 ajax 라 는 기술 이 비동기 상호작용 의 대명사 가 된 것 같 습 니 다.다음은 ajax 의 핵심 대상 을 연구 하 겠 습 니 다!
ajax 를 이용 하여 비동기 적 인 상호작용 을 실현 하 는 것 은 4 단계 가 아 닙 니 다.
aax 핵심 대상 만 들 기서버 와 연결 하기서버 에 요청 을 보 냅 니 다서버 응답 을 받 은 데이터신비 로 워 보 이 는 비동기 적 인 상호작용 이 네 걸음 을 명확 하 게 한 후에 여러분 의 머 릿 속 에 이미 초보적인 사고 가 있 을 것 입 니 다.
우선 ajax 의 핵심 대상 을 만 듭 니 다.브 라 우 저의 호환성 문제 로 인해 ajax 핵심 대상 을 만 들 때 호환성 문 제 를 고려 할 수 없습니다.비동기 적 인 상호작용 을 실현 하려 면 첫 번 째 단계 에서 ajax 핵심 대상 을 성공 적 으로 만 들 었 는 지 여 부 를 기반 으로 하기 때 문 입 니 다.

 function getXhr(){
      //   XMLHttpRequest  
      var xhr = null;
      //               
       if(window.XMLHttpRequest){
      //    IE       
           xhr = new XMLHttpRequest();
       }else{
         //   IE   
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 //       
 var xhr = getXhr();    

상기 코드 를 통 해 저 희 는 ajax 핵심 대상 을 성공 적 으로 만 들 었 습 니 다.저 희 는 변수 xhr 에 저장 하고 다음 에 언급 한 ajax 핵심 대상 은 모두 xhr 로 대 체 됩 니 다.
두 번 째 단 계 는 서버 와 연결 하여 ajax 핵심 대상 을 통 해 open(method,url,async)방법 을 호출 하 는 것 입 니 다.
open 방법의 형 삼 해석:
method 는 요청 방식(get 또는 post)을 표시 합 니 다.
url 은 요청 한 phop 의 주 소 를 표시 합 니 다.(요청 형식 이 get 일 때 요청 한 데 이 터 는 물음표 로 url 주소 뒤 를 따 르 고 아래 send 방법 은 null 값 으로 전 송 됩 니 다)
async 는 불 값 입 니 다.비동기 여 부 를 표시 합 니 다.기본 값 은 true 입 니 다.최신 규범 에서 이 항목 은 작성 할 필요 가 없습니다.왜냐하면 공식 적 으로 ajax 를 사용 하 는 것 은 비동기 화 를 실현 하기 위 한 것 이 라 고 생각 하기 때 문 입 니 다.

xhr.open("get","01.php?user=xianfeng");//  get      
xhr.open("post","01.php");//   post      

세 번 째 단 계 는 서버 에 요청 을 보 내 고 ajax 핵심 대상 을 이용 하여 send 방법 을 호출 합 니 다.
post 방식 이 라면 요청 한 데 이 터 는 name=value 형식 으로 send 방법 에 넣 어 서버 에 보 내 고 get 방식 으로 null 값 을 직접 전달 합 니 다.

xhr.send("user=xianfeng");//   post        
xhr.send(null);//   get  

 네 번 째 단 계 는 서버 응답 이 돌아 온 데 이 터 를 수신 하고 onreadystatechange 이벤트 감청 서버 의 통신 상 태 를 사용 합 니 다.ready State 속성 을 통 해 서버 의 현재 통신 상 태 를 가 져 옵 니 다.status 는 상태 코드 를 얻 습 니 다.responseText 속성 을 이용 하여 서버 응답 을 받 은 데이터(text 형식의 문자열 형식 데 이 터 를 말 합 니 다).다음은 XML 형식의 데이터 와 유명한 json 형식 데 이 터 를 씁 니 다.

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　//                ,            
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　//          
          　　　　　　var data = xhr.responseText;
          　　　　　　 //   
          　　　　　　 console.log(data);
              　　 } 
             };