Maison > Article > interface Web > Comment utiliser ajax ? Analyse de cas d'utilisation d'Ajax

Comment utiliser ajax ? Analyse de cas d'utilisation d'Ajax

寻∝梦original: 2018-09-10 13:52:51986parcourir

Cet article présente principalement les détails d'utilisation de ajax, ainsi que l'analyse des cas d'utilisation d'ajax. Jetons un coup d'œil à cet article maintenant

Cas d'utilisation de la méthode $.ajax()

Vous devez importer le fichier jquery. Ce cas utilise jquery-2.0.0.js

<%@ 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() détails de la méthode L'introduction est le suivant (de w3school) jQuery ajax - méthode ajax()

Instance

Charger un bout de texte via AJAX :

Code jQuery :

Code HTML :

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

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

Définition et utilisation

La méthode ajax() charge les données distantes via des requêtes HTTP.

Cette méthode est l'implémentation AJAX sous-jacente de jQuery. Pour des implémentations de haut niveau simples et faciles à utiliser, voir $.get, $.post, etc. $.ajax() renvoie l'objet XMLHttpRequest qu'il a créé. Dans la plupart des cas, vous n'aurez pas besoin de manipuler cette fonction directement, sauf si vous devez manipuler des options moins couramment utilisées pour plus de flexibilité.

Dans le cas le plus simple, $.ajax() peut être utilisé directement sans aucun paramètre.

Remarque : Toutes les options peuvent être définies globalement via la fonction $.ajaxSetup().

Syntaxe

tr>

Paramètres

Description

paramètres

Facultatif. Une collection de paires clé-valeur utilisées pour configurer les requêtes Ajax.

jQuery.ajax([settings])

La valeur par défaut de n'importe quelle option peut être définie via $.ajaxSetup().

参数

描述

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

Obtenez de nouvelles données uniquement lorsque les données du serveur changent. Valeur par défaut : faux. Utilisez les informations d’en-tête Last-Modified du paquet HTTP pour le déterminer. Depuis jQuery 1.4, il vérifie également le « etag » spécifié par le serveur pour s'assurer que les données n'ont pas été modifiées.
jsonp
Type : String

Réécrivez le nom de la fonction de rappel dans une requête jsonp. Cette valeur est utilisée pour remplacer la partie "callback" du paramètre URL dans une requête GET ou POST telle que {jsonp:'onJsonPLoad'} qui entraînera la transmission de "onJsonPLoad=?"
jsonpCallback
Type : String

Spécifiez un nom de fonction de rappel pour la requête jsonp. Cette valeur sera utilisée à la place du nom de fonction aléatoire généré automatiquement par jQuery. Ceci est principalement utilisé pour permettre à jQuery de générer des noms de fonctions uniques afin de faciliter la gestion des requêtes et de fournir des fonctions de rappel et de gestion des erreurs. Vous pouvez également spécifier ce nom de fonction de rappel lorsque vous souhaitez que le navigateur mette en cache les requêtes GET.
mot de passe
Type : Chaîne

Mot de passe utilisé pour répondre à la demande d'authentification d'accès HTTP
processData
Type : Booléen

Valeur par défaut : vrai. Par défaut, les données transmises via l'option data, s'il s'agit d'un objet (techniquement parlant, tant qu'il ne s'agit pas d'une chaîne), seront traitées et converties en chaîne de requête pour correspondre au type de contenu par défaut "application/x -www-form-urlencoded" ". Définissez sur false si vous souhaitez envoyer des informations sur l'arborescence DOM ou d'autres informations que vous ne souhaitez pas convertir.
scriptCharset
Type : String

Uniquement lorsque le dataType demandé est "jsonp" ou "script", et tapez uniquement "GET" sera utilisé pour forcer la modification du jeu de caractères. Généralement utilisé uniquement lorsque les encodages de contenu local et distant sont différents.
succès
Type : Fonction

Fonction de rappel une fois la demande réussie.

Paramètre : Données renvoyées par le serveur et traitées selon le paramètre dataType ; une chaîne décrivant le statut.

C'est un événement de l'Ajax.
traditionnel
Type : Booléen

Si vous souhaitez sérialiser les données de manière traditionnelle, alors set est vrai. Veuillez vous référer à la méthode jQuery.param dans la catégorie Outils.
timeout
Type : Nombre

Définissez le délai d'expiration de la demande (millisecondes). Ce paramètre remplace le paramètre global.
type
Type : Chaîne

Par défaut : "GET"). Méthode de requête ("POST" ou "GET"), la valeur par défaut est "GET". Remarque : D'autres méthodes de requête HTTP telles que PUT et DELETE peuvent également être utilisées, mais ne sont prises en charge que par certains navigateurs.
url
Type : Chaîne

Valeur par défaut : Adresse de la page actuelle. L'adresse à laquelle envoyer la demande.
nom d'utilisateur
Type : Chaîne

Nom d'utilisateur utilisé pour répondre aux demandes d'authentification d'accès HTTP.
xhr
Type : Fonction

Nécessite de renvoyer un objet XMLHttpRequest. La valeur par défaut est ActiveXObject sous IE et XMLHttpRequest sinon. Utilisé pour remplacer ou fournir un objet XMLHttpRequest amélioré. Ce paramètre n'était pas disponible avant jQuery 1.3.

Fonction de rappel

Si vous souhaitez traiter les données obtenues par $.ajax(), vous devez utilisez la fonction de rappel : beforeSend, error, dataFilter, success, complete.

beforeSend

est appelé avant d'envoyer la requête et transmet un XMLHttpRequest en tant que paramètre.

error

est appelée lorsqu'une erreur de requête se produit. En transmettant l'objet XMLHttpRequest, une chaîne décrivant le type d'erreur et un objet d'exception (le cas échéant)

dataFilter

est appelé une fois la requête réussie. Transmettez les données renvoyées et la valeur du paramètre "dataType". Et doit renvoyer de nouvelles données (éventuellement traitées) transmises à la fonction de rappel de réussite.

succès

Appelé après demande. Transmettez les données renvoyées et une chaîne contenant le code de réussite.

complete

Cette fonction est appelée lorsque la requête est terminée, quel que soit le succès ou l'échec. Transmettez l'objet XMLHttpRequest et une chaîne contenant un code de réussite ou d'erreur. La fonction

Type de données

$.ajax() s'appuie sur les informations fournies par le serveur pour traiter les données renvoyées. Si le serveur signale que les données renvoyées sont XML, les résultats renvoyés peuvent être itérés à l'aide de méthodes XML normales ou de sélecteurs jQuery. Si d'autres types sont visibles, tels que HTML, les données sont traitées comme du texte.

Vous pouvez également spécifier d'autres méthodes de traitement des données via l'option dataType. En plus du XML simple, vous pouvez également spécifier du HTML, json, jsonp, un script ou du texte.

Parmi eux, les données renvoyées par les types texte et xml ne seront pas traitées. Les données transmettent simplement l'attribut ResponseText ou ResponseHTML de XMLHttpRequest à la fonction de rappel de réussite.

Remarque : Nous devons nous assurer que le type MIME signalé par le serveur Web correspond au type de données que nous sélectionnons. Par exemple, dans le cas de XML, le serveur doit déclarer text/xml ou application/xml pour obtenir des résultats cohérents.

S'il est spécifié comme type HTML, tout JavaScript intégré sera exécuté avant que le HTML ne soit renvoyé sous forme de chaîne. De même, si le type de script est spécifié, le JavaScript généré côté serveur sera exécuté en premier, puis le script sera renvoyé sous forme de données texte.

Si elles sont spécifiées comme type json, les données obtenues seront analysées comme un objet JavaScript et l'objet construit sera renvoyé comme résultat. Pour y parvenir, il tente d’abord d’utiliser JSON.parse(). Si le navigateur ne le prend pas en charge, une fonction est utilisée pour le construire.

Les données JSON sont une sorte de données structurées qui peuvent être facilement analysées via JavaScript. Si le fichier de données obtenu est stocké sur un serveur distant (avec des noms de domaine différents, c'est-à-dire une acquisition de données inter-domaines), vous devez utiliser le type jsonp. L'utilisation de ce type crée un paramètre de chaîne de requête callback=? qui est ajouté à l'URL demandée. Le serveur doit ajouter le nom de la fonction de rappel avant les données JSON afin de compléter une requête JSONP valide. Si vous souhaitez spécifier le nom du paramètre de la fonction de rappel au lieu du rappel par défaut, vous pouvez définir le paramètre jsonp de $.ajax(). (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir)

Remarque : JSONP est une extension du format JSON. Il nécessite du code côté serveur pour détecter et gérer les paramètres de chaîne de requête.

Si le type script ou jsonp est spécifié, alors lorsque les données sont reçues du serveur, la balise