Ajax 전송 비동기 요청 방법 구현

이번에는 비동기 요청을 보내는 ajax를 구현하는 요청 방법과 비동기 요청을 보내는 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 xmlHttp=new ActiveXObject( "Microsoft.XMLHTTP ");

2. 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;
    }
    }
     } 
}

2단계(서버 연결 열기)

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

요청 방법: GET 또는 POST일 수 있음
요청된 URL: 서버 측 리소스를 지정하십시오. 예:/day23_1/AServlet
요청이 비동기인지 여부: true이면 비동기 요청을 보내는 것을 의미하고, 그렇지 않으면 동기 요청을 보내는 것을 의미합니다.

xmlHttp.open("GET","/day23_1/AServlet",true);//예를 들어

3단계(요청 보내기)

xmlHttp.send(null): 지정하지 않으면 일부 브라우저에서는 전송하지 못할 수 있습니다! Parameter: 요청 본문 내용입니다! GET 요청인 경우 null을 주어야 합니다.

POST 요청
인 경우 다음과 같이

xmlHttp.send(“사용자 이름=zhangSan&비밀번호=123”);

4단계:

xmlHttp 개체의 이벤트에 리스너를 등록합니다. onreadystatechange

xmlHttp 개체에는 총 5가지 상태가 있습니다

0: 초기화가 완료되지 않았고 XMLHttpRequest 객체가 방금 생성되었으며 open() 메서드가 아직 호출되지 않았습니다. 1: 요청이 시작되었지만 open() 메서드가 호출되었지만 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;
     } 
};

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue-cli+sass 사용에 대한 자세한 설명

Date 객체로 카운트다운 기능을 만드는 방법

위 내용은 Ajax 전송 비동기 요청 방법 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!