1. $.ajax()方法通過HTTP請求加載遠程數據。

2. $.ajax()方法是jQuery底層AJAX實現。簡單易用的高層實現見$.get, $.post等。

3. $.ajax()方法返回其創建的XMLHttpRequest對象的超類。大多數情況下你無需直接操作該函數, 除非你需要操作不常用的選項, 以獲得更多的靈活性。

4. 語法

$.ajax({name:value, name:value, ... })

5. 參數

6. 所有的選項都可以通過$.ajaxSetup()函數來全局設置。

7. 最簡單的情況下, $.ajax()可以不帶任何參數直接使用。不過, 我們最好設置一個url。

8. 參數詳解

8.1. url

8.1.1. 類型: String

8.1.2. 默認值: 當前頁地址。發送請求的地址。

8.2. type

8.2.1. 類型: String

8.2.2. 默認值: "GET"。請求方式("POST"或"GET")。注意: 其它HTTP請求方法, 如: PUT和DELETE也可以使用, 但僅部分瀏覽器支持。

8.3. data

8.3.1. 類型: String

8.3.2. 發送到服務器的數據。將自動轉換為請求字符串格式。GET請求中將附加在URL后。查看processData選項說明以禁止此自動轉換。必須為Key/Value格式。如果為數組, jQuery將自動為不同值對應同一個名稱。如: {foo:["bar1", "bar2"]}轉換為'&foo=bar1&foo=bar2'。

8.4. processData

8.4.1. 類型: Boolean

8.4.2. 默認值: true。默認情況下, 通過data選項傳遞進來的數據, 如果是一個對象(技術上講只要不是字符串), 都會處理轉化成一個字符串, 以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送其它不希望轉換的信息, 請設置為false, 在上傳文件的時候它就是false。

8.5. contentType

8.5.1. 類型: String/Boolean

8.5.2. 默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。默認值適合大多數情況。常用值還有一個"multipart/form-data", 在上傳文件的時候就是這個值。不過在上傳文件的時候要設置成false, 服務器才認為是二進制信息。

8.6. dataType

8.6.1. 類型: String

8.6.2. 預期服務器返回的數據類型。如果不指定, jQuery將自動根據HTTP包MIME信息來智能判斷, 比如: XML MIME類型就被識別為XML。JSON就會生成一個JavaScript對象, 而script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后, 傳遞給回調函數。可用值:

• "text": 返回純文本字符串
• "json": 返回JSON數據 。
• "html": 返回純文本html信息; 包含的script標簽會在插入dom時執行。
• "xml": 返回XML文檔, 可用jQuery處理。
• "script": 返回純文本JavaScript代碼。不會自動緩存結果, 除非設置了"cache"參數。注意: 在遠程請求時(不在同一個域下), 所有POST請求都將轉為GET請求(因為將使用DOM的script標簽來加載)。
• "jsonp": JSONP格式。使用JSONP形式調用函數時, 如: "myurl?callback=?", jQuery將自動替換?為正確的函數名, 以執行回調函數。

8.7. async

8.7.1. 類型: Boolean

8.7.2. 默認值: true。默認設置下, 所有請求均為異步請求。如果需要發送同步請求, 請將此選項設置為false。注意, 同步請求將鎖住瀏覽器, 用戶其它操作必須等待請求完成才可以執行。

8.8. cache

8.8.1. 類型: Boolean

8.8.2. 默認值: true, dataType為script和jsonp時默認為false。設置為false將不緩存此頁面。

8.9. jsonp

8.9.1. 類型: String

8.9.2. 在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分, 比如: {jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

8.10. jsonpCallback

8.10.1. 類型: String

8.10.2. 為jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery 生成度獨特的函數名, 這樣管理請求更容易, 也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候, 指定這個回調函數名。

8.11. username

8.11.1. 類型: String

8.11.2. 用于設置HTTP訪問認證請求的用戶名。

8.12. password

8.12.1. 類型: String

8.12.2. 用于設置HTTP訪問認證請求的密碼

8.13. timeout

8.13.1. 類型: Number

8.13.2. 設置請求超時時間(毫秒)。此設置將覆蓋全局設置。

8.14. global

8.14.1. 類型: Boolean

8.14.2. 是否觸發全局AJAX事件。默認值: true。設置為false將不會觸發全局AJAX事件, 如: ajaxStart或ajaxStop可用于控制不同的Ajax事件。

8.15. ifModified

8.15.1. 類型: Boolean

8.15.2. 僅在服務器數據改變時獲取新數據。默認值: false。使用HTTP包Last-Modified頭信息判斷。

8.16. context

8.16.1. 類型: Object

8.16.2. 這個對象用于設置Ajax相關回調函數的上下文。也就是說, 讓回調函數內this指向這個對象(如果不設定這個參數, 那么this就指向調用本次AJAX請求時傳遞的options參數)。比如: 指定一個DOM 元素作為context參數, 這樣就設置了success回調函數的上下文為這個DOM元素。

8.16.3. 就像這樣:

$.ajax({url: "test.html", context: document.body, success: function(){$(this).addClass("done"); // this指的是body節點 }});

8.17. scriptCharset

8.17.1. 類型: String

8.17.2. 只有當請求時dataType為"jsonp"或"script", 并且type是"GET"才會用于強制修改charset。通常只在本地和遠程的內容編碼不同時使用。

8.18. traditional

8.18.1. 類型: Boolean

8.18.2. 如果你想要用傳統的方式來序列化數據, 那么就設置為true。請參考工具分類下面的jQuery.param方法。

8.19. beforeSend(jqXHR,options)

8.19.1. 類型: Function

8.19.2. 發送請求前可修改XMLHttpRequest對象的函數, 如: 添加自定義HTTP頭。

8.19.3. 第一個參數是XMLHttpRequest對象的超類。第二個參數是調用本次AJAX請求時傳遞的options參數。

8.19.4. 這是一個Ajax事件。如果返回false可以取消本次ajax請求。

8.20. xhr

8.20.1. 類型: Function

8.20.2. 需要返回一個XMLHttpRequest對象。用于重寫或者提供一個增強的XMLHttpRequest對象。

8.21. dataFilter(response, dataType)

8.21.1. 類型: Function

8.21.2. 給Ajax返回的原始數據的進行預處理的函數。提供data和dataType兩個參數。data是Ajax返回的原始數據, type是調用$.ajax()時提供的dataType參數。函數返回的值將由jQuery進一步處理。

8.21.3.

8.22. success(response,textStatus,jqXHR)

8.22.1. 類型: Function

8.22.2. 請求成功后的回調函數。

8.22.3. 第一個參數是由服務器返回的數據。第二個參數是描述狀態的字符串。第三個參數是XMLHttpRequest對象超類。

8.23. error(jqXHR,textStatus,error)

8.23.1. 類型: Function

8.23.2. 請求失敗時調用此函數。

8.23.3. 有以下三個參數: XMLHttpRequest對象超類、描述錯誤狀態的字符串(可能是"timeout", "error", "notmodified"和"parsererror"等)、捕獲的異常對象。

8.24. complete(xhr,textStatus)

8.24.1. 類型: Function

8.24.2. 請求完成后回調函數(請求成功或失敗之后均調用)。

8.24.3. 第一個參數是XMLHttpRequest對象超類。第二個參數是描述狀態的字符串(可能是"success"等)。

9. 例子

9.1. 新建一個名為jQueryAjax動態WEB工程

9.2. 新建test.html

<!DOCTYPE html> <html><head><title>測試文檔</title><meta charset="utf-8" /></head><body> <h2>這是test.html文件中的h2</h2><p id="p1">這是test.html文件中的p</p></body> </html>

9.3. 新建test.js

document.getElementById('result').innerHTML='我是服務器使用js返回的文本。';

9.4. 新建test.json

{"data": {"code": 1, "info": "success", "msg": "請求成功。"}}

9.5. 新建test.xml

<?xml version="1.0" encoding="UTF-8"?> <data><code>1</code><info>success</info><msg>請求成功。</msg> </data>

9.6. 新建index.html

<!DOCTYPE html> <html><head><title>jQuery-Ajax的Ajax()方法</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$.ajax({url: 'test.html',dataType: 'html',cache: true});});$('#btn2').click(function(){$.ajax({url: 'test.xml',dataType: 'xml',cache: false});});$('#btn3').click(function(){var fd = new FormData();fd.append("photo",$("#photo")[0].files[0]);fd.append("r", Math.random());$.ajax({url: 'UploadFile.action',type: 'post',data: fd,processData: false, // 必須有processData: false設置, 否則都沒有請求, 設置為true也沒有請求。contentType: false // 必須有contentType: false設置, 而且必須為false, 才能是multipart/form-data二進制的請求。});});$('#btn4').click(function(){$.ajax({url: 'JqueryAjax.action',dataType: 'script',data: {dataType: 'js'}});});$('#btn5').click(function(){var jqXHL = $.ajax({url: "JqueryAjax.action", type: 'post', data: {dataType: 'json'}, processData: true, dataType: 'json',async: true,timeout: 50000, context: $("#result"),beforeSend: function(jqXHL,options){console.log('-------beforeSend Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}console.log('-------beforeSend End-------------');},xhr: function(){console.log('-------xhr Start-------------');console.log('-------xhr End-------------');var xhr = new XMLHttpRequest();return xhr;},dataFilter: function(response, dataType){console.log('-------dataFilter Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);} console.log('-------dataFilter End-------------');return response;},success: function(response,textStatus,jqXHL){console.log('-------success Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);} console.log('-------success End-------------');$(this).text(jqXHL.responseText);},error: function(jqXHL,textStatus,error){console.log('-------error Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);} console.log('-------error End-------------');},complete: function(jqXHL,textStatus){console.log('-------complete Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}console.log('-------complete End-------------');} }); console.log('jqXHL = ' + jqXHL);});});</script><style type="text/css">div {width: 450px;height: 100px;background-color: pink;}</style></head><body> <div id="result">結果區域</div><br /><button id="btn1">使用緩存的test.html</button> <button id="btn2">不使用緩存的test.xml</button><br /><br /><input type="file" id="photo" placeholder="免冠照片" /><button id="btn3">上傳文件</button> <br /><br /><button id="btn4">獲取test.js</button> <button id="btn5">回調函數</button></body> </html>

9.7. 新建JqueryAjax.java

package com.rjbd.ja;import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class JqueryAjax extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String dataType = req.getParameter("dataType");FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));BufferedReader br = new BufferedReader(fr);StringBuffer sb = new StringBuffer();String result = null;while((result = br.readLine()) != null) {sb.append(result);}br.close();fr.close();if("js".equals(dataType)) {dataType = "javascript";}// 響應客戶端的內容類型是text/html 編碼是UTF-8(包含字符編碼和網頁編碼)resp.setContentType("text/" + dataType + ";charset=UTF-8");resp.getWriter().write(sb.toString());}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }

9.8. 新建UploadFile.java

package com.rjbd.ja;import java.io.File; import java.io.IOException; import java.util.Iterator; import java.util.List;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload;public class UploadFile extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 創建一個磁盤文件的工廠, 然后將它 傳遞到servletFileUplaod的實例中DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);// 根據request對象獲取所有的文件集合, 這里包括input標簽輸入的值也屬于FileInputtry {List<FileItem> fileItemList = servletFileUpload.parseRequest(req);Iterator<FileItem> iterator = fileItemList.iterator();while (iterator.hasNext()) {FileItem fileItem = (FileItem) iterator.next();if (fileItem.isFormField()) { // 是否是表單提交域, 可以分區是否上傳的附件String name = fileItem.getFieldName(); // input標簽的nameString value = fileItem.getString(); // input表單的valueSystem.out.println("name = " + name + ", value= " + value);} else {String fieldName = fileItem.getFieldName(); // 表單提交過來的file input標簽中name的屬性值String fileName = fileItem.getName(); // file input上傳的文件名String contentType = fileItem.getContentType(); // 獲得上傳文件的類型long size = fileItem.getSize(); // 上傳文件的大小String filePath = getServletContext().getRealPath("/") + fileName;File saveFile = new File(filePath);fileItem.write(saveFile); // 將文件寫入磁盤中}}} catch (Exception e) {e.printStackTrace();}} }

9.9. 修改web.xml

9.10. 導入commons-fileupload-1.4.jar和commons-io-2.8.0.jar做文件上傳使用

9.11. 運行項目

9.12. 使用緩存的test.html

9.13. 不使用緩存的test.xml

9.14. 上傳文件

9.15. 運行腳本

9.16. 回調函數

總結

以上是生活随笔為你收集整理的033_jQuery Ajax的ajax方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。