Ajax 비동기 요청의 5단계에 대한 심층적인 이해(상세 코드)

Ajax는 프론트 엔드 작업에 자주 사용됩니다. 실제로 많은 사람들이 ajax가 비동기 요청이라는 것만 알고 이를 사용하는 방법을 모릅니다. ajax 요청 프로세스는 무엇입니까? 다음으로 이 글에서는 Ajax 요청 단계와 Ajax 요청 단계의 세부 코드를 소개하겠습니다. 관심있는 친구들이 살펴볼 수 있습니다.

AJAX(Asynchronous JavaScript and XML): 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말하며, AJAX는 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지의 비동기 업데이트를 가능하게 합니다. 즉, 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있습니다.

1. xmlHttpRequest 개체 만들기

모든 최신 브라우저(IE7+, Firefox, Chrome, Safari 및 Opera)는 XMLHttpRequest 개체를 지원하는 반면 IE5 및 IE6은 ActiveXObject를 사용합니다.

    if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest(); 
      if(xmlHttp.overrideMimeType){
        xmlHttp.overrideMimeType("text/xml");
      }
   }else if(window.ActiveXobject){
       var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0; i<activeName.length; i++){
          try{
              xmlHttp = new ActiveXobject(activeName[i]);
             break;
          }catch(e){
          }
       }     
   }
   if(!xmlHttp){
      alert("创建xmlhttprequest对象失败");
   }else{    
   }

2. 콜백 기능을 설정합니다

   xmlHttp.onreadystatechange= callback;
   function callback(){}

3. OPEN 메서드를 사용하여 서버와 연결합니다 xmlHttp.open("get","ajax?name="+ name,true)

이 단계에서는 http 요청 메서드(post/get) 설정에 주의하고, POST 메서드인 경우 요청 헤더 정보 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form- 설정에 주의하세요. urlencoded")

4. 서버로 데이터 보내기

  xmlHttp.send(null);

POST 모드라면 비어있지 않습니다

5. 콜백 함수에서 다양한 응답 상태를 처리합니다

 if(xmlHttp.readyState == 4){
      //判断交互是否成功
      if(xmlHttp.status == 200){
        //获取服务器返回的数据
        //获取纯文本数据
        var responseText =xmlHttp.responseText;
       document.getElementById("info").innerHTML = responseText;
      }
  }

readyState 속성: 요청/응답 프로세스의 현재 단계를 나타냅니다

0: 초기화되지 않았습니다. open() 메소드가 아직 호출되지 않았습니다.
1: 시작합니다. open() 메서드가 호출되었지만 send() 메서드는 아직 호출되지 않았습니다.
2: 보내기. send() 메서드가 호출되었지만 아직 응답을 받지 못했습니다.
3: 수신. 부분 응답 데이터가 수신되었습니다.
4: 완료되었습니다. 모든 응답 데이터가 수신되었으며 클라이언트에서 사용할 준비가 되었습니다.

XMLHttpRequest 객체가 위의 5단계를 완료한 후에만 서버에서 반환된 데이터를 얻을 수 있습니다.

status 속성: 응답 HTTP 상태 코드
200: 응답 성공
301: 영구 리디렉션/영구 전송
302: 임시 리디렉션/임시 전송
304: 이번에 얻은 콘텐츠는 캐시의 데이터를 읽는 것
400: 요청 매개변수 오류
401: 액세스 권한 없음
404: 액세스한 리소스가 존재하지 않습니다

요약: 위의 Ajax 요청 5단계와 자세한 코드는 친구에게 연락하지 않은 경우 어려워 보일 수 있습니다. 하지만 상관없습니다. 읽고 나면 더 자주, 천천히 시도해 보도록 하겠습니다. 도움이 되셨으면 좋겠습니다.

위 내용은 Ajax 비동기 요청의 5단계에 대한 심층적인 이해(상세 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!