Heim > Artikel > Web-Frontend > Wie verwende ich Ajax? Ajax-Anwendungsfallanalyse

Wie verwende ich Ajax? Ajax-Anwendungsfallanalyse

寻∝梦Original: 2018-09-10 13:52:511024Durchsuche

In diesem Artikel werden hauptsächlich die Verwendungsdetails von Ajax sowie die Anwendungsfallanalyse von Ajax vorgestellt. Werfen wir nun einen Blick auf diesen Artikel

Anwendungsfall der $.ajax()-Methode

Sie müssen die JQuery-Datei importieren.

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();
	}
}

Die Methode $.ajax() wird wie folgt im Detail vorgestellt ( von w3school)

jQuery ajax - ajax() Methode

Instanz

Übergebenes AJAX lädt einen Text:

jQuery-Code:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myp").html(htmlobj.responseText);
  });
});

HTML-Code:

<p id="myp"><h2>Let AJAX change this text</h2></p>
<button id="b01" type="button">Change Content</button>

Definition und Verwendung

ajax()-Methode lädt Remote-Daten über eine HTTP-Anfrage.

Diese Methode ist die zugrunde liegende AJAX-Implementierung von jQuery. Einfache und benutzerfreundliche High-Level-Implementierungen finden Sie unter $.get, $.post usw. $.ajax() gibt das von ihm erstellte XMLHttpRequest-Objekt zurück. In den meisten Fällen müssen Sie diese Funktion nicht direkt manipulieren, es sei denn, Sie müssen weniger häufig verwendete Optionen für mehr Flexibilität manipulieren.

Im einfachsten Fall kann $.ajax() direkt ohne Parameter verwendet werden.

Hinweis: Alle Optionen können global über die Funktion $.ajaxSetup() festgelegt werden.

Syntax

jQuery.ajax([settings])

Parameter

Beschreibung

Einstellungen

参数

描述

settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

Optional. Eine Sammlung von Schlüssel-Wert-Paaren, die zum Konfigurieren von Ajax-Anfragen verwendet werden. Der Standardwert jeder Option kann über $.ajaxSetup() festgelegt werden.

参数

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

Erhalten Sie neue Daten nur, wenn sich Serverdaten ändern. Standardwert: false. Verwenden Sie zur Bestimmung die Header-Informationen „Zuletzt geändert“ des HTTP-Pakets. Ab jQuery 1.4 überprüft es auch das vom Server angegebene „etag“, um sicherzustellen, dass die Daten nicht geändert wurden.
jsonp
Typ: String

Schreiben Sie den Namen der Rückruffunktion in einer JSONP-Anfrage neu. Dieser Wert wird verwendet, um den „Callback“-Teil des URL-Parameters in einer GET- oder POST-Anfrage wie {jsonp:'onJsonPLoad'} zu ersetzen, der dazu führt, dass „onJsonPLoad=?“ an den Server übergeben wird.
jsonpCallback
Typ: String

Geben Sie einen Rückruffunktionsnamen für die JSONP-Anfrage an. Dieser Wert wird anstelle des von jQuery automatisch generierten zufälligen Funktionsnamens verwendet. Dies wird hauptsächlich verwendet, um jQuery die Generierung eindeutiger Funktionsnamen zu ermöglichen, um die Verwaltung von Anforderungen sowie die Bereitstellung von Rückruffunktionen und Fehlerbehandlung zu erleichtern. Sie können diesen Rückruffunktionsnamen auch angeben, wenn der Browser GET-Anfragen zwischenspeichern soll.
Passwort
Typ: Zeichenfolge

Passwort, das zur Beantwortung einer HTTP-Zugriffsauthentifizierungsanfrage verwendet wird
processData
Typ: Boolean

Standardwert: true. Standardmäßig werden die über die Datenoption übergebenen Daten, wenn es sich um ein Objekt handelt (technisch gesehen, solange es sich nicht um eine Zeichenfolge handelt), verarbeitet und in eine Abfragezeichenfolge konvertiert, die dem Standardinhaltstyp „application/x“ entspricht -www-form-urlencoded" ". Legen Sie „false“ fest, wenn Sie DOM-Bauminformationen oder andere Informationen senden möchten, die Sie nicht konvertieren möchten.
scriptCharset
Typ: String

Nur wenn der angeforderte Datentyp „jsonp“ oder „script“ ist und der Typ „Nur“ lautet „GET“ wird verwendet, um eine Änderung des Zeichensatzes zu erzwingen. Wird normalerweise nur verwendet, wenn die lokalen und Remote-Inhaltskodierungen unterschiedlich sind.
Erfolg
Typ: Funktion

Rückruffunktion nach erfolgreicher Anfrage.

Parameter: Vom Server zurückgegebene und gemäß dem dataType-Parameter verarbeitete Daten; eine Zeichenfolge, die den Status beschreibt.

Dies ist eine Ajax-Veranstaltung.
traditionell
Typ: Boolean

Wenn Sie Daten auf herkömmliche Weise serialisieren möchten, ist set true. Bitte beachten Sie die jQuery.param-Methode in der Kategorie „Tools“.
Timeout
Typ: Zahl

Legen Sie das Anfrage-Timeout fest (Millisekunden). Diese Einstellung überschreibt die globale Einstellung.
Typ
Typ: String

Standard: „GET“). Anforderungsmethode („POST“ oder „GET“), Standard ist „GET“. Hinweis: Andere HTTP-Anfragemethoden wie PUT und DELETE können ebenfalls verwendet werden, werden jedoch nur von einigen Browsern unterstützt.
URL
Typ: String

Standardwert: Aktuelle Seitenadresse. Die Adresse, an die die Anfrage gesendet werden soll.
Benutzername
Typ: Zeichenfolge

Benutzername, der zur Beantwortung von HTTP-Zugriffsauthentifizierungsanfragen verwendet wird.
xhr
Typ: Funktion

Erfordert die Rückgabe eines XMLHttpRequest-Objekts. Der Standardwert ist ActiveXObject unter IE und ansonsten XMLHttpRequest. Wird verwendet, um ein erweitertes XMLHttpRequest-Objekt zu überschreiben oder bereitzustellen. Dieser Parameter war vor jQuery 1.3 nicht verfügbar.

Rückruffunktion

Wenn Sie die von $.ajax() erhaltenen Daten verarbeiten möchten, müssen Sie dies tun Verwenden Sie die Rückruffunktion: beforeSend, error, dataFilter, success, complete.

beforeSend

wird vor dem Senden der Anfrage aufgerufen und übergibt einen XMLHttpRequest als Parameter.

error

wird aufgerufen, wenn ein Anforderungsfehler auftritt. Durch Übergabe des XMLHttpRequest-Objekts wird eine Zeichenfolge, die den Fehlertyp beschreibt, und ein Ausnahmeobjekt (falls vorhanden)

dataFilter

aufgerufen, nachdem die Anforderung erfolgreich war. Übergeben Sie die zurückgegebenen Daten und den Wert des Parameters „dataType“. Und muss neue Daten (möglicherweise verarbeitet) zurückgeben, die an die Erfolgsrückruffunktion übergeben wurden.

success

wird nach der Anfrage aufgerufen. Übergeben Sie die zurückgegebenen Daten und eine Zeichenfolge mit dem Erfolgscode.

abgeschlossen

Diese Funktion wird aufgerufen, wenn die Anfrage abgeschlossen ist, unabhängig von Erfolg oder Misserfolg. Übergeben Sie das XMLHttpRequest-Objekt und eine Zeichenfolge mit einem Erfolgs- oder Fehlercode.

Datentyp

$.ajax()-Funktion basiert auf den vom Server bereitgestellten Informationen, um die zurückgegebenen Daten zu verarbeiten. Wenn der Server meldet, dass es sich bei den zurückgegebenen Daten um XML handelt, können die zurückgegebenen Ergebnisse mithilfe normaler XML-Methoden oder jQuery-Selektoren iteriert werden. Wenn andere Typen wie HTML angezeigt werden, werden die Daten als Text behandelt.

Sie können über die Option dataType auch andere unterschiedliche Datenverarbeitungsmethoden angeben. Neben einfachem XML können Sie auch HTML, JSON, JSONP, Script oder Text angeben.

Unter anderem werden die von Text- und XML-Typen zurückgegebenen Daten nicht verarbeitet. Die Daten übergeben einfach das Attribut „responseText“ oder „responsHTML“ des XMLHttpRequest an die Erfolgsrückruffunktion.

Hinweis: Wir müssen sicherstellen, dass der vom Webserver gemeldete MIME-Typ mit dem von uns ausgewählten Datentyp übereinstimmt. Im Fall von XML muss der Server beispielsweise text/xml oder application/xml deklarieren, um konsistente Ergebnisse zu erhalten.

Wenn als HTML-Typ angegeben, wird jegliches eingebettete JavaScript ausgeführt, bevor der HTML-Code als Zeichenfolge zurückgegeben wird. Ebenso wird bei Angabe des Skripttyps zuerst das serverseitig generierte JavaScript ausgeführt und dann das Skript als Textdaten zurückgegeben.

Bei Angabe als JSON-Typ werden die erhaltenen Daten als JavaScript-Objekt analysiert und das erstellte Objekt als Ergebnis zurückgegeben. Um dies zu erreichen, wird zunächst versucht, JSON.parse() zu verwenden. Wenn der Browser dies nicht unterstützt, wird eine Funktion zum Erstellen verwendet.

JSON-Daten sind eine Art strukturierte Daten, die einfach über JavaScript analysiert werden können. Wenn die erhaltene Datendatei auf einem Remote-Server gespeichert ist (mit unterschiedlichen Domänennamen, d. h. domänenübergreifende Datenerfassung), müssen Sie den Typ jsonp verwenden. Durch die Verwendung dieses Typs wird ein Abfragezeichenfolgenparameter „callback=?“ erstellt, der an die angeforderte URL angehängt wird. Der Server sollte den Namen der Rückruffunktion vor den JSON-Daten hinzufügen, um eine gültige JSONP-Anfrage abzuschließen. Wenn Sie den Parameternamen der Rückruffunktion anstelle des Standardrückrufs angeben möchten, können Sie den JSONP-Parameter von $.ajax() festlegen. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AJAX-Entwicklungshandbuch der PHP Chinese-Website, um mehr zu erfahren)

Hinweis: JSONP ist eine Erweiterung des JSON-Formats. Es erfordert serverseitigen Code, um Abfragezeichenfolgenparameter zu erkennen und zu verarbeiten.

Wenn der Skript- oder JSONP-Typ angegeben ist, wird beim Empfang von Daten vom Server tatsächlich das