What is the difference between ajax and fetch

The difference between ajax and fetch: 1. The development architecture of ajax based on native XHR is not clear, and fetch uses Promise’s asynchronous processing mechanism, which is simpler to use than ajax; 2. ajax uses the XMLHttpRequest object to request data, and fetch is only global A way to measure the window.

The operating environment of this article: windows7 system, javascript1.8.5&&html5 version, Dell G3 computer.

What is the difference between ajax and fetch

1. The difference between ajax and fetch:

(1), ajax uses the XMLHttpRequest object to request data, and fetch is a method of window

(2), ajax is developed based on native XHR, the structure of XHR itself is not clear, and fetch is already available Alternatives

(3). Compared with ajax, fetch has a better and more convenient writing method

(4). fetch only reports errors for network requests, and treats 400 and 500 as successful requests. , need to be encapsulated to handle

(5), fetch has no way to natively monitor the progress of the request, and XHR can

2.ajax usage

because Its native writing method is very useless, so most of them will be encapsulated, which may lead to many people not being able to write an ajax request by themselves. They all use JQuery or Axios to request data.

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

Such a request is sent out. It's very troublesome. You have to write so many lines of code to send a simple request. Of course you won't write it like this in actual development, otherwise the code will be redundant and readable. Use promise to encapsulate it

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);
    }
}

Code comments:

1.open(method, url, async) method required Three parameters:

method: The method used to send the request (GET or POST); compared with POST, GET is simpler and faster, and can be used in most cases; however, in the following In this case, please use POST request:

①Unable to use cache files (update files or databases on the server)
②Send a large amount of data to the server (POST has no data volume limit)
③Send a message containing When user input of unknown characters, POST is more stable and reliable than GET

url: Specifies the URL of the server-side script (the file can be any type of file, such as .txt and .xml, or a server script file , such as .asp and .php (can perform tasks on the server before returning the response));

async: Specifies that the request should be processed asynchronously (true) or synchronously (false); true is when Execute other scripts while waiting for the server response, and process the response when the response is ready; false means wait for the server response before executing.

2.send() method can send the request to the server.

3.onreadystatechange: There is a function that handles the server response. Whenever readyState changes, the onreadystatechange function will be executed.

4.readyState: Stores the status information of the server response.

0: The request is not initialized (the proxy is created, but the open() method has not been called)
1: The server connection has been established (the open method has been called)
2: The request has been received (send The method has been called, and the header and status are available)
3: The request is being processed (downloading, the responseText attribute already contains part of the data)
4: The request has been completed, and the response is ready (the download operation has Completed)

5.responseText: Get the response data in string form.

6.setRequestHeader(): When POST transmits data, it is used to add HTTP headers, then send(data), pay attention to the data format; when GET sends information, just add parameters directly to the url, such as url?a =a1&b=b1.

3.fetch usage

1. The first parameter is the URL
2. The optional second parameter can control different init objects
3. Use the promise object in js

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) => {
                   
       })
   });

All IE browsers will not support the fetch() method, and the server will not reject when returning status code 400 500

【 Related tutorial recommendations: AJAX video tutorial】

The above is the detailed content of What is the difference between ajax and fetch. For more information, please follow other related articles on the PHP Chinese website!