本篇文章主要的介紹了關於ajax的使用詳情,還有關於ajax的使用案例解析。現在就讓我們一起來看這篇文章吧
$.ajax()方法使用案例
#需要引入jquery文件,本案例使用的是 jquery-2.0.0.js
1、ajax.jsp
#<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.0.0.js"></script> <script type="text/javascript"> $(function() { $("#submit").click(function() { $.ajax({ url : "ajax.do",//请求的url type : "post",//请求方式 data : {//传递的数据 name : $("#name").val() }, dataType : "text",//后台数据返回类型 success : function(data) {//响应成功执行的方法 alert(data); }, error : function() {//出现异常执行方法 alert("出现异常啦..."); } }); }); }); </script> </head> <body> <form action=""> 用户名:<input type="text" name="name" id="name" /><br /> <input type="button" id="submit" value="提交" /> </form> </body> </html>
2、UserServlet.java
@WebServlet("/ajax.do") public class AjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 请求中文乱码处理 request.setCharacterEncoding("UTF-8"); // 响应中文乱码处理 response.setHeader("Content-Type", "text/html;charset=utf-8"); // 接收数据 String name = request.getParameter("name"); System.out.println(name); // 测试出现异常,ajax会执行error // throw new IOException(); PrintWriter out = response.getWriter(); // 响应的信息 out.write("成功啦..."); out.flush(); out.close(); } }
$.ajax()方法詳細的介紹如下(來自w3school)
透過AJAX 載入一段文字:
jQuery 程式碼:
$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myp").html(htmlobj.responseText); }); });
HTML 程式碼:
<p id="myp"><h2>Let AJAX change this text</h2></p> <button id="b01" type="button">Change Content</button>
##ajax() 方法透過HTTP 請求載入遠端資料。 |
此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數,除非你需要操作不常用的選項,以獲得更多的彈性。 最簡單的情況下,$.ajax() 可以不帶任何參數直接使用。 | 注意:所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。
jQuery.ajax([settings])############參數#######描述###############settings#################################################################settings### #########可選。用於配置 Ajax 請求的鍵值對集合。 ######可以透過 $.ajaxSetup() 設定任何選項的預設值。 ################
options
类型:Object
可选。AJAX 请求设置。所有选项都是可选的。
async
类型:Boolean
默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型:Function
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
类型:Boolean
默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
complete(XHR, TS)
类型:Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数: XMLHttpRequest 对象和一个描述请求类型的字符串。
这是一个 Ajax 事件。
contentType
类型:String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。
context
类型:Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样:
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});
data
类型:String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter
类型:Function
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
error
类型:Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
global
类型:Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
类型:Boolean
僅在伺服器資料改變時取得新資料。預設值: false。使用 HTTP 套件 Last-Modified 頭資訊判斷。在 jQuery 1.4 中,它也會檢查伺服器指定的 'etag' 來確定資料沒有被修改過。
jsonp
類型:String
在一個 jsonp 請求中重寫回呼函數的名字。這個值用來取代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數裡的 "callback" 部分,例如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給伺服器。
jsonpCallback
類型:String
為 jsonp 請求指定一個回呼函數名稱。這個值將會用來取代 jQuery 自動產生的隨機函數名稱。這主要用來讓 jQuery 產生度獨特的函數名,這樣管理請求更容易,也能方便地提供回呼函數和錯誤處理。你也可以在想讓瀏覽器快取 GET 請求的時候,指定這個回呼函數名稱。
password
類型:String
#用於回應HTTP 存取認證請求的密碼
processData
類型:Boolean
預設值: true。預設情況下,透過data選項傳遞進來的數據,如果是一個物件(技術上講只要不是字串),都會處理轉換成一個查詢字串,以配合預設內容類型"application/x-www-form-urlencoded "。如果要傳送 DOM 樹資訊或其它不希望轉換的訊息,請設定為 false。
scriptCharset
類型:String
只有當請求時dataType 為"jsonp" 或"script",且type是"GET" 才會用來強制修改charset。通常只在本地和遠端的內容編碼不同時使用。
success
類型:Function
請求成功後的回呼函數。
參數:由伺服器傳回,並根據 dataType 參數進行處理後的資料;描述狀態的字串。
這是一個 Ajax 事件。
traditional
類型:Boolean
如果你想要用傳統的方式來序列化數據,那麼就設定為true。請參考工具分類下面的 jQuery.param 方法。
timeout
類型:Number
設定請求逾時時間(毫秒)。此設定將覆蓋全域設定。
type
類型:String
#預設值: "GET")。請求方式 ("POST" 或 "GET"), 預設為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援。
url
類型:String
#預設值: 目前頁位址。發送請求的位址。
username
類型:String
用於回應 HTTP 存取認證請求的使用者名稱。
xhr
類型:Function
需要傳回一個 XMLHttpRequest 物件。預設在 IE 下是 ActiveXObject 而其他情況是 XMLHttpRequest 。用於重寫或提供一個增強的 XMLHttpRequest 物件。這個參數在 jQuery 1.3 以前不可用。
#如果要處理$.ajax() 得到的數據,則需要使用回呼函數: beforeSend、error、dataFilter、success、complete。
在發送請求之前調用,並且傳入一個 XMLHttpRequest 作為參數。
在請求出錯時呼叫。傳入 XMLHttpRequest 對象,描述錯誤類型的字串以及一個異常對象(如果有的話)
在請求成功之後調用。傳入傳回的資料以及 "dataType" 參數的值。並且必須傳回新的資料(可能是處理過的)傳遞給 success 回呼函數。
當請求之後呼叫。傳入返回後的數據,以及包含成功代碼的字串。
當請求完成之後呼叫這個函數,無論成功或失敗。傳入 XMLHttpRequest 對象,以及一個包含成功或錯誤代碼的字串。
$.ajax() 函數依賴伺服器提供的資訊來處理傳回的資料。如果伺服器報告說傳回的資料是 XML,那麼傳回的結果就可以用普通的 XML 方法或 jQuery 的選擇器來遍歷。如果您看到得到其他類型,例如 HTML,則資料就以文字形式來對待。
透過 dataType 選項也可以指定其他不同資料處理方式。除了單純的 XML,還可以指定 html、json、jsonp、script 或 text。
其中,text 和 xml 類型傳回的資料不會經過處理。資料僅簡單的將 XMLHttpRequest 的 responseText 或 responseHTML 屬性傳遞給 success 回呼函數。
注意:我們必須確保網頁伺服器報告的 MIME 類型與我們選擇的 dataType 所匹配。比方說,XML的話,伺服器端就必須宣告 text/xml 或 application/xml 來獲得一致的結果。
如果指定為 html 類型,任何內嵌的 JavaScript 都會在 HTML 作為一個字串傳回之前執行。類似地,指定 script 類型的話,也會先執行伺服器端產生 JavaScript,然後再把腳本當作一個文字資料回傳。
如果指定為 json 類型,則會把獲取到的資料當作一個 JavaScript 物件來解析,並且把建構好的物件當作結果傳回。為了實現這個目的,它首先嘗試使用 JSON.parse()。如果瀏覽器不支持,則使用函數來建構。
JSON 資料是一種能很方便透過 JavaScript 解析的結構化資料。如果取得的資料檔案存放在遠端伺服器上(網域名稱不同,也就是跨網域取得資料),則需要使用 jsonp 類型。使用這種類型的話,會建立一個查詢字串參數 callback=? ,這個參數會加在請求的 URL 後面。伺服器端應在 JSON 資料前加上回呼函數名,以便完成一個有效的 JSONP 請求。如果要指定回呼函數的參數名稱來取代預設的 callback,可以透過設定 $.ajax() 的 jsonp 參數。 (想看更多就到PHP中文網AJAX開發手冊欄位中學習)
#注意:JSONP 是 JSON 格式的擴充。它要求一些伺服器端的程式碼來檢測並處理查詢字串參數。
如果指定了 script 或 jsonp 類型,那麼當從伺服器接收到資料時,實際上是使用了