什麼是ajax Ajax(Asynchronous JavaScript and XML),是一種可以向伺服器請求額外的數據並且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗. Ajax的核心就是XMLHttpRequest(XHR)對象.XHR為向伺服器發送請求和解析伺服器響應提供了流暢的 ...
什麼是ajax
- Ajax(Asynchronous JavaScript and XML),是一種可以向伺服器請求額外的數據並且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗.
- Ajax的核心就是XMLHttpRequest(XHR)對象.XHR為向伺服器發送請求和解析伺服器響應提供了流暢的介面.可以使用XHR對象獲取新數據,通過DOM將新數據插入到頁面.雖然名字中包含XML,但是ajax通信和數據格式無關;這種技術就是可以不用刷新就從伺服器獲取數據,但是不一定是XML數據,也可以是json.
XMLHttpRequest對象
XHR的用法
1.創建一個XMLHttpRequest對象
2.發送請求
- 1.設置請求行 xhr.open()
- 2.POST請求需要設置請求頭 xhr.setRequestHeader() POST請求頭Content-Type的值: application/x-www-form-urlencoded
- 3.設置請求體 xhr.send() get請求傳null,post根據情況
3.處理伺服器響應
- 先判斷響應狀態碼和非同步對象是否解析完畢.
伺服器返回的狀態碼 status
1xx:消息 2xx:成功 3xx:重定向 4xx:請求錯誤 5xx:伺服器錯誤非同步對象的狀態碼 readystate
0:非同步對象已經創建 1:非同步對象初始化完成,發送請求 2:接收伺服器返回的原始數據 3:數據正在解析,解析需要時間 4:數據解析完成,數據可以使用了
XML
XML的特點，出身名門，W3C制定，微軟和IBM曾經共同大力推薦過的數據格式.XML 指可擴展標記語言（Extensible Markup Language）,被設計用來傳輸和存儲數據,HTML 是設計用來表示頁面的.
- 語法規則:和HTML差不多,都是通過標記來表示的
- 特殊符號:比如<>要使用實體-轉移字元
- xml的解析需要前後臺配合:
1.後臺在返回的時候,在響應頭中設置Content-Type的值為 application/xml
2.前臺非同步對象在接收後臺數據時,記得按照xml的方式來接收,xhr.responseXML,並且它返回的是一個object對象,內容是#document
JSON
JSON(JavaScript Object Notation),出身草根，是 Javascript 的子集，專門負責描述數據格式.JSON本身是一個特殊格式的字元串,可以轉換成js對象,是網路上用來傳輸數據使用最廣泛的數據格式，沒有之一.
- 語法規則:數據以 key/value 值對錶示,數據由逗號分隔,大括弧保存對象,中括弧保存數組,名稱和值都需要使用雙引號包含(這個是和js的一點小區別).
- js中解析/操作JSON:
1.JSON.parse(json字元串); 將一個json格式的字元串解析成js對象
2.JSON.stringify(js對象); 將一個js對象轉成一個json格式的字元串
自己封裝一個ajax
function pinjieData(obj) {
//obj 就相當於 {key:value,key:value}
//最終拼接成鍵值對的字元串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最終的效果key:value,key:value
//1.創建xhr對象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.設置請求行
xhr.open(method,url);
// 如果是post請求,要設置請求頭
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.發送
xhr.send(finalData);
//4.監聽伺服器返回的數據
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//獲取返回的數據類型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 將 json格式的字元串
//比如 [{ "src":"./images/nav0.png","content":"商品分類1"}]
//轉成js對象
result = JSON.parse(xhr.responseText);
}else{//當成普通的字元串去處理
result = xhr.responseText;
}
//將這裡解析好的數據交給頁面去渲染
success(result);
}
}
}jQuery中使用ajax API jQuery ajax
jQuery為我們提供了更便利的ajax封裝使用.
- $.ajax({}) 可以配置方式發起ajax請求
- $.get() 以get方式發起ajax請求
- $.post() 以post方式發起ajax請求
- $('form').serialize() 序列化表單(格式化key=val$key=val)
參數說明
url :介面地址 type :請求方式(get/post) timeout : 要求為Number類型的參數，設置請求超時時間（毫秒） dataType: 應該是客戶端傳遞給伺服器一個值，告訴伺服器如何進行處理: data: 發送請求數據 beforeSend: 要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求. success: 成功響應後調用 error: 錯誤響應時調用 complete: 響應完成時調用（包括成功和失敗）//ajax===get $.ajax({ url:'', data:'key=value&key=value', type:'get', success:function (result) { console.log(result); } }); //ajax===post $.ajax({ url:'', data:'key=value&key=value', type:'post', success:function (result) { console.log(result); } }); //$.get $.get({ url:'', data:'key=value&key=value', success:function (result) { console.log(result); } }); //$.post $.post({ url:'', data:'key=value&key=value', success:function (result) { console.log(result); } }); //在使用jQuery中ajax發送請求的時候,只需要在 dataType中寫上jsonp即可實現ajax的跨域請求 dataType:'jsonp'
跨域
通過XHR實現ajax通信的一個主要限制(相同域,相同埠,相同協議),來源於跨服安全策略,預設情況下,XHR只能請求同一域的資源,這是為了防止某些惡意的行為.
CORS跨域
- CORS(cross-origin resource sharing,跨域源資源共用)定義了在跨域時,瀏覽器和伺服器應該如何溝通.CORS允許一個域上的網路應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡單，只需由伺服器發送一個響應標頭即可。
- CORS支持所有類型的HTTP請求.
伺服器端對於CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。
JSONP
- JSONP由回調函數和數據組成.JSONP只支持GET請求.JSONP的優勢在於支持老式瀏覽器，以及可以向不支持CORS的網站請求數據.
- JSONP通過動態
<script>元素來使用,src屬性知道一個跨域URL,JSONP是有效的JavaScript代碼,瀏覽器可以跨域請求JS文件. - 優點:簡單易用,可以直接訪問響應文本,支持在瀏覽器和伺服器之間雙向通信.
缺點:1.JSONP是從其他域載入代碼執行,存在不安全風險.2.不好確定JSONP請求是否成敗.
通過修改document.domain來跨子域
使用window.name來進行跨域
HTML5中新引進 window.postMessage方法來跨域傳送數據
flash
iframe
伺服器設置代理頁面
圖像Ping
- 通過使用
標簽,利用網頁可以從任何網頁載入圖像原理.
- 圖像Ping常用於跟蹤用戶點擊頁面或動態廣告曝光次數.
2個缺點:1.只支持GET請求.2.無法訪問伺服器的響應文本.只能用於瀏覽器與伺服器間的單項通信.
var img = new Image(); img.onload = img.onerror = function (){ alert("Done!"); }; img.src = "";
comet
- 一種更高級的ajax技術.ajax是頁面向伺服器請求數據的技術.comet是伺服器向頁面推送數據的技術.
SSE (Server-Sent Events) 伺服器發送事件
Web Sockets
- Web Sockets的目標是在一個單獨的持久鏈接上提供全雙工,雙向通信.
