아약스와 가져오기의 차이점은 무엇입니까

ajax와 fetch의 차이점: 1. 기본 XHR을 기반으로 하는 ajax의 개발 아키텍처는 명확하지 않으며 fetch는 ajax보다 사용하기 쉬운 Promise의 비동기 처리 메커니즘을 사용합니다. 2. ajax는 XMLHttpRequest 객체를 사용하여 데이터를 요청합니다. , 가져오기는 단지 전역 창 방법입니다.

이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.

ajax와 fetch의 차이점은 무엇입니까

1. ajax와 fetch의 차이점:

(1), ajax는 XMLHttpRequest 객체를 사용하여 데이터를 요청하는 반면 fetch는 window

(2) Ajax는 기본 XHR을 기반으로 개발되었습니다. XHR 자체의 구조는 이미 명확하지 않습니다. fetch

(3) ajax에 비해 더 좋고 편리한 작성 방법이 있습니다. (4) 가져오기만 네트워크 요청에 대해 오류가 보고되고, 400과 500은 성공적인 요청으로 간주되므로 캡슐화하고 처리해야 합니다

(5) Fetch는 기본적으로 요청 진행 상황을 모니터링할 수 없지만 XHR은 가능합니다

2.ajax 사용법

네이티브이기 때문에 작성 방법이 매우 쓸모가 없으므로 대부분 캡슐화되므로 많은 사람들이 스스로 Ajax 요청을 작성하지 못할 수 있습니다. 그들은 모두 JQuery 또는 Axios를 사용하여 데이터를 요청합니다.

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象xhr.onload= function(){ //请求完成
  console.log(this.responseText);
}// 发送请求:xhr.open('GET', '/user');
xhr.send();

이러한 요청이 전송됩니다. 간단한 요청을 보내려면 너무 많은 코드 줄을 작성해야 합니다. 물론 실제 개발에서는 이렇게 작성하지 않을 것입니다. 그렇지 않으면 코드가 중복되고 읽기 쉬워집니다. promise를 사용하여 캡슐화하세요

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

코드 설명:

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

method: 요청을 보내는 데 사용되는 방법(GET 또는 POST)은 POST보다 간단하고 빠르며 대부분의 경우 작동하지만 다음 상황에서는 POST 요청을 사용하세요. 파일(서버의 파일 또는 데이터베이스 업데이트)

②대량의 데이터를 서버로 전송합니다(POST에는 데이터 용량 제한이 없습니다)

3알 수 없는 문자가 포함된 사용자 입력을 보낼 때 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: 요청이 완료되었습니다. 수신됨(전송 메소드가 호출되었으며 헤더 및 상태를 사용할 수 있음)

3: 요청이 처리 중입니다(다운로드 중, responseText 속성에 이미 데이터 일부가 포함되어 있음)

4: 요청이 완료되었으며 응답 is Ready (다운로드 작업이 완료되었습니다)

5.responseText: 문자열 형태의 응답 데이터를 얻습니다.

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

3.fetch 사용법

1. 첫 번째 매개변수는 URL입니다2. 선택적인 두 번째 매개변수는 다양한 초기화 개체를 제어할 수 있습니다3. js의 promise 개체는 사용됩니다

var arr1 = [{
   name: "haha",
   detail:"123"}];
   fetch("url", {
       method: "post",
       headers: {//设置请求的头部信息
           "Content-Type": "application/json"            //跨域时可能要加上
           //"Accept":"allication/json"
       },    //将arr1对象序列化成json字符串
       body: JSON.stringify(arr1)//向服务端传入json数据
   }).then(function(resp) {
       resp.json().then((data) => {
                   
       })
   });

모든 IE 브라우저는 fetch() 메소드를 사용하며 서버는 상태 코드 400 또는 500

을 반환할 때 거부하지 않습니다.[권장 관련 튜토리얼:

AJAX 비디오 튜토리얼

]

위 내용은 아약스와 가져오기의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!