快捷導(dǎo)航

JavaScript Ajax實現(xiàn)異步通信

更新時間：2016年12月14日 15:03:10 作者：Acmera

這篇文章主要為大家詳細介紹了JavaScript Ajax實現(xiàn)異步通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、瀏覽器與服務(wù)器的同步和異步通信

1.同步：是阻塞的，瀏覽器在向服務(wù)器發(fā)送請求之后一直等待服務(wù)器的響應(yīng)，而沒有做其他事情。
2.異步：非阻塞的，瀏覽器向服務(wù)器發(fā)送請求之后，繼續(xù)執(zhí)行其他代碼，知道服務(wù)器響應(yīng)，瀏覽器中斷當(dāng)前的任務(wù)，處理服務(wù)器響應(yīng)。

二、沒有Ajax之前瀏覽器是通過iframe來實現(xiàn)異步刷新

1.iframe標(biāo)簽：iframe標(biāo)簽通過src連接到一個頁面，其實就是將需要實現(xiàn)異步刷新的內(nèi)容使用
iframe標(biāo)簽包裹，

A.對iframe實現(xiàn)整個頁面刷新，其實是通過刷新一個頁面的子頁面來實現(xiàn)異步刷新；

a.主頁面代碼：

<div>通過實現(xiàn)子頁面刷新來實現(xiàn)異步刷新</div>
<iframe src="../testphp/data.php" frameborder="0"></iframe>

b.php頁面代碼：

<?php
  echo 1;
?>

B.通過在刷新子頁面的同時在子頁面做一些操作來訪問父頁面元素并且修改該元素的內(nèi)容

a.主頁面代碼：

<div id="refreshTarget"></div>
<form action="../php/data.php" method="post" target="targetIframe">
<input type="submit" value="提交">
</form>
<iframe name="targetIframe" frameborder="0">iframe</iframe>

b.php頁面代碼：

<?php
  echo 1;
?>
<script type="text/javascript">
  parent.document.querySelector('#refreshTarget').innerHTML = '刷新成功';
</script>

三、Ajax實現(xiàn)異步刷新

1.使用get方法來發(fā)送請求：

/**
 * 使用ajax get方式來驗證用戶名密碼是否正確
 * 1.區(qū)別于表單，我們需要自己拼接查詢字符串，不是表單提交，可
 * 以不為表單添加name屬性
 * 2.將數(shù)據(jù)放在查詢字符串中傳到請求的頁面，然后頁面獲得數(shù)據(jù)進
 * 行操作，然后對前端返回響應(yīng)數(shù)據(jù)，解析數(shù)據(jù)，刷新
 */
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');
  /* 實例化XMLHttpResquest*/
  var xhr = new XMLHttpRequest();

  /* 監(jiān)控xhr對象的狀態(tài),只要xhr.readyState值改變就會觸發(fā)事件由alert彈出框的值可以知道
    a.以下xhr.readyState值為4的時候表示請求響應(yīng)結(jié)束，數(shù)據(jù)接收完畢并且可以使用
    b.xhr.status值為200表示請求成功
  */
  xhr.onreadystatechange = function() {
    alert(1);
    if(xhr.readyState == 4) {
      if(xhr.status == 200){
        var data = xhr.responseText;
        if(data == 1) {
          target.innerHTML = '驗證成功';
        }else if(data == 2) {
          target.innerHTML = '驗證失敗';
        }
      }
    }
  }

  /* 打開請求*/
  var url = '../testphp/inspector.php?username='+nameValue + '&password='+ 
  passValue;

  xhr.open('get',url,true); // xhr.readyState = 1;

  /* 發(fā)送請求*/
  xhr.send(null); // xhr.readyState = 2;
  alert(2);
}

2.使用post方法來發(fā)送請求：

/**
 * 使用ajax post方式來驗證用戶名密碼是否正確
 * 1.區(qū)別于表單，我們需要自己拼接查詢字符串，不是表單提交，可
 * 以不為表單添加name屬性
 * 2.將數(shù)據(jù)放在查詢字符串中傳到請求的頁面，然后頁面獲得數(shù)據(jù)進
 * 行操作，然后對前端返回響應(yīng)數(shù)據(jù)，解析數(shù)據(jù)，刷新
 * 3.區(qū)別于ajax,get方法就是數(shù)據(jù)是放在send發(fā)送不是添加到查詢字符串
 */
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');
  /* 實例化XMLHttpResquest*/
  var xhr = new XMLHttpRequest();

  /* 監(jiān)控xhr對象的狀態(tài),只要xhr.readyState值改變就會觸發(fā)事件由alert彈出框的值可以知道
    a.以下xhr.readyState值為4的時候表示請求響應(yīng)結(jié)束，數(shù)據(jù)接收完畢并且可以使用
    b.xhr.status值為200表示請求成功
  */
  xhr.onreadystatechange = function() {
    alert(1);
    if(xhr.readyState == 4) {
      if(xhr.status == 200){
        var data = xhr.responseText;
        if(data == 1) {
          target.innerHTML = '驗證成功';
        }else if(data == 2) {
          target.innerHTML = '驗證失敗';
        }
      }
    }
  }

  /* 打開請求*/
  var url = '../testphp/inspector.php?';

  xhr.open('post',url,true); // xhr.readyState = 1;

  /* 修改請求頭模擬from表單的post提交,
  a.設(shè)置Content-type可以使得在php頁面中$_POST[‘key']的方式來獲取對應(yīng)的值，不然的話必
  須在$HTTP_RAW_POST_DATA對象中獲取
  b.設(shè)置'Content-type'既是使用類似表單方式提交數(shù)據(jù)，所以一下必須對send發(fā)送的數(shù)據(jù)序列
  化為‘name=name&value=value'的形式*/
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

  var data = 'username='+nameValue+'&password='+passValue;

  /* 發(fā)送請求*/
  xhr.send(data); // xhr.readyState = 2;
}

請求的php頁面代碼

<?php
/* 設(shè)置響應(yīng)數(shù)據(jù)的內(nèi)容格式，和字符集*/
header('Content-type:text/html;charset=utf-8');

/*使用表單的post請求php頁面中可以通過$_POST來獲取*/
$username = $_POST['username'];
$password = $_POST['password'];

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

?>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: