Jquery ajax loading prompt information and synchronous loading details

This article will introduce you to jquery ajax loading prompts and synchronous loading details. If you do not know jquery ajax, please refer to it. I hope this tutorial will be helpful to you.

I 've been depressed for a weekend: Why is Singles Day worth celebrating. From online to offline, from cities to rural areas, from college students to common office workers, the whole world is completely crazy. If the time comes, I think I still want to be stripped. Singles Day!
This week's task is mainly the design of a special event at the end of the year. The main technology involved is the use of front-end ajax + jquery. I have always felt that the frontend is harder to write than the backend. Haha, in the case of small traffic, the backend usually does not have any problems, but the front-end can be seen immediately when there is an error .... Through this topic page, you need to improve your understanding of ajax:

1. synchronous and asynchronous ajax Loading.
Ajax loads data asynchronously by default. In short, ajax requests data and you can perform other operations. This is very useful when loading data on webpages. However, sometimes we need ajax for Synchronous requests. For example, for this activity topic, the member needs to enter the gift card number for verification before other operations can be performed. This requires ajax synchronous loading, when ajax requests data, the entire webpage is locked and unavailable. Only when the data request is completeNext step. The following is a jquery ajax tutorial and code:

JQuery. ajax(Options): Load remote data through HTTP requests

This is the underlying AJAX Implementation of jQuery. For easy-to-use high-level implementation, see $. get, $. post, and so on.

$. Ajax () returns the created XMLHttpRequest object. In most cases, you do not need to directly operate on this object, but in special cases it can be used to manually terminate the request.

Note:If you specify the dataType option, make sure that the server returns the correct MIME information (for example, xml returns "text/xml "). Incorrect MIME types may cause unpredictable errors. See Specifying the Data Type for AJAX Requests.
When the datatype type is set to 'script', all remote (not in the same domain) POST requests are switched to GET.

$. Ajax () has only one parameter: The parameter key/value object, which contains information about various configurations and callback functions. For detailed Parameter options, see.

In jQuery 1.2, you can load JSON data across domains. You need to set the data type to JSONP during use. When calling a function in the form of JSONP, such as "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function. When the data type is set to "jsonp", jQuery automatically calls the callback function. (I don't quite understand this)

Parameter List:

 

Parameter Name	Type	Description
Url	String	(Default: Current page address) the address of the request sent.
Type	String	(Default: "GET") Request Method ("POST" or "GET"). The default value is "GET ". Note: Other HTTP request methods Such as PUT and DELETE can also be used, but only some browsers support it.
Timeout	Number	Set the request timeout (in milliseconds ). This setting overwrites the global setting.
Async	Boolean	(Default: true) by default, all requests are asynchronous requests. If you want to send a synchronization request , Set this option to false . Note: The synchronous request locks the browser. Other operations can be performed only after the request is completed.
BeforeSend	Function	Before sending a request, you can modify the function of the XMLHttpRequest object, such as adding a custom HTTP header. . The XMLHttpRequest object is a unique parameter. function (XMLHttpRequest) { this; // the options for this ajax request }
Cache	Boolean	(Default: true) New jQuery 1.2 function. setting this parameter to false will not load request information from the browser cache.
Complete	Function	Callback Function after the request is complete (called when the request is successful or fails ). Parameter: XMLHttpRequest object , Success information string. function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
ContentType	String	(Default: "application/x-www-form-urlencoded") Content Encoding type when sending information to the server . The default value is applicable to most applications.
Data	Object, String	The data sent to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL . View the description of the processData option to disable automatic conversion. It must be in Key/Value format. If it is an array, JQuery automatically maps different values to the same name. For example, {foo: ["bar1", "bar2"]} is converted to '& foo = bar1 & foo = bar2 '.
DataType	String	Expected data type returned by the server. If this parameter is not specified, jQuery automatically returns responseXML Based on the MIME information of the HTTP package. Or responseText, which is passed as the callback function parameter. Available values: "Xml": returns an XML document, which can be processed by jQuery. "Html": returns plain text HTML information, including script elements. "Script": returns plain text JavaScript code. Results are not automatically cached. "Json": Return JSON data. "Jsonp": JSONP format. When calling a function in the form of JSONP, For example, "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function.
Error	Function	(Default: automatically determines (xml or html) This method is called when a request fails. This method has three parameters: XMLHttpRequest object , Error message, (possibly) the error object captured. function (XMLHttpRequest, textStatus, errorThrown)  {// Generally, textStatus and errorThown have only one value. this; // the options for this ajax request }
Global	Boolean	(Default: true) Whether to trigger a global AJAX event. Setting false does not trigger global AJAX events. Such as ajaxStart or ajaxStop. Can be used to control different Ajax events
IfModified	Boolean	(Default: false) obtain new data only when the server data changes. Use the Last-Modified header information of the HTTP packet to determine.
ProcessData	Boolean	(Default: true) by default, data sent is converted to an object (technically not a string) With the default content type "application/x-www-form-urlencoded ". If you want to send the DOM tree information or other information that does not want to be converted, set it to false.
Success	Function	Callback Function after successful request. This method has two parameters: the server returns data and returns the status. function (data, textStatus)  { // data could be xmlDoc, jsonObj, html, text, etc...  this; // the options for this ajax request }

 

Here are several Ajax event parameters:BeforeSend,Success,Complete, error.We can define these events to process every Ajax request. Note that this in these Ajax events points to the option Information of the Ajax request (see the image of this in the get () method ).
Read the parameter list carefully. If you want to use jQuery for Ajax development, you must be familiar with these parameters.

This time, the async parameter is used.

2. Information displayed when ajax requests data.

Although this effect is often seen on some web pages, I still don't know how to implement it. This time I carefully reviewed Baidu and learned a new thing: the global event of the jquery ajax request: the information is as follows:

AjaxStart(Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

• BeforeSend(Local Event)
  This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be .)
• AjaxSend(Global Event)
  This global event is also triggered before the request is run.
• Success(Local Event)
  This event is only called if the request was successful (no errors from the server, no errors with the data ).
• AjaxSuccess(Global Event)
  This event is also only called if the request was successful.
• Error(Local Event)
  This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request ).
• AjaxError(Global Event)
  This global event behaves the same as the local error event.
• Complete(Local Event)
  This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
• AjaxComplete(Global Event)
  This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

AjaxStop(Global Event)
This global event is triggered if there are no more Ajax requests being processed.

For details about global events, refer to the API documentation.

Through the above documents, I finally learned that there were two global events in the original jquery ajax request, ajaxStart and ajaxStop; well, with these two events, it is very easy to implement the effect of turning circles when ajax requests data.

$ ('# Div'). ajaxStart (function () {// div is the block alert ('data request .... ');}). AjaxStop ('data request completed ');

In summary, we think we will do something, but when we use it, we often find that we don't know anything. We have to ask Baidu for help. Maybe continuous summarization is the best method .!