Ajax中對於與禁止緩衝的兩種方式

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在利用Ajax進行頁面某一部分進行非同步重新整理的時候，經過抓包，可以發現一個問題就是：如果表單的內容毫無變化，它並未向伺服器發出請求，而是向瀏覽器緩衝發送的請求，從而提取的內容，這是瀏覽器的一種內部預設機制，但是有時候，我們不需要這樣做，需要的是每次都是向伺服器發送請求，進過學習，發現有兩種方式可以實現禁止緩衝：

1：發送請求的同時發送一個動態資料，所謂動態，就是一直變化，例如Date（）；這樣每次發送的請求就“不一樣”，從而間接的實現了禁止緩衝，以下是一個例子：

var url = "02.php?mytime = "+new Date()+"&usename="+$("usename").value;

2：就是直接在返回資料的頁面添加一句禁止緩衝的兩條語句，這個是對資料全部禁止緩衝：

header("Content-Type: text/xml; charset=utf-8");
header("Cache-Control: no-cache");

說明一下：第一句並不是禁止緩衝，而是提示以UTF-8對的編碼方式返回資料，一般情況下兩者需要結合在一起，還有要注意的一點就是上面的引號不可以放在中間，至少在我的編輯器裡面是這樣，不是道上面原因，所以個人建議放在靠左位置最為安全

以下是我的一份執行個體代碼（包含兩份PHP檔案，一份為發送，一份為接收）

發送頁面：

<html><head><title>頁面1</title><meta charset = "UTF-8"/><script type = "text/javascript">function getXmlHttpobject(){var xmlHttpRequest;//根據不同瀏覽器（IE和非IE分別使用不同的方法）if(window.ActiveXobject){/*window.alert("是IE瀏覽器");*/xmlHttpRequest = new ActiveXobject("Microsoft.XMLHTTP");//IE特有的}else{xmlHttpRequest = new XMLHttpRequest();//非IE的方法}return xmlHttpRequest;}var myXmlHttpRequest;function checkName(){myXmlHttpRequest = getXmlHttpobject(); //建立一個getHttpRequest（Ajax）對象**********第一條線****if(myXmlHttpRequest){  //如果有傳回值，說明串連成功，否則不成功/*window.alert("建立ajax引擎成功");*//*var url = "02.php?mytime = "+new Date()+"&usename="+$("usename").value;*//*上面是禁止讀取緩衝的一種方式*//*var url = "02.php?usename="+$("usename").value;*/var url = "02.php";var data = "usename="+$("usename");/*window.alert(url);*/myXmlHttpRequest.open("post",url,true);/*必須要加的一句話*/myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");myXmlHttpRequest.onreadystatechange = chuli;/*myXmlHttpRequest.send(null); */                           //發送  //***************第二條線****myXmlHttpRequest.send(data);                            //發送  //***************第二條線****}else{window.alert("建立失敗。。");}}function chuli(){/*window.alert("處理函數被調用");*/if(myXmlHttpRequest.readyState == 4){ //取回值，根據返回的文本/*window.alert("伺服器返回"+myXmlHttpRequest.responseText);*///三號線返回//************第三條線***$("myres").value = myXmlHttpRequest.responseText;}}function $(id){return document.getElementById(id);}</script></head><body><form action = "???" method = "post">使用者名稱：<input type = "text" name = "usename1" id = "usename"/><input type = "button" value = "驗證使用者名稱" onclick = "checkName();"/><input type = "text" id = "myres" style = "border-width : 0px; color : red;" /><br/>使用者密碼<input type = "password" name = "password" /><br/>電子郵件<input type = "text" name = "email" /><br/><input type = "submit" value = "提交按鈕"/></form action = "???" method = "post"><form>使用者密碼<input type = "password" name = "password" /><br/>電子郵件<input type = "text" name = "email" /><br/><input type = "submit" value = "使用者註冊" /></form></body></html>

接收頁面：

<?php/**下面是瀏覽器禁止緩衝的第二種方式直接定義這裡，一定要注意引號的位置，發現引號在中間竟然出現錯誤*/header("Content-Type: text/xml; charset=utf-8");header("Cache-Control: no-cache");$usename = $_POST['usename'];      //3號線接收/*echo "使用者名稱是".$usename; *///讀取緩衝的情況一定if($usename == "xuning"){echo "使用者名稱已經存在";}else{echo "使用者名稱可以用";}?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More