Shulou(Shulou.com)06/02 Report--

Editor to share with you what are the differences between ajax and fetch, I believe that most people still do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Differences: 1. Fetch has no way to natively monitor the progress of requests, while ajax is based on native XHR development and can be monitored; 2. Compared with ajax, fetch has a better and more convenient way to write; 3. Fetch only reports errors on network requests, and 400,500 is regarded as successful requests, but ajax will not.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The difference between ajax and fetch:

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

(2) ajax is based on native XHR development, and the architecture of XHR itself is not clear, so there is an alternative to fetch.

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

(4) fetch only reports errors for network requests, and 400500 is treated as successful requests, which need to be encapsulated and processed.

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

Ajax usage

Because its original way of writing is very creepy, so it is mostly encapsulated, resulting in many people may not write their own ajax request. JQuery or Axios are used to request data.

Var xhr= new XMLHttpRequest (); / / New XMLHttpRequest object xhr.onload= function () {/ / request completion console.log (this.responseText);} / / send request: xhr.open ('GET',' / user'); xhr.send ()

Such a request was sent out. It's troublesome to send a simple request and write so many lines of code. Of course, this will not be written in the actual development, otherwise the code will be redundant and poor readability, so it will be encapsulated in promise.

Var Ajax = {get: function (url,fn) {/ / XMLHttpRequest object is used to exchange data with the server in the background var xhr=new XMLHttpRequest (); xhr.open ('GET',url,false) Xhr.onreadystatechange=function () {/ / readyState==4 indicates that the request has been completed if (xhr.readyState==4) {if (xhr.status==200 | | xhr.status==304) {console.log (xhr.responseText); fn.call (xhr.responseText);} xhr.send () }, / / data should be in the string format of 'axia1roombailb1'. In jq, if data is an object, the object will be automatically converted to this string format post: function (url,data,fn) {var xhr=new XMLHttpRequest (); xhr.open (' POST',url,false) / / add http header, content encoding type xhr.setRequestHeader ('Content-Type','application/x-www-form-urlencoded') when sending information to server; 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. The open (method, url, async) method requires three parameters:

Method: the method used to send the request (GET or POST); GET is simpler and faster than POST, and can be used in most cases; however, use POST requests in the following cases:

① cannot use cache files (update files or databases on the server)

② sends a large amount of data to the server (POST has no data limit)

When ③ sends user input containing unknown characters, POST is more stable and reliable than GET.

Url: specifies the URL of the server-side script (this file can be any type of file, such as .txt and .xml, or server script files, such as .asp and .php (can perform tasks on the server before returning the response))

Async: specifies that requests should be processed asynchronously (true) or synchronously (false); true executes other scripts while waiting for the server's response, and processes the response when the response is ready; false waits for the server's response before execution.

2. The send () method sends the request to the server.

3. Onreadystatechange: there is a function that handles the server's response, and whenever the readyState changes, the onreadystatechange function will be executed.

4. ReadyState: the status information of the server response is stored.

0: the request is not initialized (the proxy is created, but the open () method has not been called)

1: the server connection is established (the open method has been called)

2: the request has been received (the send method has been called, and the header and status are available)

3: request processing (responseText attribute already contains some data in download)

4: the request is completed and the response is ready (download operation completed)

5.responseText: get the response data as a string.

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

Fetch usage

1. The first parameter is URL

2. The optional second parameter can control different init objects.

3. Use the promise object in js

Var arr1 = [{name: "", detail: "123"}] Fetch ("url", {method: "post", headers: {/ / set the request header information "Content-Type": "application/json" / / Cross-domain may add / / "Accept": "allication/json"} / / serialize the arr1 object into a json string body: JSON.stringify (arr1) / / pass json data} to the server) .then (function (resp) {resp.json () .then ((data) = > {})}))

All IE browsers will not support the fetch () method, and the server will not reject when the status code 400500 is returned.

The above is all the content of the article "what's the difference between ajax and fetch". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.