Sharing Ajax to create simple instance code

Time:2020-10-29

Xmlhttp is a set of API that can transmit or receive XML and other data through HTTP protocol in JavaScript, VBScript, JScript and other script languages. The most important use of xmlhttp is that it can update part of the web page without refreshing the whole page. Almost all browsers support XMLHttpRequest object, which is the core technology of Ajax Application.
JS code is as follows:

<html>
 <head>
 <title> New Document </title>
 <meta charset="utf-8">
 </head>
<script type="text/javascript">
 /**Creating an XMLHttpRequest object
 *IE7 +, Firefox, chrome, Safari, and opera all have built-in XMLHttpRequest objects
 *IE5, IE6 use ActiveX object, xmlhttp = new activexobject(“ Microsoft.XMLHTTP ""
 **/
 function createXMLHttpRequest(){
 var xmlHttp;
 if (window.XMLHttpRequest)
 {
  xmlHttp = new XMLHttpRequest();
 }else{
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlHttp.onreadystatechange = function(){
  if (xmlHttp.readyState == 4)
  {
  
  if (xmlHttp.status == 200)
  { 
   document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
  }
  }else{
  document.getElementById ("mydiv"). InnerHTML = "loading...";
  }
 };
    //Relax request to server
 xmlHttp.open("GET","test.php",true);
 xmlHttp.send();
 }
</script>
 <body>
 < input type = "button" onclick = "createxmlhttprequest()" value = "request data" / >
 <div></div>
 </body>
</html>

Explain the above JS code:
(1) . XMLHttpRequest objectWhen the request is sent to the server, the task needs to be executed. Whenever the readyState changes, the onreadystatechange event is triggered.
(2) . XMLHttpRequest objectThe readyState property of XMLHttpRequest holds the state of XMLHttpRequest (0 ~ 4).

  • 0: the request was not initialized
  • 1: Server connection established
  • 2: Request received
  • 3: Request processing
  • 4: the request has completed and the response is ready

(3) . open (method, URL, async) method: Specifies the type of request, the URL, and whether to process the request asynchronously.
(4).send(content) Send a request to the server.

The above is Ajax to create a simple example code, I hope to help you learn, you can also create Ajax simple examples yourself.