집 >웹 프론트엔드 >JS 튜토리얼 >네이티브 js에서 Ajax를 구현하는 방법

네이티브 js에서 Ajax를 구현하는 방법

小云云원래의: 2018-03-31 16:48:521275검색

일반적으로 누구나 JQuery에서 제공하는 Ajax 메서드를 사용하는 데 익숙할 수 있는데, Native js를 사용하여 Ajax 메서드를 구현하는 방법은 무엇일까요? 이 글은 주로 네이티브 js에서 Ajax를 구현하는 방법을 여러분과 공유합니다. 여러분에게 도움이 되기를 바랍니다.

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

$.ajax({
    url: ,
    type: &#39;&#39;,
    dataType: &#39;&#39;,
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

Ajax 메소드의 기본 js 구현:

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

참고:

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

메소드: 전송에 사용되는 메소드 요청(GET 또는 POST)은 POST보다 간단하고 빠르며 대부분의 경우 작동합니다. 그러나 다음과 같은 경우에는 POST 요청을 사용합니다.

캐시 파일을 사용할 수 없습니다(서버에서 업데이트된 파일 또는 데이터베이스).
대량의 데이터를 서버로 전송합니다(POST에는 데이터 제한이 없습니다)
알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST는 GET

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

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

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

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

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

0: 요청이 초기화되지 않았습니다(프록시가 생성되었지만 open() 메서드가 호출되지 않음)
1: 서버 연결이 설정되었습니다(open 메서드가 호출되었습니다)
2: 요청이 수신되었습니다(send 메소드가 호출되었으며 헤더와 상태를 사용할 수 있음)
3: 요청을 처리 중입니다(다운로드 중, responseText 속성에 이미 데이터의 일부가 포함되어 있음)
4: 요청이 완료되고 응답이 준비되었습니다. (다운로드 작업이 완료되었습니다.)

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

6. setRequestHeader(): POST가 데이터를 전송할 때 HTTP 헤더를 추가한 다음 전송(데이터)하는 데 사용됩니다. GET이 정보를 보낼 때 데이터 형식에 주의하세요. URL과 같은 매개변수를 직접 추가하세요. ?a=a1&b=b1 .

네이티브 js에서 Ajax를 구현하는 방법

관련 기사