搜尋

首頁 >web前端 >js教程 >ajax怎麼使用？ ajax的使用案例解析

ajax怎麼使用？ ajax的使用案例解析

寻∝梦
寻∝梦原創
2018-09-10 13:52:511050瀏覽

本篇文章主要的介紹了關於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）

jQuery ajax - ajax() 方法

實例

透過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 請求載入遠端資料。 注意：所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。 語法

此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的彈性。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。 

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。

beforeSend

在發送請求之前調用，並且傳入一個 XMLHttpRequest 作為參數。

error

在請求出錯時呼叫。傳入 XMLHttpRequest 對象，描述錯誤類型的字串以及一個異常對象（如果有的話）

dataFilter

在請求成功之後調用。傳入傳回的資料以及 "dataType" 參數的值。並且必須傳回新的資料（可能是處理過的）傳遞給 success 回呼函數。

success

當請求之後呼叫。傳入返回後的數據，以及包含成功代碼的字串。

complete

當請求完成之後呼叫這個函數，無論成功或失敗。傳入 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 類型，那麼當從伺服器接收到資料時，實際上是使用了