Use ajax to communicate with the server to achieve Asynchronous Communication

Source: Internet
Author: User

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("

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.