네이티브 js에서 Ajax 메소드를 구현하는 방법은 무엇입니까? 네이티브 JS에서 Ajax를 구현하는 방법 소개(코드 포함)

이 기사에서는 기본 JS에서 Ajax 메소드를 구현하는 방법을 설명합니다. 네이티브 JS(코드 포함)에서 Ajax를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

일반적으로 JQuery에서 제공하는 Ajax 메서드를 사용하는 것은 누구나 익숙할 수 있는데, Native JS를 사용하여 Ajax 메서드를 구현하는 방법은 무엇일까요?

JQuery에서 제공하는 Ajax 메소드:

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Native js 구현 Ajax 메소드:

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

참고:

1 open(method, url, async) 메소드에는 세 가지 매개변수가 필요합니다.

메소드: 요청을 보내는 데 사용됩니다. 방법(GET 또는 POST), GET은 POST보다 간단하고 빠르며 대부분의 경우 작동하지만 다음과 같은 경우에는 POST 요청을 사용하세요.

• 캐시 파일을 사용할 수 없습니다(서버의 파일 또는 데이터베이스 업데이트).

• 서버에 대용량 데이터 전송(POST에는 데이터 제한 없음)

• 알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST가 GET

　url보다 안정적이고 신뢰할 수 있습니다. : 서버의 URL을 지정합니다. -side 스크립트(파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 .asp 및 .php(응답을 다시 보내기 전에 서버에서 작업을 수행할 수 있음)와 같은 서버 스크립트 파일일 수 있음) ;

　async: 요청이 비동기식(true) 또는 동기식(false)으로 처리되도록 지정합니다. true는 서버 응답을 기다리는 동안 다른 스크립트를 실행하는 것을 의미하고, 응답이 준비되면 응답을 처리하는 것을 의미합니다. false는 서버 응답을 기다리는 것을 의미합니다. 실행하기 전에.

2. send() 메소드는 서버에 요청을 보낼 수 있습니다.

3. onreadystatechange: 서버 응답을 처리하는 함수가 있습니다. ReadyState가 변경될 때마다 onreadystatechange 함수가 실행됩니다.

4.readyState: 서버 응답 상태 정보를 저장합니다.

• 0: 요청이 초기화되지 않았습니다(프록시가 생성되었지만 open() 메서드가 호출되지 않음)

• 1: 서버 연결이 설정되었습니다(open 메소드가 호출됨)

  open方法已经被调用）

• 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

• 3: 请求处理中（下载中，responseText

2: 요청이 수신되었습니다(send 메소드가 호출되었으며 헤더와 상태가 획득되었습니다)
3: 요청이 수신되고 있습니다 처리됨(다운로드 중, responseText 속성에 이미 일부 데이터가 포함되어 있음)

4: 요청이 완료되었고 응답이 준비되었습니다(다운로드 작업이 완료되었습니다)

5.responseText: 문자열 형식으로 응답 데이터를 가져옵니다.

🎜6. setRequestHeader(): POST가 데이터를 전송할 때 HTTP 헤더를 추가한 다음 전송(데이터)하는 데 사용됩니다. GET이 정보를 보낼 때 데이터 형식에 주의하세요. URL과 같은 매개변수를 직접 추가하세요. ?a=a1&b=b1 . 🎜🎜🎜PS🎜: Fetch 폴리필의 기본 원리는 window.fetch 메소드가 존재하는지 감지하고 존재하지 않으면 XHR을 사용하여 구현하는 것입니다🎜

위 내용은 네이티브 js에서 Ajax 메소드를 구현하는 방법은 무엇입니까? 네이티브 JS에서 Ajax를 구현하는 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!