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

차이점: 1. fetch는 기본적으로 요청 진행 상황을 모니터링할 수 없지만 ajax는 기본 XHR을 기반으로 개발되어 모니터링할 수 있습니다. 2. ajax에 비해 fetch는 더 좋고 편리한 작성 방법을 제공합니다. 네트워크 요청에 대한 오류는 400과 500을 모두 성공적인 요청으로 처리하지만 ajax는 그렇지 않습니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

ajax와 fetch의 차이점:

(1), ajax는 XMLHttpRequest 객체를 사용하여 데이터를 요청하는 반면, fetch는 창의 방법입니다

(2), ajax는 기본 XHR을 기반으로 개발됩니다. XHR 자체는 구조가 명확하지 않으며 이미 fetch에 대한 대안이 있습니다

(3). ajax에 비해 fetch는 더 좋고 편리한 작성 방법을 가지고 있습니다

(4) fetch는 네트워크 요청에 대한 오류만 보고합니다. 400 및 500을 처리하려면 요청을 캡슐화해야 합니다

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

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) 이 메서드에는 세 가지 매개 변수가 필요합니다.

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

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

  3알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST가 GET보다 안정적이고 신뢰할 수 있습니다

url: 서버 측 스크립트의 URL을 지정합니다(파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 .asp 및 .php와 같은 서버 스크립트 파일일 수 있음(서버에서 작업을 수행할 수 있음).
async: 요청을 비동기식(true) 또는 동기식(false)으로 처리하도록 지정합니다. true는 서버 응답을 기다리는 동안 다른 스크립트를 실행하고 응답이 있을 때 응답을 처리하는 것을 의미합니다. 준비됨, false는 실행 전에 서버 응답을 기다리는 것을 의미합니다.
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에 직접 매개변수를 추가하면 됩니다. URL?a=a1&b =b1.

fetch 사용법1. 첫 번째 매개변수는 URL입니다

2. 선택적인 두 번째 매개변수는 다양한 init 개체를 제어할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!