ajax是怎樣傳輸數據的?

ajax是什么鬼呢？其實不難理解，它只是一個哥們“發明”的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。

 

Web的運作原理就是：一次http請求對應一個頁面,這也是form表單提交之后會刷新頁面的原因

如果用戶停留在這個頁面中，同時發生新的HTTP請求，就必須用javascrpt發送這個新的請求，接收到數據后，在用javascript更新頁面，這樣，用戶就感覺自己仍然停留在當前的也民安，但是數據是不斷更新的

 

用javascritp寫一個完整的AJAX要注意：AJAX請求是異步執行的，也就是說，要通過回調函數獲得響應。

 

AJAX的兩種傳輸：post和get

基本步驟：

　　　　1.創建連接

　　　　2.客戶端向服務端發送數據

　　　　3.服務端向客戶端返回數據

　　　　4.客戶端接收數據完畢

html代碼

<div id="div"></div>
<input type="file" id="pic" />
<img src="" alt="" id="image" style="width:400px;height:30/>

script代碼:
    //創建一個xhr對象
    var xhr = new XMLHttpRequest();    
   
　　//請求過程中，readStatehi發生變化
   //0 - 初始狀態，
   //1 - 開始創建連接
   //2 - 客戶端向服務端發送數據
   //3 - 服務端開始想客戶端返回數據
   //4 - 客戶端接收數據完畢
       
　　xhr.onreadystatechange=function(){
       console.log(this.readyState);//1 2 3 4
   }
    
　　//請求狀態可以有另一種寫法，意義相同,表明后台已經成功返回數據
   //等同於:if（this.readyState==4）{}
　　 xhr.onload=function(){
　　　　console.log(this.responseText);

 }
 　　　//發送數據
　　　//post
　　　　var img = document.getElementById("pic");
　　　　img.onchange=function(){

　　　　　　xhr.open("post","11.14jsonData.php",true);\

　　　　　　//FormData()建立對象傳送數據

　　　　　　var formData = new FormData();
　　　　　　formData.append("title","京東方");
　　　　　　formData.append("data","2017-11-14");
　　　　　　formData.append("pic",img.files[0]);//選中的第一張圖片
　　　　　　//2.發送數據:send()方法
　　　　　　xhr.send(formData);
　　　　}

　　　//get
　　　xhr.open("GET","11.14jsonData.php?action=1&data=abc",true);
　　　xhr.send(null);