Ajax詳解及使用Ajax時的返回值類型有哪些?
Ajax詳解
Ajax = 異步 JavaScript 和 XML。
Ajax 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換,Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 Ajax)如果需要更新內容,必需重載整個網頁面。
(註:圖片來自網絡)
如何使用Ajax技術
首先,需要獲取XMLHttpRequest
對象:
var xhr;
xhr = new XMLHttpRequest();
XMLHttpRequest
對象有5個核心屬性:
onreadystatechange
readyState
:準備狀態,該屬性的值可能是0~4之間的數字,0表示尚未建立連接,4表示接收到響應status
:響應碼,例如404、200responseText
:響應的字符串responseXML
:響應的XML
當需要發出請求時,需要XMLHttpRequest
對象的open()
和send()
方法:
- open(請求方式, 請求路徑, 是否異步)
- send()
使用演示:
// 異步檢查用戶名是否存在 function checkUsername(username) { // 獲取XMLHttpRequest對象 var xhr = new XMLHttpRequest(); var url = "check_username.do?username=" + username; // 配置onreadystatechange xhr.onreadystatechange = function() { // 當服務器已經響應(4)且響應碼是200時 if (xhr.readyState == 4 && xhr.status == 200) { // 根據服務器的響應,顯示響應的提示消息 if (xhr.responseText == "1") { // 表示用戶名存在 document.getElementById("username_hint").innerHTML= "用戶名正確"; } else { // 表示用戶名不存在 document.getElementById("username_hint").innerHTML= "用戶名不存在"; } } }; // 調用函數 xhr.open("GET", url, true); xhr.send(); }
在JQuery中,Ajax有三種實現方式:
$.ajax({
"url":"", //訪問路徑
"data":"", // 需要傳輸的數據
"type":"", // 請求方式
"dataType":"", // 返回值類型
"success":function(obj){}, // 響應成功時的回調函數
"error":function(obj){} // 響應失敗時的回調函數
});
$.get(URL,callback);
$.post(URL,data,callback);
(註:以下內容來自https://www.cnblogs.com/fly-xfa/p/5851746.html)
使用Ajax時的返回值類型有哪些?
xml、html、script、JSON、jsonp、text
xml:返回XML文檔,可用 jQuery 處理。
html:返回純文本HTML信息;
script:返回純文本
JavaScript
代碼。不會自動緩存結果。除非設置了 “cache” 參數;json:json方式和html方式在請求和服務器中完全是一樣,請求的返回值實際上都是String對象,有兩點不同,第一:html方式的時候並沒有限制返回的字符串格式,而json方式的時候,必須符合json協議的規範。第二:html方式請求完成之後沒有做任何的操作直接回調sucuess,而json多了一步就是加了eval,執行返回的字符串,看看源碼
data = eval_r("(" + data + ")")
;返回json對象;(方法的返回值是Javabean時,在響應體中響應成json字符串格式)jsonp:jsonp方式的交互方式和js是一樣的,本身
xmlHttpRequest
對象並不能跨域訪問,但是script
標簽的src
可以跨域訪問,這裏就註意兩個概念:第一Ajax是不能跨域操作的,第二jQuery的jsonp是可以跨域操作,jsonp到底是什麽東西呢?他是一個非官方的定義,目前的規範,需要服務器和客戶端進行配合使用;text:返回純文本字符串。
Ajax詳解及使用Ajax時的返回值類型有哪些?