Home > Article > Web Front-end > Ajax global event reference method and the execution order of each event (global/local)

Ajax global event reference method and the execution order of each event (global/local)

寻∝梦Original: 2018-09-10 14:42:381901browse

This article mainly introduces the global event reference method of ajax and the execution order of each event. Now let’s read this article together

All global events of jquery's ajax method:

ajaxStart: before the ajax request starts

ajaxSend: when the ajax request is made

ajaxSuccess: ajax After getting data

ajaxComplete: When the ajax request is completed

ajaxError: After an error occurs in the ajax request

ajaxStop: After the ajax request is stopped

Global of the ajax method The use of events

When you use jquery's ajax method, whether it is $.ajax(), $.get(), $.load(), $.getJSON(), etc., global events will be triggered by default. Global events are usually not bound, but in fact these global events are very useful.

Ajax global events have a typical application scenario: your page has multiple or even a large number of ajax requests, but these ajax requests have the same message mechanism. A prompt box is displayed before the ajax request starts, prompting "Reading data"; when the ajax request is successful, the prompt box displays "data acquisition successful"; after the ajax request is completed, the prompt box is hidden. The method of not using global events is to add beforeSend, success, and complete callback functions to $.ajax(), and add a processing prompt box in the callback function. The way to use global events is:

$(document).ajaxStart(onStart)
   .ajaxComplete(onComplete)
   .ajaxSuccess(onSuccess);
function onStart(event) {
	//.....
}
function onComplete(event, xhr, settings) {
	//.....
}
function onSuccess(event, xhr, settings) {
	//.....
}

The execution order of each event in jquery is as follows

1.ajaxStart (global event)

2.beforeSend (local event)

3.ajaxSend(global event)

4.success(local event)

5.ajaxSuccess(global event)

6.error(local event)

7.ajaxError (global event)

8.complete (local event)

9.ajaxComplete (global event)

10.ajaxStop (global event )

Example

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
	</head>

	<body>
		<input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
		<p id="ajaxStateID"></p>
		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript">
			$(function() { //点击按钮，并执行ajax请求
				$(document).ajaxStart(function() {
					$("#ajaxStateID").append("ajaxStart" + "<br/>");
					alert("ajaxStart");
				}).ajaxSend(function() {
					$("#ajaxStateID").append("ajaxSend" + "<br/>");
					alert("ajaxSend");
				}).ajaxSuccess(function() {
					$("#ajaxStateID").append("ajaxSuccess" + "<br/>");
					alert("ajaxSuccess");
				}).ajaxError(function() {
					$("#ajaxStateID").append("ajaxError" + "<br/>");
					alert("ajaxError");
				}).ajaxComplete(function() {
					$("#ajaxStateID").append("ajaxComplete" + "<br/>");
					alert("ajaxComplete");
				}).ajaxStop(function() {
					$("#ajaxStateID").append("ajaxStop" + "<br/>");
					alert("ajaxStop");
				});
				$("#ajaxReuqestID").click(function() {
					$.ajax({
						url: "server/ajaxtxt.txt",
						global: true,
						beforeSend: function() {
							$("#ajaxStateID").append("berforeSend" + "<br/>");
							alert("berforeSend");
						},
						success: function() {
							$("#ajaxStateID").append("success" + "<br/>");
							alert("success");
						},
						error: function() {
							$("#ajaxStateID").append("error" + "<br/>");
							alert("error");
						},
						complete: function() {
							$("#ajaxStateID").append("complete" + "<br/>");
							alert("complete");
						}
					});
				});
			});
		</script>
	</body>

</html>

The above is the detailed content of Ajax global event reference method and the execution order of each event (global/local). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript calculates the distance between two places by longitude and latitudeNext article：Javascript calculates the distance between two places by longitude and latitude

See more