Use ajax to communicate with the server to achieve Asynchronous Communication

Ajax = Asynchronous JavaScript and XML. Ajax is a technology used to create fast dynamic web pages. By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage. If you need to update the content of a traditional web page (without Ajax), you must reload the entire web page.

　　XMLHTTPRequest object

　　　　All modern browsers support XMLHttpRequest objects (ie5 and IE6 use activexobject), and XMLHttpRequest is used to exchange data with the server in the background. All modern browsers (IE7 +, Firefox, chrome, Safari, and opera) have built-in XMLHttpRequest objects. To handle all modern browsers, including ie5 and IE6, check whether the browser supports XMLHttpRequest objects. If yes, create an XMLHTTPRequest object. If not, activexobject is created. The Code is as follows:

1 var xmlhttp;2 if (window.XMLHttpRequest)3   {// code for IE7+, Firefox, Chrome, Opera, Safari4   xmlhttp=new XMLHttpRequest();5   }6 else7   {// code for IE6, IE58   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");9   }

　　Send a request to the server

　　　　To send requests to the server, use the open () and send () Methods of the XMLHTTPRequest object:

1 XMLHTTP. Open ("get", "test1.txt", true); // get indicates the request method. The second parameter is the request location, and the third parameter indicates whether the request is asynchronous.
2 XMLHTTP. Send (); // The send () function indicates that the request is sent to the server. When the request method is post, the parameter

Note: To avoid caching results, add a random number math. Random () after the URL ().

To post data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the send () method:

1 xmlhttp.open("POST","ajax_test.asp",true);2 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");3 xmlhttp.send("fname=Bill&lname=Gates");

　　Server Response

　　　　To obtain a response from the server, use the responsetext or responsexml attribute of the XMLHTTPRequest object. The former obtains the response data in string format and the latter or XML format.

　　Onreadystatechange event

　　　　When a request is sent to the server, we need to execute some response-based tasks. When the readystate changes, the onreadystatechange event is triggered. The readystate attribute contains the status information of XMLHttpRequest. The onreadystatechange attribute stores functions (or function names). This function is called whenever the readystate attribute changes. The readystate contains the XMLHttpRequest state. Changes from 0 to 4: 0: the request is not initialized; 1: The server connection has been established; 2: The request has been received; 3: The request is being processed; 4: The request has been completed, the response is ready. In the status attribute, "200" indicates "OK", and "404" indicates that the page is not found.

In the onreadystatechange event, we specify the tasks executed when the server responds to the prepared tasks.

1 xmlhttp.onreadystatechange=function()2   {3   if (xmlhttp.readyState==4 && xmlhttp.status==200)4     {5     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;6     }7   }

The following is a case of Ajax asynchronous communication: (I hope that after you click "load all", the page will load all the images in the database)

 1 <script type="text/javascript"> 2 function loadMorePic(){ 3     var xmlhttp; 4     if (window.XMLHttpRequest) 5     {// code for IE7+, Firefox, Chrome, Opera, Safari 6         xmlhttp=new XMLHttpRequest(); 7     } 8     else 9     {// code for IE6, IE510         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");11     }12     xmlhttp.onreadystatechange=function()13     {14         if (xmlhttp.readyState==4 && xmlhttp.status==200)15         {16             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;17         }18     }19     xmlhttp.open("POST","123456.jsp",true);20     xmlhttp.send();21 }22 </script>

HTML section:

1 <Div id = "mydiv"> </div> 2 <a style = "color: Blue" onclick = "loadmorepic ()"> load all </a>

Then, you only need to query all the image information in the database on the 123456. jsp page and return the information to the original page using out. Print ~~

1 out.print("