AJAX/json

Ajax(Asynchronous JavaScript and XML 異步的JavaScript和XML)

AJAX是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。也就是在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

AJAX是怎麼流行起來的呢？

在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。

Google Suggest 使用 AJAX 創造出動態性極強的 web 界面：當您在谷歌的搜索框輸入關鍵字時，JavaScript 會把這些字符發送到服務器，然後服務器會返回一個搜索建議的列表。

AJAX的工作原理

<html>
<body>
   <div id="myDiv"><h3>Let AJAX change this text</h3></div>
   <button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

這樣一個簡單的頁面，一個div用來放文本信息，下面一個按鈕觸發事件；點擊這個按鈕就可以運行我們的AJAX：

<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}

AJAX XHR

什麼是 XMLHttpRequest 對象？

XMLHttpRequest 對象用於在後臺與服務器交換數據。

XMLHttpRequest 對象是開發者的夢想，他有這些優勢：

在不重新加載頁面的情況下更新網頁
在頁面已加載後從服務器請求數據
在頁面已加載後從服務器接收數據
在後臺向服務器發送數據

所有現代瀏覽器均支持XMLHttpRequest對象（IE5和IE6使用ActiveXObject）.

XMLHttpRequest用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

創建 XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

爲了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest 對象用於和服務器交換數據。

如何向服務器發送請求？

XMLHttpRequest對象有兩個方法：open()和send()：

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://xxxx:xx/xx",true);
xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。method：請求的類型；GET 或 POSTurl：文件在服務器上的位置async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。string：僅用於 POST 請求

對於請求，選擇GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

GET 請求

xmlhttp.open("GET","/url",true);
xmlhttp.send();

對於這種情況，我們請求一次，第二次請求的時候，瀏覽器可能就不回去請求了，而是直接使用緩存的結果。一般我們可以給他加一個唯一標識，加一個時間戳或者隨機數都可以；

xmlhttp.open("GET","/url?t=" + Math.random(),true); 
xmlhttp.send();

參數直接拼接到url

xmlhttp.open("GET","/url?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST請求

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要傳參數的話，使用setRequestHeader()來添加HTTP頭，然後在send()方法中寫需要發送的參數即可：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

方法	描述
setRequestHeader(header,value)	向請求添加 HTTP 頭。header: 規定頭的名稱value: 規定頭的值

服務器響應

獲取服務器的響應，使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

responseText 屬性

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

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

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

responseXML 屬性

如果來自服務器的響應是 XML，而且需要作爲 XML 對象進行解析，請使用 responseXML 屬性：

請求 books.xml 文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。0: 請求未初始化1: 服務器連接已建立2: 請求已接收3: 請求處理中4: 請求已完成，且響應已就緒
status	200: "OK"404: 未找到頁面

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

注意：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每個變化。

使用 Callback 函數

callback 函數是一種以參數形式傳遞給另一個函數的函數。

如果網站上存在多個 AJAX 任務，那麼應該爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
    
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通過 AJAX 改變內容</button>

</body>
</html>

不過我們一般都不使用原生的AJAX做請求，JQuery就爲我們封裝好了現成的方法！

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

ajax() 方法通過 HTTP 請求加載遠程數據。

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$ .ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。

參數

async 是否異步

url 請求地址

contentType 發送信息至服務器時內容編碼類型

data 發送到服務器的數據

dataType 預期服務器返回的數據類型

type 請求類型

success 請求成功回調函數

error 請求失敗回調函數

jsonp跨域原理

<button id="btn">點擊</button>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#btn').click(function(){
			var frame = document.createElement('script');
			frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
			$('body').append(frame);
		});
		
		function func(res){
			alert(res.message+res.name+'你已經'+res.age+'歲了');
		}
  </script>

同源策略：同一域名、同一端口號、同一協議

ajax只能請求同源的資源，想要引入外部的資源，請求外部的接口，需要使用到jsonp，

$.ajax({
         url:'http://localhost:8080/g',
         type:'post',
         data:{'f':'f'},
         dataType: "jsonp",
         jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認爲:callback)
         jsonpCallback:"showData",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也可以不寫這個參數，jQuery會自動爲你處理數據
         success: function(data){
        	 console.log(data);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown){
        	 console.log("服務器異常");
             alert(XMLHttpRequest.status);
             alert(XMLHttpRequest.readyState);
             alert(XMLHttpRequest.responseText);
             alert(textStatus);
             alert(errorThrown);
             console.log(textStatus); 
         }
     });

JSON

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。

數據在名稱/值對中
數據由逗號分隔
花括號保存對象
方括號保存數組

JSON 值

JSON 值可以是：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在方括號中）
對象（在花括號中）
null

JSON 對象

JSON 對象在花括號中書寫：

對象可以包含多個名稱/值對：

{ "firstName":"John" , "lastName":"Doe" }

這一點也容易理解，與這條 JavaScript 語句等價：

firstName = "John"
lastName = "Doe"

JSON 數組

JSON 數組在方括號中書寫：

數組可包含多個對象：

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

JSON 使用 JavaScript 語法

因爲 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。

通過 JavaScript，您可以創建一個對象數組，並像這樣進行賦值：

例子

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像這樣訪問 JavaScript 對象數組中的第一項：

employees[0].lastName;

返回的內容是：

Gates

可以像這樣修改數據：

employees[0].lastName = "Jobs";

AJAXjson