JS——AJAX
阿新 • • 發佈：2017-10-31
win 觸發 情況下 class safari 點擊 height 情況 ext
向服務器發送請求如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：Open方法了有兩種請求方式——get和post
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：
1、無法使用緩存文件（更新服務器上的文件或數據庫）
2、向服務器發送大量數據（POST 沒有數據量限制）
3、發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
註釋：send(string)方法只有當時post請求時才會傳入參數
onreadystatechange 事件：當請求被發送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：
| 屬性 | 描述 |
| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status |
200: "OK" 404: 未找到頁面 |
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
GET請求：
<body>
<button onclick="loadXMLDoc()">點擊發送異步請求</button>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open(
PSOT請求：
<body>
<button onclick="fs()">點擊發送異步請求</button>
<script>
var xmlHttp;
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function getOkPost() {
if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
// 本地提示：加載中/處理中
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var d = xmlHttp.responseText; // 返回值
// 處理返回值
alert(d);
}
}
function fs() {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert(‘您的瀏覽器不支持AJAX！‘);
return;
}
var url = "info.ashx";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "name=wqx&age=10"
xmlhttp.send(data);
xmlHttp.onreadystatechange = getOkPost;//發送事件後，收到信息了調用函數
}
</script>
</body>
參考：W3C
JS——AJAX