AJAX學習(1)

基礎確認：HTML、CSS、JavaScript

AJAX可以：

1. 不刷新頁面更新網頁
2. 在頁面載入後從伺服器請求數據
3. 在頁面載入後從伺服器接收數據
4. 在後臺向伺服器發送數據   

Ajax 的核心是 XMLHttpRequest 對象,用於和伺服器交換數據。

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

非同步和同步的區別

  非同步請求就當發出請求的同時，瀏覽器可以繼續做任何事，Ajax發送請求並不會影響頁面的載入與用戶的操作，相當於是在兩條線上，各走各的，互不影響。一般預設值為true。非同步請求可以完全不影響用戶的體驗效果，無論請求的時間長或者短，用戶都在專心的操作頁面的其他內容，並不會有等待的感覺。

  同步請求即是當前發出請求後，瀏覽器什麼都不能做，必須得等到請求完成返回數據之後，才會執行後續的代碼，相當於是排隊，也就是說，當JS代碼載入到當前ajax的時候會把頁面里所有的代碼停止載入，頁面處於一個假死狀態，當這個ajax執行完畢後才會繼續運行其他代碼頁面解除假死狀態（即當ajax返回數據後，才執行後面的function）。

一般建議使用post方式，get方式有概率獲取到的是緩存裡面的結果

//創建 XMLHttpRequest 對象的語法
variable=new XMLHttpRequest();
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

當然也可以避免這個情況， 在URL 添加一個唯一的 ID既可以避免

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

 get和post發送帶信息的區別

//get
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
//post
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
//設置請求頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post內容，鍵值對，& 符號分割
xmlhttp.send("fname=Henry&lname=Ford");

 現在基本上都不用這種原生的ajax了，框架內的更好用

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText 屬性

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字元串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

XMLHttpRequest 對象的三個重要的屬性：

本文來自博客園，作者：Aons謙，轉載請註明原文鏈接：https://www.cnblogs.com/Aons0812/p/16539594.html