1. $.ajax()方法通過(guò)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。

2. $.ajax()方法是jQuery底層AJAX實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn)$.get, $.post等。

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

4. 語(yǔ)法

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

5. 參數(shù)

6. 所有的選項(xiàng)都可以通過(guò)$.ajaxSetup()函數(shù)來(lái)全局設(shè)置。

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

8. 參數(shù)詳解

8.1. url

8.1.1. 類型: String

8.1.2. 默認(rèn)值: 當(dāng)前頁(yè)地址。發(fā)送請(qǐng)求的地址。

8.2. type

8.2.1. 類型: String

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

8.3. data

8.3.1. 類型: String

8.3.2. 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET請(qǐng)求中將附加在URL后。查看processData選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為Key/Value格式。如果為數(shù)組, jQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如: {foo:["bar1", "bar2"]}轉(zhuǎn)換為'&foo=bar1&foo=bar2'。

8.4. processData

8.4.1. 類型: Boolean

8.4.2. 默認(rèn)值: true。默認(rèn)情況下, 通過(guò)data選項(xiàng)傳遞進(jìn)來(lái)的數(shù)據(jù), 如果是一個(gè)對(duì)象(技術(shù)上講只要不是字符串), 都會(huì)處理轉(zhuǎn)化成一個(gè)字符串, 以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送其它不希望轉(zhuǎn)換的信息, 請(qǐng)?jiān)O(shè)置為false, 在上傳文件的時(shí)候它就是false。

8.5. contentType

8.5.1. 類型: String/Boolean

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

8.6. dataType

8.6.1. 類型: String

8.6.2. 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定, jQuery將自動(dòng)根據(jù)HTTP包MIME信息來(lái)智能判斷, 比如: XML MIME類型就被識(shí)別為XML。JSON就會(huì)生成一個(gè)JavaScript對(duì)象, 而script 則會(huì)執(zhí)行這個(gè)腳本。隨后服務(wù)器端返回的數(shù)據(jù)會(huì)根據(jù)這個(gè)值解析后, 傳遞給回調(diào)函數(shù)。可用值:

• "text": 返回純文本字符串
• "json": 返回JSON數(shù)據(jù) 。
• "html": 返回純文本html信息; 包含的script標(biāo)簽會(huì)在插入dom時(shí)執(zhí)行。
• "xml": 返回XML文檔, 可用jQuery處理。
• "script": 返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果, 除非設(shè)置了"cache"參數(shù)。注意: 在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下), 所有POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求(因?yàn)閷⑹褂肈OM的script標(biāo)簽來(lái)加載)。
• "jsonp": JSONP格式。使用JSONP形式調(diào)用函數(shù)時(shí), 如: "myurl?callback=?", jQuery將自動(dòng)替換?為正確的函數(shù)名, 以執(zhí)行回調(diào)函數(shù)。

8.7. async

8.7.1. 類型: Boolean

8.7.2. 默認(rèn)值: true。默認(rèn)設(shè)置下, 所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求, 請(qǐng)將此選項(xiàng)設(shè)置為false。注意, 同步請(qǐng)求將鎖住瀏覽器, 用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。

8.8. cache

8.8.1. 類型: Boolean

8.8.2. 默認(rèn)值: true, dataType為script和jsonp時(shí)默認(rèn)為false。設(shè)置為false將不緩存此頁(yè)面。

8.9. jsonp

8.9.1. 類型: String

8.9.2. 在一個(gè)jsonp請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字。這個(gè)值用來(lái)替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分, 比如: {jsonp:'onJsonPLoad'}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

8.10. jsonpCallback

8.10.1. 類型: String

8.10.2. 為jsonp請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來(lái)取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。這主要用來(lái)讓jQuery 生成度獨(dú)特的函數(shù)名, 這樣管理請(qǐng)求更容易, 也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。你也可以在想讓瀏覽器緩存GET請(qǐng)求的時(shí)候, 指定這個(gè)回調(diào)函數(shù)名。

8.11. username

8.11.1. 類型: String

8.11.2. 用于設(shè)置HTTP訪問(wèn)認(rèn)證請(qǐng)求的用戶名。

8.12. password

8.12.1. 類型: String

8.12.2. 用于設(shè)置HTTP訪問(wèn)認(rèn)證請(qǐng)求的密碼

8.13. timeout

8.13.1. 類型: Number

8.13.2. 設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。

8.14. global

8.14.1. 類型: Boolean

8.14.2. 是否觸發(fā)全局AJAX事件。默認(rèn)值: true。設(shè)置為false將不會(huì)觸發(fā)全局AJAX事件, 如: ajaxStart或ajaxStop可用于控制不同的Ajax事件。

8.15. ifModified

8.15.1. 類型: Boolean

8.15.2. 僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。默認(rèn)值: false。使用HTTP包Last-Modified頭信息判斷。

8.16. context

8.16.1. 類型: Object

8.16.2. 這個(gè)對(duì)象用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文。也就是說(shuō), 讓回調(diào)函數(shù)內(nèi)this指向這個(gè)對(duì)象(如果不設(shè)定這個(gè)參數(shù), 那么this就指向調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù))。比如: 指定一個(gè)DOM 元素作為context參數(shù), 這樣就設(shè)置了success回調(diào)函數(shù)的上下文為這個(gè)DOM元素。

8.16.3. 就像這樣:

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

8.17. scriptCharset

8.17.1. 類型: String

8.17.2. 只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或"script", 并且type是"GET"才會(huì)用于強(qiáng)制修改charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。

8.18. traditional

8.18.1. 類型: Boolean

8.18.2. 如果你想要用傳統(tǒng)的方式來(lái)序列化數(shù)據(jù), 那么就設(shè)置為true。請(qǐng)參考工具分類下面的jQuery.param方法。

8.19. beforeSend(jqXHR,options)

8.19.1. 類型: Function

8.19.2. 發(fā)送請(qǐng)求前可修改XMLHttpRequest對(duì)象的函數(shù), 如: 添加自定義HTTP頭。

8.19.3. 第一個(gè)參數(shù)是XMLHttpRequest對(duì)象的超類。第二個(gè)參數(shù)是調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)。

8.19.4. 這是一個(gè)Ajax事件。如果返回false可以取消本次ajax請(qǐng)求。

8.20. xhr

8.20.1. 類型: Function

8.20.2. 需要返回一個(gè)XMLHttpRequest對(duì)象。用于重寫(xiě)或者提供一個(gè)增強(qiáng)的XMLHttpRequest對(duì)象。

8.21. dataFilter(response, dataType)

8.21.1. 類型: Function

8.21.2. 給Ajax返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供data和dataType兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù), type是調(diào)用$.ajax()時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

8.21.3.

8.22. success(response,textStatus,jqXHR)

8.22.1. 類型: Function

8.22.2. 請(qǐng)求成功后的回調(diào)函數(shù)。

8.22.3. 第一個(gè)參數(shù)是由服務(wù)器返回的數(shù)據(jù)。第二個(gè)參數(shù)是描述狀態(tài)的字符串。第三個(gè)參數(shù)是XMLHttpRequest對(duì)象超類。

8.23. error(jqXHR,textStatus,error)

8.23.1. 類型: Function

8.23.2. 請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。

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

8.24. complete(xhr,textStatus)

8.24.1. 類型: Function

8.24.2. 請(qǐng)求完成后回調(diào)函數(shù)(請(qǐng)求成功或失敗之后均調(diào)用)。

8.24.3. 第一個(gè)參數(shù)是XMLHttpRequest對(duì)象超類。第二個(gè)參數(shù)是描述狀態(tài)的字符串(可能是"success"等)。

9. 例子

9.1. 新建一個(gè)名為jQueryAjax動(dòng)態(tài)WEB工程

9.2. 新建test.html

<!DOCTYPE html> <html><head><title>測(cè)試文檔</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='我是服務(wù)器使用js返回的文本。';

9.4. 新建test.json

{"data": {"code": 1, "info": "success", "msg": "請(qǐng)求成功。"}}

9.5. 新建test.xml

<?xml version="1.0" encoding="UTF-8"?> <data><code>1</code><info>success</info><msg>請(qǐng)求成功。</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設(shè)置, 否則都沒(méi)有請(qǐng)求, 設(shè)置為true也沒(méi)有請(qǐng)求。contentType: false // 必須有contentType: false設(shè)置, 而且必須為false, 才能是multipart/form-data二進(jìn)制的請(qǐng)求。});});$('#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">結(jié)果區(qū)域</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">回調(diào)函數(shù)</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";}// 響應(yīng)客戶端的內(nèi)容類型是text/html 編碼是UTF-8(包含字符編碼和網(wǎng)頁(yè)編碼)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 {// 創(chuàng)建一個(gè)磁盤(pán)文件的工廠, 然后將它 傳遞到servletFileUplaod的實(shí)例中DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);// 根據(jù)request對(duì)象獲取所有的文件集合, 這里包括input標(biāo)簽輸入的值也屬于FileInputtry {List<FileItem> fileItemList = servletFileUpload.parseRequest(req);Iterator<FileItem> iterator = fileItemList.iterator();while (iterator.hasNext()) {FileItem fileItem = (FileItem) iterator.next();if (fileItem.isFormField()) { // 是否是表單提交域, 可以分區(qū)是否上傳的附件String name = fileItem.getFieldName(); // input標(biāo)簽的nameString value = fileItem.getString(); // input表單的valueSystem.out.println("name = " + name + ", value= " + value);} else {String fieldName = fileItem.getFieldName(); // 表單提交過(guò)來(lái)的file input標(biāo)簽中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); // 將文件寫(xiě)入磁盤(pán)中}}} catch (Exception e) {e.printStackTrace();}} }

9.9. 修改web.xml

9.10. 導(dǎo)入commons-fileupload-1.4.jar和commons-io-2.8.0.jar做文件上傳使用

9.11. 運(yùn)行項(xiàng)目

9.12. 使用緩存的test.html

9.13. 不使用緩存的test.xml

9.14. 上傳文件

9.15. 運(yùn)行腳本

9.16. 回調(diào)函數(shù)

總結(jié)

以上是生活随笔為你收集整理的033_jQuery Ajax的ajax方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。