JavaScript uses Ajax for asynchronous communication

Source: Internet
Author: User

JavaScript uses AJAX for asynchronous communication one, browser-to-server synchronization and asynchronous communication 1. Synchronization: is blocked, the browser waits for the server's response after sending a request to the server, without doing anything else. 2. Asynchronous: Non-blocking, after the browser sends a request to the server, continue to execute other code, get the server response, the browser interrupts the current task, processing the server response.
Two Without Ajax before the browser is an IFRAME to implement the asynchronous refresh 1.iframe Tags: iframe tags connected to a page via SRC, in fact, will need to implement the asynchronous flush content using the IFRAME label package A. The entire page refresh of the IFRAME is done by refreshing a page's sub-page to Implement asynchronous refresh; a. Main Page code:<div> asynchronous Refresh by implementing a child page refresh </div><iframe src= ". /testphp/data.php "frameborder=" 0 "></iframe>b.php page code: <?php echo 1;? >
B. Access the parent page element and modify the content of the element by doing some action on the child page while the child page is refreshed. Main Page code: <div id= "Refreshtarget" ></div><form action= ". /php/data.php "method=" post "target=" Targetiframe "><input type=" Submit "value=" Submit "></form>< iframe name= "targetiframe" frameborder= "0" >iframe</iframe>b.php page code: <?php echo 1;? ><script type= "Text/javascript" > Parent.document.querySelector (' #refreshTarget '). InnerHTML = ' refresh succeeded '; </ Script>
Third, AJAX implementation asynchronous refresh 1. Use the Get method to send requests:/** * uses Ajax get methods to verify that the user name password is correct  * 1. Unlike forms, we need to splice query strings ourselves, not form submissions, but  * Do not add the Name property to the form  * 2. Place the data in the query string into the requested page, then the page gets the data into the  * line operation, then returns the response data to the front end, parses the data, refreshes the  */var submit = Document.queryselector (' #submit '); Submit.onclick = function () {  var namevalue = Document.queryselector (' # Username ') .value;  var passvalue = document.queryselector (' #password ') .value;  var target = Document.queryselector (' #refreshTarget '); /* Instantiation xmlhttpresquest*/  var xhr = new XMLHttpRequest (); /* Monitor the state of the XHR object as long as the xhr.readystate value changes to the event triggered by the alert popup value can be known     a. The following xhr.readystate value of 4 indicates the end of the request response, the data is received and can be used     B.xhr.status value of 200 indicates successful request   */  Xhr.onreadystatechange = function () {    alert (1);    if (xhr.readystate = = 4) {      if (xhr.status = =) {        var data = Xhr.resp onsetext;        if (data = = 1) {          target.innerhtml =' Verified success ';       }else if (data = = 2) {          target.innerhtml = ' verification failed '; &nbsp ;      }     }   } } /* Open request */  var url = '. /testphp/inspector.php?username= ' +namevalue + ' &password= ' +   passvalue;  xhr.open (' Get ', url, true); Xhr.readystate = 1; /* Send request */  xhr.send (NULL); Xhr.readystate = 2;  alert (2);} 2. Use the Post method to send the request:/** * uses Ajax post to verify that the user name password is correct  * 1. Unlike forms, we need to splice the query string ourselves, not form submissions,  * to add the Name property to the form  * 2. Put the data in the query string to the requested page, then the page gets the data into the  * row operation, then returns the response data to the front end, parses the data, refreshes the  * 3. Unlike Ajax, The Get method is that the data is placed in send sent not to the query string  */var submit = Document.queryselector (' #submit '); Submit.onclick = function () {   var namevalue = document.queryselector (' #username ') .value;  var passvalue = Document.queryselector (' # Password ') .value;  var target = document.queryselector (' #refreshTarget '); /* Instantiation xmlhttpresquest*/  var xhr = new XMLHttpRequest (); &NBSP;  /* Monitor the state of the XHR object as long as the xhr.readystate value changes to trigger the event by the value of the alert popup to know     A. The following Xhr.readystate value of 4 indicates the end of the request response, the data has been received and can be used     B.xhr.status value of 200 to indicate a successful request   */  Xhr.onreadystatechange = function () {    alert (1);    if (xhr.readystate = = 4) {      IF (Xhr.status = = 200) {        var data = xhr.responsetext;        if (data = = 1) {      & nbsp   target.innerhtml = ' verification successful ';       }else if (data = = 2) {          Targe t.innerhtml = ' validation failed ';       }     }   } } /* Open Request */  var url = '.. /testphp/inspector.php? ';   Xhr.open (' post ', url,true); Xhr.readystate = 1; /* Modify the request header to simulate a POST submission from the form,  a. Set Content-type to get the corresponding value in the PHP page by $_post[' key ', otherwise   need to get   B in the $http_raw_post_data object. Setting ' Content-type ' is both the way to submit data using a similar form, so the sequence of data sent by send must be   ' Name=name The form of &value=value '*/  xhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');  var data = ' username= ' + Namevalue+ ' &password= ' +passvalue; /* Send request */  xhr.send (data); Xhr.readystate = 2;} The requested PHP page code <?php/* sets the content format of the response data, and the character set */header (' Content-type:text/html;charset=utf-8 '); /* Use the form's POST request PHP page can be obtained by $_post */$username = $_post[' username '); $password = $_post[' password '];if ($username = = ') Admin ' && $password = = ' 123 ') {echo 1;} else{echo 2;}? >

JavaScript uses Ajax for asynchronous communication

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.