JavaScript Ajax implements asynchronous communication _javascript techniques

JavaScript Ajax implements asynchronous communication

Synchronous and asynchronous communication between the browser and the server

1. Sync: is blocked, the browser after sending a request to the server has been waiting for the response of the server, and did not do anything else.
2. Asynchronous: non-blocking, after the browser sends the request to the server, continue to execute other code, know the server response, the browser interrupts the current task, processing the server response.

Second, no Ajax before the browser is through the IFRAME to achieve asynchronous refresh

1.iframe Tags: the iframe tag is connected to a page through SRC, in fact, it will need to implement asynchronous refresh content using
iframe Tag Package,

A. To the IFRAME to achieve the entire page refresh, in fact, by refreshing a page of the pages to achieve asynchronous refresh;

A. Home page code:

<div> implement asynchronous Refresh </div> <iframe src= by implementing subpage refresh
. /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 subpage while refreshing the child page

A. Home page code:

<div id= "Refreshtarget" ></div>
<form action= ". /php/data.php "method=" post "target=" Targetiframe ">
<input type=" Submit "value=" submitted ">
</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 Success ';
</script>

Third, the AJAX implementation of asynchronous refresh

1. Use the Get method to send the request:

/** * uses the Ajax get method to verify that the username password is correct * 1. Unlike forms, we need to stitch our own query strings, not form submissions, but * to not add the Name property to the form * 2. Put the data in the query string to the requested page, and then the page gets the data into the * line
Operation, then return response data to the front end, parse data, refresh/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 ');

  /* instantiated xmlhttpresquest*/var xhr = new XMLHttpRequest (); /* Monitor the state of the Xhr object, as long as the xhr.readystate value changes will trigger the event by the value of the Alert pop-up box. 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
    A value of 200 indicates that the request was successful/Xhr.onreadystatechange = function () {alert (1);
        if (xhr.readystate = = 4) {if (Xhr.status = =) {var data = Xhr.responsetext;
        if (data = = 1) {target.innerhtml = ' verify success ';
        }else if (data = = 2) {target.innerhtml = ' validation failed '; * * 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:

/** * Use the Ajax Post method to verify that the username password is correct * 1. Unlike forms, we need to stitch our own query strings, not form submissions, but * to not add the Name property to the form * 2. Put the data in the query string to the requested page, and then the page gets the data into *
Row operation, and then return response data to the front end, parse the data, and Refresh * 3. The difference from the Ajax,get method is that the data is placed on 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 ');

  /* instantiated xmlhttpresquest*/var xhr = new XMLHttpRequest (); /* Monitor the state of the Xhr object, as long as the xhr.readystate value changes will trigger the event by the value of the Alert pop-up box. 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
    A value of 200 indicates that the request was successful/Xhr.onreadystatechange = function () {alert (1);
        if (xhr.readystate = = 4) {if (Xhr.status = =) {var data = Xhr.responsetext;
        if (data = = 1) {target.innerhtml = ' verify success ';
        }else if (data = = 2) {target.innerhtml = ' validation failed '; * * Open request/var url = '. /testphp/inspectoR.php? '; Xhr.open (' Post ', url,true);

  Xhr.readystate = 1; /* Modify the request header to simulate the POST submission of the From form, a. Set Content-type can make $_post[' key ' in the PHP page to get the corresponding value, otherwise you must get B in the $http_raw_post_data object. Set ' Content-type ' is used to submit data in a similar form, so the data sent by send must be serialized in the form of ' Name=name&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 form POST request PHP page can be $_post to obtain * * *
$username = $_post[' username '];
$password = $_post[' password '];

if ($username = = ' Admin ' && $password = = ' 123 ') {
  echo 1;
} Else{
  echo 2;
}

? >

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.