AJAX,異步同步

AJAX 全稱： 
Asynchronous JavaScript and XML(異步的JavaScript和 XML)。
區域重繪技術： 
解決頁面全部重繪的效率低低的問題
Ajax 核心物件： 
xmlHttpReaquest
Ajax 執行的原理： 
通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
Ajax實作了與服務器的異步通信、區域重繪頁面，這就是Ajax技術的核心所在。

Ajax 接收的資料型別為： 
字串 
XML物件
1：什么是Ajax

當萬維網開始時,網頁只包含靜態內容。客戶端和服務器之間傳輸資料都是通過form表單。在web應用程式中,客戶端通過表單提交自己輸入的資訊,服務器端的程式接受到客戶提交的表單后,根據表單的資料內容進行處理,然后把處理結果回傳給用戶,這樣就完成了一個簡單的互動。
但是這種傳輸方式有一個很大的缺陷,就是每次用戶與服務器的互動都需要重新重繪整個頁面。然而在那個網速不佳的年代。重新重繪頁面的成本時很高的,通常會導致在加載頁面時螢屏變空白
1999年,微軟公司在Internet Explorer 5中實作了XMLHttp ActiveX 控制元件。它最初是為outlook Web客戶端開發的,允許在后臺使用JavaScript異步發送資料。隨后其他瀏覽器也實作了這種技術,不過它仍然時一個相對未知的功能，很少使用
Ajax這個術語是由jesse james Garrentt 于2005年 “在Ajax ：一種新的Web應用程式方法 “一文中所創造的,他提到了Google在最近的Web應用程式中使用的技術,Ajax是一個簡介的首寫字母縮寫詞，指的是該技術在使用的程序中所涉及到的不同部分,全程：Asynchronous JavaScript and XML。
Asynchronous： 
翻譯成中文是異步的意思,當發送資料請求時,程式不必停下來等待回應。它可以繼續運行,等待回應收到時觸發事件。通過使用回呼來管理這種程序,程式能夠以有效的方式運行,避免了資料來回傳輸帶來的延遲。
JavaScript： 
利用JavaScript我們可以接受來自服務器端回傳的資料,并將這些資料實時的更新到頁面。
XML： 
最開始術語Ajax被創造時,經常用XML檔案來回傳資料。但是實際上可以發送許多不同型別的資料。到目前為止,在Ajax中最常用的是JSON,它比XML更輕量且更易于決議。JSON還具備被JavaScript原生支持的優點,所以我們可以處理JavaScript物件,而不必使用DOM方法來決議XML檔案
優點：

頁面無重繪,在頁面內與服務器通信,減少用戶等待的時間,增強了用戶體驗。
使用異步方式與服務器通信,回應速度快
可以把一些原本服務器的作業轉到客戶端,利用客戶端閑置的能力來處理，減輕了服務器和寬帶的負擔,節約空間和寬帶租用成本。
基于標準化的并廣泛支持的技術,不需要下載插件或者小程式。
缺點

無法進行操作的后退。
對搜索引擎的支持比較弱
可能會影響程式中的例外處理機制
安全問題。對一些網站的攻擊如CSRF ,XXS ,SQL 注入等不能很好的防御。
2：Ajax實作原理

使用原生的Ajax大致包括以下幾個步驟：

1：創建XMLHttpRequest物件(核心物件) 由于IE6以下的兼容性問題
2：發出HTTP請求
3：接收服務器傳回的資料
4：更新網頁資料
概括起來,就是Ajax通過原生的XMLHttpRequest物件發出HTTP請求,得到服務器回傳的資料后,再進行處理。

/**
原生態的實作Ajax代碼
第一步把Ajax發送請求的物件實體化
**/

var httpRequest;
  if(document.all){
   httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }else{
    httpRequest=new XMLHttpRequest();
  }
/**
    第二步 使用xmlHttpRequest 規定請求的型別 
    再呼叫 httpRequest.send()方法發送請求
**/
  httpRequest.open("請求的方式","請求的servlet",true)
/**
引數說明：
method：發送請求的方式。取值有GET和POST（不區分大小寫，建議使用大寫）
url：請求資源的位置路徑
async：控制是否異步處理請求。取值有true（異步）和false（同步），默認為true
**/
  //獲取服務器端回傳的資料
httpRequest.onreadtsyayechange=function(){
  //表示回應成功
  if(httpRequest.readatState==4 && httpRequest.status==200){
  //獲得服務器回傳的資料
  var msg=httpRequest.responseText;
  //把服務器回傳的json格式的字串轉換為 json物件 以方便取資料
  var student=window.eval("(+msg+)");
 $("#show").html("編號:"+student.id+"姓名:"+student.name);    
  }
}
<!--Jquery 框架的用法-->
<!-- 待頁面加載完畢執行以下函式 -->
$(function(){
  $.ajax({ 
  method:"post", <!--自動提交的方式-->
  url:"test", <!--url地址-->
  dataType:"json",<!--把服務器回傳的json格式的字串轉為json物件-->
  data: {"username":$("#username").val()},
        {"pwd":$("#pwd").val()})}<!-- 傳遞給后臺的資料 -->

    success:function(data){
    <!--需要渲染到某個標簽-->
    $("#show").html("編號:"+data.id+"姓名:"+data.name);
    }
    /**
    jquery 的三種簡寫方式
    1：簡寫
    2：uri地址
    3：回呼函式：當資料從服務器回傳來，再回過頭來呼叫該函式
    回呼函式中的引數就是服務器回傳的資料
    4：回傳資料的型別 text json jsonp
    采用鍵值對的方式將引數回傳到服務器
    **/
    $.get("test",
    {"username":$("#username").val()},
    {"pwd":$("#pwd").val()})
   })
})    
ajax：同源策略

同協議+同域名+同埠

jsonp

全稱：JSON with padding (填充式JSON或引數式JSON的簡寫) 
為了解決Ajax跨域問題 
跨域：到別的服務器請求內容

//使用jQuery 發送 jsonp 進行跨域取值
   $.ajxa({
   type:"post",
   url:"http://127.0.0.1:8080/web_two/two",
   dataType:"jsonp",
  })
Json

全稱： 
JavaScript物件表示發(JavaScript Object Notation)
JSON 是存盤和交換文本資訊的語法 類似XML 
JSON比XML更小、更快、更易決議

簡單理解： 
一種資料交換格式
json 語法： 
{} 采用鍵值對的方式進行存盤 有多個屬性用逗號隔開
將物件直接轉換為一個json格式的字串工具 
Jackson,gson,fastJson把物件轉換為一個json格式的字串 
gson Google公司把物件轉換為一個json格式的字串的一個工具
<!-- 
json物件
{ } 花括號表示一個物件
取資料： 物件名.屬性名  使用 點 運算子  簡單物件
物件中嵌套物件{屬性:值,嵌套物件的名字:{}}
-->
var person= {id:1,name:'小夏',age:20,dog:{id:10,name:'大黃'}};
<!-- 多個物件 -->
var person= {id:1,name:'小夏',age:20,
            dogs:[{id:10,name:'老大'},
            {id:11,name:'老二'},
            {id:12,name:'老幺'}]};
Mock.js介紹

1.特點

生成隨機資料 攔截Ajax請求

2.使用

1.生成隨機資料

Mock.mock( templete )
資料模板中的每個屬性由3個部分構成：屬性名 name 生成規則rule 屬性值value

"name|rule": value
說明：

屬性名和生成規則之間用豎線分隔
生成規則是可選的
const data = Mock.mock({    
// 隨機生成一個包含4個物件的陣列  
'list|4': [{       
 // 物件的id屬性名依次加1    
 'id|+1': 1,        
 // 隨機產生一個中文的姓名      
  "name": '@cname()',          
  // 隨機生成一個地址     
  addr: '@county(true)',        
   //隨機生成一個數字大小在18到30
        'age|18-30': 1,         
        // 隨機生成一個日期     
        birth: '@date()',         
        // 隨機生成一個整數，0/1，根據這個來給“男”“女”      
        gender: '@integer(0, 1)',        
        //隨機生成一個郵箱   
        email: '@EMAIL()',         
        // 在陣列中隨機找一個       
        'like|1':['看書,'運動','聽音樂'],      
        //1-100隨機生成一個保留兩位小數      
         'score|1-100.2':1,         
         // 隨機生成一個日期  
          time: "@date('yyyy-MM-dd')",        
          // 用正則匹配1開頭的11位數字的手機號     
          mobile: /^1[3-9]\d{9}$/     
          }] 
          }) 
          console.log( data );
2.攔截Ajax請求

Mock.mock( rurl, templete )

rurl表示需要攔截的URL。當攔截到匹配rurl的Ajax請求時，將根據資料模板template生成模擬資料，并作為回應資料回傳。

$.ajax({    
url: "/getStudent",    
type: "GET",    
success(msg){        
console.log( JSON.parse(msg) 
);   
 }
})
 Mock.mock(/getStudent/,{    
// 隨機生成一個包含4個物件的陣列  
'list|4': [{       
 // 物件的id屬性名依次加1    
 'id|+1': 1,        
 // 隨機產生一個中文的姓名      
  "name": '@cname()',          
  // 隨機生成一個地址     
  addr: '@county(true)',        
   //隨機生成一個數字大小在18到30
'age|18-30': 1,         
 // 隨機生成一個日期     
 birth: '@date()',         
 // 隨機生成一個整數，0/1，根據這個來給“男”“女”      
 gender: '@integer(0, 1)',        
 //隨機生成一個郵箱   
 email: '@EMAIL()',         
 // 在陣列中隨機找一個       
'like|1':['看書,'運動','聽音樂'],      
//1-100隨機生成一個保留兩位小數      
'score|1-100.2':1,         
// 隨機生成一個日期  
time: "@date('yyyy-MM-dd')",        
// 用正則匹配1開頭的11位數字的手機號     
mobile: /^1[3-9]\d{9}$/     
}] 
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/96143.html

標籤：新技術前沿

上一篇：MySQL表的屬性名是用戶和密碼，鏈接在HTML中實作登錄這種有大佬造嗎？救救孩子嗚嗚

下一篇：覺得固態硬碟不夠用