Ajax global event reference method and the execution order of each event (global/local)-JS Tutorial-php.cn

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

寻∝梦

Release： 2018-09-10 14:42:38

Original

1943 people have browsed it

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) {
	//.....
}

Copy after login

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>

Copy after login

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!