摘要:基本概念全稱是異步的和。通過在后臺與服務器進行少量數據交換,可以使網頁實現異步更新。我們加了一個隨機數以后,每次請求不同,瀏覽器就不會使用緩存數據了。中文亂碼問題返回的中文數據亂碼是因為頁面和頁面中使用了不同的編碼方式導致的。
基本概念
Ajax 全稱是異步的 JavaScript 和 XML 。 通過在后臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
Ajax 具有以下優點和缺點:
優點
無需刷新頁面,用戶體驗好;
異步與服務器通信,不影響主進程,響應更迅速;
可以把部分服務器的工作放在客戶端的瀏覽器完成,減輕服務器壓力,減少冗余請求和響應;
Ajax 是前端開發的標準化技術,無需插件支持,跨平臺性能好;
缺點
Ajax 請求不修改瀏覽器歷史記錄,因此不支持前進后退功能;
Ajax 暴露了過多和服務器交互的細節;
破壞了程序的異常機制,容易調試;
不利于搜索引擎抓取信息;
同源策略同源策略是Netscape提出的一個著名的安全策略,它是指同一個“源頭”的數據可以自由訪問,但不同源的數據相互之間都不能訪問。我們試想一下以下幾種情況:
我們打開了一個天貓并且登錄了自己的賬號,這時我們再打開一個天貓的商品,我們不需要再進行一次登錄就可以直接購買商品,因為這兩個網頁是同源的,可以共享登錄相關的 cookie 或 localStorage 數據;
如果你正在用支付寶或者網銀,同時打開了一個不知名的網頁,如果這個網頁可以訪問你支付寶或者網銀頁面的信息,就會產生嚴重的安全的問題。顯然瀏覽器不允許這樣的事情發生;
想必你也有過同時登陸好幾個 qq 賬號的情況,如果同時打開各自的 qq 空間瀏覽器會有一個小號模式,也就是另外再打開一個窗口專門用來打開第二個 qq 賬號的空間。
很明顯,第1個和第3個例子中,不同的天貓商店和 qq 空間屬于同源,可以共享登錄信息。qq 為了區別不同的 qq 的登錄信息,重新打開了一個窗口,因為瀏覽器的不同窗口是不能共享信息的。而第2個例子中的支付寶、網銀、不知名網站之間是非同源的,所以彼此之間無法訪問信息,如果你執意想請求數據,會提示異常:
No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "null" is therefore not allowed access.
那么什么是同源的請求呢?同源請求要求被請求資源頁面和發出請求頁面滿足3個相同:
協議相同
域名相同
端口相同
簡單理解一下:
/*以下兩個數據非同源,因為協議不同*/ http://www.abc123.com.cn/item/a.js https://www.abc123.com.cn/item/a.js /*以下兩個數據非同源,因為域名不同*/ http://www.abc123.com.cn/item/a.js http://www.abc123.com/item/a.js /*以下兩個數據非同源,因為主機名不同*/ http://www.abc123.com.cn/item/a.js http://item.abc123.com.cn/item/a.js /*以下兩個數據非同源,因為協議不同*/ http://www.abc123.com.cn/item/a.js http://www.abc123.com.cn:8080/item/a.js /* 以下兩個數據非同源,域名和 ip 視為不同源 * 這里應注意,ip和域名替換一樣不是同源的 * 假設www.abc123.com.cn解析后的 ip 是 195.155.200.134 */ http://www.abc123.com.cn/ http://195.155.200.134/ /*以下兩個數據同源*/ /* 這個是同源的*/ http://www.abc123.com.cn/source/a.html http://www.abc123.com.cn/item/b.jsAjax
Ajax在編寫時一共4個步驟:
創建 xhr 對象
設置傳輸地址
設置回調函數
發送數據
常見的發送方式有 GET 和 POST,除此之外還有 HEAD, DELETE, TRACE, PUT, CONNECT, OPTIONS和 PATCH等,這里只舉例前兩個 GET 和 POST。
例如根據姓名查詢一個人的信息并寫在div#output中
//GET 方法 function search(name, fun){ var xhr = new XMLHttpRequest(); var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); xhr.open("GET", url); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = JSON.parse(xhr.responseText); //獲取了 JSON 字符串 fun(data); } } } function show(data){ this.innerHTML = "姓名:" + data.name + "
性別:" + data.gender + "
年齡:" + data.age + "
地址:" + data.address + "
電話:" + data.tel; } var output = document.getElementById("output"); search("李華", show.bind(output)); //服務器端 search.php
//POST方法 function search(name, fun){ var xhr = new XMLHttpRequest(); var url = "search.php"; var para = "name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); xhr.open("POST", url); //POST方式下,必須把 Content-Type 設置為application/x-www-form-urlencoded xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.responseText); var data = JSON.parse(xhr.responseText); //獲取了 JSON 字符串 fun(data); } } xhr.send(para); } function show(data){ this.innerHTML = "姓名:" + data.name + "
性別:" + data.gender + "
年齡:" + data.age + "
地址:" + data.address + "
電話:" + data.tel; } var output = document.getElementById("output"); search("李華", show.bind(output)); //服務器端 search.php
上述代碼的 jQuery 寫法:
//GET 方式 function search(name, fun){ var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); $.get(url, fun); } function show(data){ data = JSON.parse(data); this.innerHTML = "姓名:" + data.name + "
性別:" + data.gender + "
年齡:" + data.age + "
地址:" + data.address + "
電話:" + data.tel; } var output = document.getElementById("output"); search("李華", show.bind(output));
//POST 方式 function search(name, fun){ var url = "search.php"; var obj = {}; obj.name = name; obj.t = Math.random(); $.post(url, obj, fun); } function show(data){ data = JSON.parse(data); this.innerHTML = "姓名:" + data.name + "Ajax常見問題 緩存問題
性別:" + data.gender + "
年齡:" + data.age + "
地址:" + data.address + "
電話:" + data.tel; } var output = document.getElementById("output"); search("李華", show.bind(output));
細心一些可以發現,上面發送請求的數據中加入了一個隨機數 t。因為有時服務器更新的了數據后,我們再一次執行 Ajax 請求不能顯示新的結果,這是由于 js 為了加速,頁面會使用緩存保持當前調用的相同鏈接。我們加了一個隨機數以后,每次請求不同,瀏覽器就不會使用緩存數據了。
中文亂碼問題返回的中文數據亂碼是因為 js 頁面和action頁面中使用了不同的編碼方式導致的。可以有以下2中方式解決(瀏覽器 html 文件是 urf-8 編碼的):
對請求數據字段進行2次 encodeURI 編碼,服務器獲取數據后做一次 UTF-8 轉碼
對請求數據字段進行1次 encodeURI 編碼,服務器獲取數據后做一次 ISO-8859-1 轉換 和一次 UTF-8 轉碼
tips: 考慮到兼容性,第1個方法更好
兼容性問題之前的代碼并沒有按兼容性的格式書寫,不過 Ajax 的兼容也不難,主要表現在 XMLHTTPRequest對象獲取環節:
var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); //chrome, safari, opera, firefox } else if(ActionXObject){ try{ xhr = new ActionXObject("Msxml2.XMLHTTP"); //IE 中 Msxml 插件 }catch(e){ xhr = new ActionXObject("Microsoft.XMLHTTP"); //IE } }GET和POST方式對比
--- | GET | POST |
---|---|---|
后退/刷新 | 無害 | 數據會重新提交 |
書簽 | 可藏為書簽 | 無法藏為書簽 |
緩存 | 可以緩存 | 不可以緩存 |
MIME類型 | application/x-www-from-urlencode | application/x-www-from-urlencode或 multipart/form-data (二進制為多重編碼 |
歷史記錄 | 參數保留在歷史記錄中 | 參數不會留在歷史記錄 |
數據長度 | URL最長2048個字符(2kB) | 無限 |
數據類型 | ASCII字符 | 無限 |
安全性 | 差 | 較 |
可見性 | 數據可見 | 數據不可見 |
這里需要強調的是,jsonp不屬于Ajax的部分,它只是吧url放入script標簽中實現的數據傳輸,主要優點是不受同源策略限制。由于一般庫也會把它和Ajax封裝在一起,所以這里放在一起討論。下面是一個jsonp的例子(實現功能:輸入手機號碼查詢歸屬地和運營商):
兼容問題
上述代碼的全部js部分可以用jQuery實現,如下:
function jsonpCallback(data) { $("#output").text(data.province + " " + data.catName); } $("#search").click(function(){ var num = $("#tel").val(); if(/^1[34578]d{9}$/.test(num)){ var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + num" + "t=" + Math.random(); $.ajax({ url: url, type: "GET", dataType: "JSONP", // 處理Ajax跨域問題(本質已不是Ajax) success: function(data){ $("#output").text(data.province + " " + data.catName); } }); } else { alert("您輸入的手機號有誤") } });其他 Ajax 參數及方法
javascript
//屬性 xhr.responseText; //從服務器返回的字符串數據 xhr.responseXML; //從服務器返回的 XML 數據 xhr.status; //服務器相應狀態 xhr.readyState; //0: 請求未初始化; 1: 已建立連接; 2: 請求已接收; 3: 請求處理中; 4: 響應已就緒 xhr.timeout; //指定多少毫秒后超時,長整型 xhr.upload; //獲取上傳進度 xhr.withCredentials; //是否可以跨源,boolean 型,默認 false //方法 xhr.getResponseHeader("connection"); //獲取指定頭信息 xhr.getAllResponseHeaders(); //獲全部定頭信息 xhr.open("METHOD", url, isAsyn); //open方法有3個參數,最后一個參數是 Boolean 型,表示是否異步,默認為 true xhr.abort(); //終止請求,置xhr.readyState為0,但不觸發onreadystatechange xhr.overrideMimeType() //強制重寫 http 頭的 MIME 類型 //事件 XMLHttpRequestEventTarget.onreadystatechange //在xhr.readyState屬性改變時觸發 XMLHttpRequestEventTarget.ontimeout //在響應超時時觸發 XMLHttpRequestEventTarget.onabort //當請求失敗時調用該方法 XMLHttpRequestEventTarget.onerror //當請求發生錯誤時調用該方法 XMLHttpRequestEventTarget.onload //當一個HTTP請求正確加載出內容后返回時調用。 XMLHttpRequestEventTarget.onloadstart //當一個HTTP請求開始加載數據時調用。 XMLHttpRequestEventTarget.onloadend //當內容加載完成,不管失敗與否,都會調用該方法 XMLHttpRequestEventTarget.onprogress //間歇調用該方法用來獲取請求過程中的信息。
注:關于 xhr.status 可能的返回值,詳見 http狀態碼
jQuery 中的 Ajax 方法 ajax 靜態方法$.ajax({options}) //發起一個 ajax 請求 options 常用以下屬性設置:url, method("GET"/"POST"), crossDomain, accepts(可接受的類型), dataType, cache, contentType(編碼格式), success, error等 $.ajaxSetup({options}); //options同上,設置 ajax 默認參數,不建議使用 $.post(url, data, success, datatype); //發起一個 POST 請求 data為傳遞參數(可選), success(reponseText, statusText, xhr) 為成功時的回調函數(可選), datatype(xml/html/script/json/jsonp/text,可選) $.get(url, data, success, datatype); //發起一個 GET 請求, 參數同上 $.getScript(url, data, success) //以 GET 請求獲取一個 JS 文件并執行,參數含義同上 $.getJSON(url, data, success) //以 GET 請求獲取一個 JSON 字符串,參數含義同上ajax 動態方法
$().ajaxComplete(function(){}); //注冊Ajax請求完成時要調用的處理程序 $().ajaxError(function(){}); //注冊要在Ajax請求完成時遇到錯誤而調用的處理程序 $().ajaxSend(function(){}); //附加要在發送Ajax請求之前執行的函數 $().ajaxStart(function(){}); //注冊在第一個Ajax請求開始時要調用的處理程序 $().ajaxStop(function(){}); //注冊要在所有Ajax請求完成后調用的處理程序 $().ajaxSuccess(function(){}); //附加要在Ajax請求成功完成時執行的函數 $().load(url, data, callback); //返回某 url 的數據,data為傳遞參數(可選), callback(reponseText, statusText, xhr) 回調函數(可選)其他相關方法
$.param(obj); //將對象轉化為一個 url 參數列表 $(form).serialize(); //表單數據序列化為 url 參數列表 $(form).serializeArray(); //同上,但返回 JSON 串簡單封裝 Ajax 相關方法
簡單模仿 jQuery 中 $.ajax() 方法
(function(){ // Ajax 選項 var options = { type: "GET", //提交方式 url: "", //路徑 params: {}, //請求參數 dataType: "text", //內容類型 success: function(){}, //回調函數 error: function(){} }; //獲取 XMLHTTPRequest 對象 var createRequest = function(){ var xmlhttp; if(xmlhttp.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); //修改 MIME 類型 } return xmlhttp; }, // 設定 Ajax 選項 var setOptions = function(newOptions){ for(var prop in newOptions){ if(newOptions.hasOwnProperty(prop)){ this.option[prop] = newOptions[prop]; } } }, //格式化參數列表 var formatParameters = function(){ var paramsArr = []; var params = this.options.params; for(var prop in params){ if(params.hasOwnProperty(prop)){ paramsArr.push(prop + "=" + encodeURIComponent(params[prop])); } } return paramsArr.join("&"); }, //預處理并調用相應函數 var readystatechange = function(xmlhttp){ var returnValue; if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ switch(this.options.dataType){ case "xml": returnValue = xmlhttp.responseXML; break; case "json": returnVaue = xmlhttp.responseText; if(returnValue){ returnValue = eval("(" + returnValue + ")"); } break; default: returnVaue = xmlhttp.responseText; break; } if(returnValue){ this.options.success(returnValue); } else{ this.options.success(); } } else{ this.options.error(); } }, //發送請求,也就是$.ajax()函數 var request = function(options){ // var ajaxObj = this; var xmlhttp = this.createRequest(); this.setOptions(options); xmlhttp.onreadystatechange = this.readystatechange.bind(null, xmlhttp); var formatParams = this.formatParameters(); var type = this.options.type; var url = this.options.url; if("GET" === type.toUpperCase()){ url += "?" + formatParameters; } xmlhttp.open(type, url, true); if("GET" === type.toUpperCase()){ xmlhttp.send(); } else if("POST" === type.toUpperCase()){ xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(formatParameters); } } window.$.ajax = request; //暴露方法到閉包外面去 })();
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97459.html
摘要:常見面試題什么是,為什么要使用是的縮寫。該對象在中首次引入,它是一種支持異步請求的技術。頭信息已經接收,響應數據尚未接收。同源策略是客戶端腳本尤其是的重要的安全度量標準。這樣頁面的所有都會執行這條語句就是不需要保存緩存記錄。 AJAX常見面試題 什么是AJAX,為什么要使用Ajax AJAX是Asynchronous JavaScript and XML的縮寫。他是指一種創建交互式網頁...
摘要:隨著對象被廣泛的接收,也開始著手制定相應的標準來規范其行為。四設置請求頭每個請求和響應都會帶有相應的頭部信息,包含一些與數據,收發者網絡環境與狀態等相關信息。該方法會令對象實例停止觸發事件,并且不再允許訪問任何和響應有關的對象屬性。 在上一篇文章中我們知道,AJAX是一系列技術的統稱。在本篇中我們將更進一步,詳細解釋如何使用Ajax技術在項目中獲取數據。而為了解釋清楚,我們首先要搞清楚...
摘要:此外使用的時候必須在請求數據上面添加接收返回值使用會想用一個事件事件當請求被發送到服務器時,我們需要執行一些基于響應的操作。 AJAX 就是瀏覽器提供的一套API 可以通過javascript調用 從而實現通過代碼控制請求與響應 實現網絡編程AJAX 在瀏覽器端進行網絡編程(發送請求 接受響應)的技術方案通過javascript直接獲取服務器的最新的內容而不必重新加載頁面 讓...
摘要:一概述什么是同步,什么是異步同步現象客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處于等待卡死狀態異步現象客戶端發送請求到服務器端,無論服務器是否返回響應,客戶端都可以隨意做其他事情,不會被卡死的運行原理頁面發起請求,會將請求發送 一、Ajax概述1.什么是同步,什么是異步同步現象:客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處于等待 卡死狀態異步現象:客戶...
閱讀 2287·2021-11-10 11:35
閱讀 899·2021-09-26 09:55
閱讀 2388·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3683·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10