jquery Ajax loading hints and synchronized loading details

I have been depressed for a weekend: Why is the Singles Day so worthy of everyone to celebrate. From the line to the line, from the city to the countryside, from college students to ordinary office workers, the whole world completely crazy. If the time comes, I think, I still want to strip naked. Roller Ball Singles Day!
This week's task is mainly the design of a project at the end of the year. The main technology involved is the use of front-end ajax+jquery. I always felt the front end was harder to write than the back end. Oh, in the case of small flow, the back end generally will not have any problems, but the front end of a mistake can be seen immediately .... Through this topic page your own understanding of Ajax to improve a little:

1.ajax Synchronous and asynchronous loading .
Because the AJAX default is asynchronous loading, the so-called asynchronous, simple is the AJAX request data while you can do other operations . This is very useful when loading data on a typical web page. But sometimes, we do need Ajax to sync requests. For example: This event, such as the theme of the project, you need to enter a gift card number for verification, and then you can do other operations, this needs to be synchronized with Ajax loading, the so-called synchronization is, Ajax in the request data, the entire page is locked, not available . you can do the next step only if the data request is complete . Here's a jquery Ajax tutorial and code:

Jquery.ajax (options): Load remote Data via HTTP request

This is the underlying AJAX implementation of jquery. Simple and easy-to-use high-level implementation see $.get, $.post, etc.

$.ajax () returns the XMLHttpRequest object that it created. In most cases you do not need to manipulate the object directly, but in special cases you can use it to manually terminate the request.

Note: If you specify the DataType option, make sure that the server returns the correct MIME information (such as the XML return "Text/xml"). The wrong MIME type can cause unpredictable errors. See Specifying the Data Type for AJAX Requests.
When you set the DataType type ' script ', all remote (not in the same domain) post requests are converted back to get mode.

$.ajax () has only one parameter: The parameter Key/value object, which contains the configuration and callback function information. Detailed parameter options see below.

In JQuery 1.2, you can load JSON data across domains and use it to set the data type to JSONP. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function. When the data type is set to "Jsonp", JQuery automatically invokes the callback function. (I don't know this very well)

Parameter list:

Name of parameter	Type	Describe
Url	String	(Default: Current page address) sends the requested address.
Type	String	(Default: "Get") Request method ("POST" or "get"), default to "get". Note: Other HTTP request methods , such as put and DELETE can also be used, but only partially supported by browsers.
Timeout	Number	Sets the request timeout (in milliseconds). This setting overrides the global setting.
Async	Boolean	(Default: TRUE) The default setting is that all requests are asynchronous requests. If you need to send a sync request , set this option to False 。 Note that the synchronization request will lock the browser and the user's other actions must wait for the request to complete before it can be executed.
Beforesend	Function	You can modify the function of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header 。 The XMLHttpRequest object is the only parameter. function This //The options for this AJAX request }
Cache	Boolean	(default: TRUE) JQuery 1.2 new functionality, set to false will not load request information from the browser cache.
Complete	Function	The callback function (called when the request succeeds or fails) after the request completes. Parameters: XMLHttpRequest Object , the 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 。 Default values are appropriate for most applications.
Data	Object, String	Data sent to the server. is automatically converted to the request string format. The GET request is appended to the URL 。 View the ProcessData option description to prevent this automatic conversion. Must be in the Key/value format. If the array, JQuery will automatically correspond to the same name for different values. such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2 '.
dataType	string	The type of data that is expected to be returned by the server. If not specified, JQuery will automatically return responsexml  or responsetext based on HTTP packet MIME information and pass as a callback function parameter, available values: "xml": Returns an XML document, available JQ Uery processing. HTML: Returns plain text HTML information, including script elements. Script: Returns the plain text JavaScript code. Results are not automatically cached. "JSON": Returns JSON data. "JSONP": Jsonp format. When calling a function using the JSONP form, such as "myurl?callback=?" JQuery is automatically replaced with the correct function name to perform the callback function.
Error	Function	(Default: Automatic judgment (XML or HTML)) This method is called when a request fails. This method has three parameters: XMLHttpRequest Object , error message, (possibly) a captured Error object. function (XMLHttpRequest, Textstatus, Errorthrown) This //The options for this AJAX request }
Global	Boolean	(default: TRUE) triggers a global AJAX event. Set to false will not trigger global AJAX events , such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events
Ifmodified	Boolean	(default: false) gets new data only when the server data changes. Use HTTP packet last-modified header information to determine.
ProcessData	Boolean	(default: TRUE) by default, the data sent is converted to an object (technically not a string) To match the default content type "application/x-www-form-urlencoded". Set to False if you want to send DOM tree information or other information that you do not want to convert.
Success	Function	callback function after successful request. This method has two parameters: the server returns the data, returns the status function (Data, Textstatus) //data could be xmldoc, jsonobj, HTML, text, etc ... This //The options for this AJAX request }

Here are a few Ajax event parameters:beforesend ,success ,complete, error. We can define these events to deal well with each of our AJAX requests. Notice that this in these Ajax events is The information about the options for the Ajax request (refer to the picture of this when you say Get () method).
Read the argument list carefully, and if you want to use jquery for AJAX development, you need to be familiar with these parameters.

This time the main use is async this parameter.

2.ajax prompts for information when requesting data.

Although this effect is often seen on some web pages, but always do not know how to achieve, this time carefully Baidu, learned a new thing is jquery Ajax request Global events: The data are as follows:

Ajaxstart(Global Event)
This event is broadcast if a AJAX request is started and no other AJAX requests are currently running.

• Beforesend (Local Event)
  This event, which are triggered before an Ajax request is started, allows your to modify the XMLHttpRequest object (setting Additional headers, if need be.)
• Ajaxsend (Global Event)
  This global event was 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 and no errors with the data).
• ajaxsuccess (Global Event)
  This event is also only called if the request was successful.
• Error (Local Event)
  This is the ' only called if ' occurred with the ' request (you can never have both an error and a success callback W ith 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'll always receive a complete callback, even for synchronous requests.
• Ajaxcomplete (Global Event)
  This event behaves the same as the complete event and would be triggered every time of Ajax request finishes.

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

For specific global events, refer to the API documentation.

Through the above document, finally know the original jquery Ajax request when there are two global events, Ajaxstart and ajaxstop; Well, with these two events, Ajax request data when the turn of the circle ah and so the effect is very easy to achieve.

$ (' #div '). Ajaxstart (function() {//div is the block 
  alert(' data request ...) thatis displayed when you want to make a data prompt . '); }). Ajaxstop (' Data request completed ');

Summary, there are some things we think we will, but when the use of the time will often find that they do not, must have to help Baidu. Perhaps the best way is to keep summarizing.