標籤：修改 java 狀態 bsp name 一個 pos 串連 執行
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;}?>
JavaScript使用Ajax實現非同步通訊
