1. Introduce the Ajax

Ajax is short for Asynchronous JavaScript And XML, which makes it possible to request additional data from the server without unloading the page, resulting in a better user experience.

steps

  1. First of all, throughnew XMLHttpRequestCreate an XHR object.
  2. Data requests are made based on the GET and POST methods, and the first method to be called when using this XHR object isopen()
xhr.open("get",url,false)
Copy the code

Calling open does not actually send the request, it just starts a request ready to be sent.

  1. Called when the request is sentThe send () method
xhr.send(data); // The corresponding post method xhr.send(null); // Corresponds to the get methodCopy the code

The send method accepts one parameter as the data to be sent as the body of the request. It is best to pass NULL if you do not need to send data through the request body.

  1. If it is just a synchronous request, you can then determine the data request based on the xhr.status attribute. Status is the HTTP status code of the response. Note the special status code 304.

Most of the time we want to send asynchronous requests.

In order for the javascript code to continue executing without waiting for a response, we can detect the readyState property of the XHR object. This property represents the current active status of the request.

0: not initialized. The open() method is not called: start; Call open but not send method 2: send; Call the send method, but no response has been received. All response data is received and can be used in the web pageCopy the code

Every time the readyState changes, a ReadyStatechange event is triggered, so you can listen to this event to detect the readyState value after each change, but we'll just focus on the case where the readyState value is 4.

So specify the onReadyStatechange event handler before calling open().

function myAjax(url,method,data){ let promise = new Promise((resolve,reject) => { let xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if((xhr.status >= 200 && xhr.status < 300)||xhr.status === 304){ resolve(xhr.response) }else{ reject(new Error("error")) } } } if(method.toUpperCase() === "GET"){ let paramslist = []; For (key in data){paramslist.push(key + "=" + data[key])} let params = paramslist.join("&"); url = url + "?" + params; xhr.open("get",url,false); Xhr.send ()} if(method.toupperCase () === "POST"){xhr.open(" POST", url, false); xhr.open(" POST", url, false); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); xhr.send(data); // Use post request to put content in send}}) return promise}Copy the code

About POST Requests

When sending post data, the data is in the body and can be sent in many types of data, so the Content-type is very important in this case and directly affects how the server interprets the data you send. The GET request does not have a request entity part, and the key-value pair argument is placed at the end of the URL, so the content-Type field is not required in the request header.