JQuery Ajax (Load,post,get,ajax) usage and explanation

Today saw the group inside the Netizen asked the jquery Ajax (Load,post,get,ajax) between the difference, now collated an article out, hope can help netizens, first we first look at some simple method,

These are methods that encapsulate Jquery.ajax () to facilitate our use, and of course, if you are dealing with complex logic, you still need to use the Jquery.ajax () (which is said later).

1. Load (URL, [data], [callback]): Load the remote HTML file code and insert it into the DOM.

URL (String): The URL address of the requested HTML page.

Data (MAP): (optional parameter) Key/value data sent to the server.

Callback (Callback): (optional parameter) callback function when the request is complete (not required to be success).

This method is passed by default using GET, and is automatically converted to post if the [data] parameter is passed in. In JQuery 1.2, you can specify selectors,

To filter the loaded HTML document, only the filtered HTML code will be inserted in the DOM. Syntax such as "URL #some > selector".

This method makes it easy to dynamically load some HTML files, such as forms.

Example code:

$ (". Ajax.load"). Load ("http://www.baidu.com", Function (ResponseText, textstatus, XMLHttpRequest) {this;// Here this is pointing to the current DOM object,

That is $ (". Ajax.load") [0]//alert (responsetext);//Request returned content//alert (textstatus);//Request Status: Success,error//alert ( XMLHttpRequest);//xmlhttprequest object});

Note: Do not know why URL write absolute path under FF will error, know the trouble to tell under. The Get () and post () examples below use an absolute path, so you will get an error under FF and you will not see the results returned. The Get () and post () examples are all cross-domain calls, and there is no way to get the results after the transmission, so the run button is removed.

2. Jquery.get (URL, [data], [callback]): Use Get method to make asynchronous request

Parameters:

URL (String): The URL address of the sending request.

Data (MAP): (optional) data to be sent to the server, expressed as a Key/value key-value pair, will be appended to the request URL as querystring.

Callback (function): (optional) The callback function when loading succeeds (the method is called only if the return state of response is success).

This is a simple GET request feature to replace complex $.ajax. The callback function can be called when the request succeeds. If you need to execute the function on error, use $.ajax. Example code:

$.get ("./ajax.aspx", {Action: "Get", Name: "Lulu"}, function (data, textstatus) {///The data returned can be xmldoc, jsonobj, HTML, text, And so on. this; Here this point is the option configuration information for the AJAX request, please refer to alert (data),//alert (Textstatus),//Request status: Success,error, etc.

Of course, the error is not caught here, because the error does not run the callback function at all//alert (this);});
Click Send Request:

The This in the Jquery.get () callback function points to the option configuration information for the AJAX request:

3. Jquery.post (URL, [data], [callback], [type]): Use post to make asynchronous requests

Parameters:

URL (String): The URL address of the sending request.

Data (MAP): (optional) data to be sent to the server, expressed as a Key/value key-value pair.

Callback (function): (optional) The callback function when loading succeeds (the method is called only if the return state of response is success).

type (String): (optional) The official description is: Type of data to be sent. The type that should actually be requested for the client (Json,xml, etc.)

This is a simple POST request function to replace the complex $.ajax. The callback function can be called when the request succeeds. If you need to execute the function on error, use $.ajax. Example code:

Ajax.aspx:

Response.ContentType = "Application/json"; Response.Write ("{result: '" + request["Name"] + "Hello! (The message comes from the server) '} ');
JQuery Code:

$.post ("Ajax.aspx", {Action: "Post", Name: "Lulu"},function (data, textstatus) {//data can be xmldoc, jsonobj, HTML, text, And so on.//this; For the option configuration information for this Ajax request, refer to Jquery.get () Thisalert (Data.result);}, "JSON");
Click Submit:

The format of the request is "JSON":

If you set the request format to "JSON", at this point you do not have to set Response back ContentType: Response.ContentType = "Application/json"; Then you will not be able to capture the returned data.

Note that alert (data.result); Because the Accept header is set to "JSON", the data returned here is an object and does not need to be converted to an object using eval ().

4. Jquery.getscript (URL, [callback]): Request to load and execute a JavaScript file via GET mode.

Parameters
URL (String): The JS file address to be loaded.

Callback (function): (optional) The post-load callback function is successfully loaded.

Before the JQuery 1.2 version, GetScript can only invoke the same domain JS file. 1.2, you can call JavaScript files across domains. Note: Safari 2 or earlier cannot execute scripts synchronously in the global scope. If you join the script through GetScript, add the delay function.

This method can be used for example, when only the editor focus () to load the editor needs the JS file. Here are some sample code:

Load and execute the test.js.

JQuery Code:

$.getscript ("Test.js");

--------------------------------------------------------------------------------

Load and execute ajaxevent.js, and display the information after success.

JQuery Code:

$.getscript ("Ajaxevent.js", function () {alert ("Ajaxevent.js") completes and executes. Do you click the Get or Post button above to see what's different? ");});

JQuery Ajax Events

Ajax requests generate a number of different events, and we can subscribe to these events and handle our logic in them. There are two types of Ajax events in jquery: Local events and global events.

A local event is defined within a method every time an AJAX request is requested, for example:

$.ajax ({beforesend:function () {///Handle the Beforesend event},complete:function () {//Handle the complete event}//...});
The global event is triggered every time an AJAX request is made, it broadcasts to all elements in the DOM, and the script loaded in the GetScript () example above is the global Ajax event. Global events can be defined as follows:

$ ("#loading"). Bind ("Ajaxsend", function () {$ (this). Show ();}). Bind ("Ajaxcomplete", function () {$ (this). Hide ();});
Or:

$ ("#loading"). Ajaxstart (function () {$ (this). Show ();});
We can disable global events on a specific request, as long as you set the global option:

$.ajax ({url: "test.html", global:false,//disables global AJAX events.//...});

JQuery Ajax (Load,post,get,ajax) usage and explanation