JavaScript Ajax實現非同步通訊_javascript技巧

JavaScript Ajax實現非同步通訊

一、瀏覽器與伺服器的同步和非同步通訊

1.同步：是阻塞的，瀏覽器在向伺服器發送請求之後一直等待伺服器的響應，而沒有做其他事情。
2.非同步：非阻塞的，瀏覽器向伺服器發送請求之後，繼續執行其他代碼，知道伺服器響應，瀏覽器中斷當前的任務，處理伺服器響應。

二、沒有Ajax之前瀏覽器是通過iframe來實現非同步重新整理

1.iframe標籤：iframe標籤通過src串連到一個頁面，其實就是將需要實現非同步重新整理的內容使用
iframe標籤包裹，

A.對iframe實現整個頁面重新整理，其實是通過重新整理一個頁面的子頁面來實現非同步重新整理；

a.首頁面代碼：

<div>通過實現子頁面重新整理來實現非同步重新整理</div><iframe src="../testphp/data.php" frameborder="0"></iframe>

b.php頁面代碼：

<?php  echo 1;?>

B.通過在重新整理子頁面的同時在子頁面做一些操作來訪問父頁面元素並且修改該元素的內容

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實現非同步重新整理

1.使用get方法來發送請求：

/** * 使用ajax get方式來驗證使用者名稱密碼是否正確 * 1.區別於表單，我們需要自己拼接查詢字串，不是表單提交，可 * 以不為表單添加name屬性 * 2.將資料放在查詢字串中傳到請求的頁面，然後頁面獲得資料進 * 行操作，然後對前端返迴響應資料，解析資料，重新整理 */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();  /* 監控xhr對象的狀態,只要xhr.readyState值改變就會觸發事件由alert彈出框的值可以知道    a.以下xhr.readyState值為4的時候表示請求響應結束，資料接收完畢並且可以使用    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;  /* 發送請求*/  xhr.send(null); // xhr.readyState = 2;  alert(2);}

2.使用post方法來發送請求：

/** * 使用ajax post方式來驗證使用者名稱密碼是否正確 * 1.區別於表單，我們需要自己拼接查詢字串，不是表單提交，可 * 以不為表單添加name屬性 * 2.將資料放在查詢字串中傳到請求的頁面，然後頁面獲得資料進 * 行操作，然後對前端返迴響應資料，解析資料，重新整理 * 3.區別於ajax,get方法就是資料是放在send發送不是添加到查詢字串 */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();  /* 監控xhr對象的狀態,只要xhr.readyState值改變就會觸發事件由alert彈出框的值可以知道    a.以下xhr.readyState值為4的時候表示請求響應結束，資料接收完畢並且可以使用    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.設定Content-type可以使得在php頁面中$_POST[‘key']的方式來擷取對應的值，不然的話必  須在$HTTP_RAW_POST_DATA對象中擷取  b.設定'Content-type'既是使用類似表單方式提交資料，所以一下必須對send發送的資料序列  化為‘name=name&value=value'的形式*/  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  var data = 'username='+nameValue+'&password='+passValue;  /* 發送請求*/  xhr.send(data); // xhr.readyState = 2;}

請求的php頁面代碼

<?php/* 設定響應資料的內容格式，和字元集*/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;}?>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。