Ajax encapsulation

1. Create an Ajax object XMLHttpRequest

If (window.xmlHttprequest) {XHR =new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); }Copy the code

2. Send requests to the server

1.xhr.open(method,url,async) 2.send(string); // Only string arguments are used in post requests. Otherwise, no arguments are required. xhr.open("POST","test.html",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("fname=Henry&lname=Ford"); // Post request parameters are placed in send, i.e. the request bodyCopy the code

Xhr.open () has three arguments, which are:

  • Method: Request type. GET or POST.
  • Url: the location of the file on the server;
  • Async: true or false Note: POST requests must set the format content of the request header

3. The server handles it accordingly

ResponseText gets the response data as a string.

ResponseXML gets the response data in XML form.

1. Synchronize

1. xhr.open("GET","info.txt",false); 2. xhr.send(); 3. document.getElementById("myDiv").innerHTML=xhr.responseText; // Get data to display directly on the pageCopy the code

2. Asynchronous processing

1. xhr.onreadystatechange=function() { 2. if (xhr.readyState==4 &&xhr.status==200) { 3. document.getElementById("myDiv").innerHTML=xhr.responseText; 5. 4.}}Copy the code

What is readyState?

ReadyState is an attribute of the XMLHttpRequest object that identifies the current state of the XMLHttpRequest object. ReadyState has five status values ranging from 0 to 4, each of which has a different meaning

  • 0: uninitialized — the.open() method has not been called;
  • 1: start — the.open() method has been called, but the.send() method has not;
  • 2: send — the.send() method has been called, but no response has been received;
  • 3: Receive: some response data has been received.
  • 4: Completed — all response data has been received and is ready for use on the client.

What is status?

The HTTP status code consists of three decimal digits. The first decimal digit defines the type of the status code, and the second two digits do not classify. HTTP status codes are classified into five types:

  • 1-> The server receives the request and requires the requester to continue
  • 2-> The operation was received and processed successfully
  • 3-> Redirects the field request that requires further action
  • 4-> Client error, request syntax error, or request cannot be completed
  • 5-> Server error, server processing request error

Common status codes

  • 200 The request was successfully processed

  • 204 The request was processed successfully, but no data was returned

  • 302 represents a temporary redirect.

  • 401 indicates that the request is Unauthorized and requires user authentication

  • 403 indicates that access to the requested resource was denied by the server

  • 404: The requested resource could not be found on the server. In addition, it can be used when the server rejects the request without giving a reason.

  • 500 indicates that an error occurred on the server side while executing the request. It could also be a Web application bug or some temporary glitch.

  • 503 indicates that the server is temporarily overloaded or is down for maintenance and is unable to process requests.