비동기 요청을 보내는 Ajax 구현(그래픽 튜토리얼)-JS 튜토리얼-php.cn

비동기 요청을 보내는 Ajax 구현(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-21 17:18:59

원래의

1577명이 탐색했습니다.

이 글에서는 비동기 요청을 보내는 ajax를 쉽게 구현하는 방법을 주로 설명합니다. 관심 있는 친구들이 참고할 수 있습니다.

ajax가 비동기 요청을 보내는데 구체적인 내용은 다음과 같습니다

1단계 (XMLHttpRequest 가져오기)

ajax는 실제로 XMLHttpRequest 객체 하나만 배우면 됩니다. 이를 마스터하면 ajax를 마스터하게 됩니다!!!

1. XMLHttpRequest 가져오기

대부분의 브라우저는 다음을 지원합니다: var xmlHttp=new XMLHttpRequest( );
IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
IE5.0은 이전 버전의 IE에서 작성되었습니다:var XMLHttpRequest 객체를 생성하는 함수

function createXMLHttpRequest(){
     try{
     return new XMLHttpRequest();
     } catch(e){
     try{
     return new ActiveXObject(“Msxml2.XMLHTTP”);
    }catch(e){
     try{
      return new ActiveXObject(“Microsoft.XMLHTTP”);
     }catch(e){
       alert(“哥们儿,你用的是什么浏览器啊?”);
       throw e;
    }
    }
     } 
}

로그인 후 복사

두 번째 단계

(열기 서버와의 연결)

xmlHttp.open(): 서버와의 연결을 여는 데 사용되며 세 가지 매개변수가 필요합니다:

요청 방법: GET 및 POST 가능

요청 URL: 서버측 리소스를 지정합니다. 예: /day23_1/AServlet

요청이 비동기인지 여부: true이면 비동기 요청을 보내는 것을 의미하고, 그렇지 않으면 동기 요청을 보내는 것을 의미합니다

xmlHttp.open("GET" ,"/day23_1/AServlet",true);//For 예시

단계

(요청 보내기)

xmlHttp.send(null): 지정하지 않으면 일부 브라우저에서는 보내지 못할 수 있습니다!

매개변수: 요청 본문 내용인 경우! GET 요청의 경우 null을 제공해야 합니다.
POST 요청인 경우 다음과 같이

xmlHttp.send("username=zhangSan&password=123");

4단계:

xmlHttp 객체의 이벤트에 리스너를 등록합니다: onreadystatechange x mlHttp 개체에는 총 5가지 상태가 있습니다.

0: 초기화가 완료되지 않았으며 XMLHttpRequest 개체가 생성되었을 뿐이며 아직 open() 메서드가 호출되지 않았습니다.
1: 요청이 시작되었으며 열려 있습니다. () 메소드가 호출되었으나 아직 send() 메소드가 호출되지 않은 경우

2: 전송 완료 상태 요청, send() 메소드가 호출된 경우

3: 서버 응답 읽기 시작
4: 서버 응답 읽기 종료 (보통 우리는 마지막 상태만 관심있습니다!!!)

xmlHttp 개체의 상태를 가져옵니다.

var state = xmlHttp.readyState;//可能是0、1、2、3、4

로그인 후 복사

서버 응답의 상태 코드를 가져옵니다. (200: 성공 304: 상태가 변경되지 않았습니다. 404 500 : 서버 오류)

var status=xmlHttp.status;//例如200、404、500

로그인 후 복사

서버 응답 내용 가져오기

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

로그인 후 복사

그래서 리스너는 이렇게 작성해야 합니다

xmlHttp.onreadystatechange = function(){

  //xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){

  //双重判断:判断是否为4状态,而且还要判断是否为200
      var text=xmlHttp.responseText;
     } 
};

로그인 후 복사

위 내용은 제가 컴파일한 내용입니다. 여러분. 앞으로 모든 사람에게 도움이 되기를 바랍니다.