Recently in the system to learn the basic knowledge of JavaScript, this article explains the implementation of Ajax. Start with the code for the native implementation:

Function createXHR(){if(typeof XMLHttpRequest! = "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject ! = "undefined"){var versions = [" MSxml2.xmlhttp. 6.0", "msxml2.xmlhttp. 3.0"," msxml2.xmlhttp "], I, len; for(i = 0, len = versions.length; i<len; i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch(ex){} } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("No XHR object available"); Var XHR = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert("Request was unsuccessful:" + xhr.status); }}}; xhr.open("get","example.php",true); // Start the request for xhr.send(null); // Send the requestCopy the code

About the open ()

It accepts three parameters. The first parameter is the type of the request, including get and POST, which will be explained later. The second argument is the requested URL; The third parameter is asynchrony. True indicates asynchrony.

About the send ()

One argument can be accepted as the data to be sent to the request body. If you don’t need to send data, write NULL (for browser compatibility).

About the readyState

In an asynchronous request, you need to view the status of the response to determine the next operation. This is where readyState comes in handy. It has five values:

  • 0: not initialized. The open() method has not been called;
  • 1: starts. The open() method has been called, but the send() method has not been called;
  • 2: send. The send() method has been called, but no response has been received;
  • 3: Receive. Partial response data has been received.
  • 4: Done. All response data has been received and is ready for use on the client.

So responseText, responseXML

These two property values are the response data with readyState of 4 above. The two attributes have different values depending on the format of the response data. ResponseText represents the text. The other represents an XML DOM document.

About the status

This property represents the HTTP status code. See another article on HTTP status codes for more information about common status codes

HTTP header information

HTTP request type

There are eight HTTP request types. Specific as follows:

  • OPTIONS: Returns HTTP request methods supported by the server for a specific resource. You can also test the functionality of the server by sending ‘*’ requests to the Web server.
  • HEAD: Asks the server for a response that matches the GET request, except that the response body will not be returned. This method allows you to retrieve the meta information contained in the response header without having to transfer the entire response content.
  • GET: sends a request to a specific resource.
  • POST: Submits data to a specified resource for processing requests (such as submitting a form or uploading a file). The data is contained in the request body. POST requests may result in the creation of new resources and/or the modification of existing resources.
  • PUT: Uploads the latest content to the specified location.
  • DELETE: requests the server to DELETE the resource identified by request-uri.
  • TRACE: displays the requests received by the server for testing or diagnosis.
  • CONNECT: reserved in HTTP/1.1 for proxy servers that can pipe connections. The most common are GET and POST requests. Get requests are mainly used to query certain information from the server. Its string arguments can be appended to the end of the URL. A common mistake with GET requests is that the string format of the query is incorrect. The name and value of each parameter in the query string must be encoded using encodeURIComponent(). Post requests are mainly used to send data to the server that should be saved. The amount of data that can be transferred is larger than get.