A detailed explanation of jquery's various AJAX functions

$.get (), $.post (), $.ajax (), $.getjson ()

A, $.get (Url,[data],[callback])

Description: URL is the request address, data is the list of request data, callback is the callback function after the successful request, the function accepts two parameters, the first is the data returned by the server, the second parameter is the state of the server, is an optional parameter.

In this case, the format of the server return data is actually a string situation, not the JSON data format we want, in this reference just to compare the description

$.get ("data.php", $ ("#firstName. Val ()"), function (data) {$ ("#getResponse"). HTML (data); The returned data is a string type);

II, $.post (Url,[data],[callback],[type])

Description: This function is similar to the $.get () parameter, has a type parameter, type is the requested data type, can be a type of Html,xml,json, if we set this parameter to: JSON, then the returned format is in JSON format, if not set, and $. Get () returns the same format as the string.

$.post ("data.php", $ ("#firstName. Val ()"), function (data) {$ ("#postResponse"). HTML (data.name);}, "JSON"//sets the type of Get data , so the resulting data format is JSON type);

Sam, $.ajax (Opiton)

Description: $.ajax () This function is powerful, you can do a lot of precise control of Ajax, please refer to the relevant information for detailed description

$.ajax ({url: "ajax/ajax_selectpictype.aspx", Data:{full: "Fu"},type: "POST", DataType: ' JSON ', success:callback,error : function (er) {backerr (er);}});

Thu, $.getjson (Url,[data],[callback])

$.getjson ("data.php", $ ("#firstName. Val ()"), function (Jsondata) {$ ("#getJSONResponse"). HTML (jsondata.id); There is no need to set up, directly get the data type is JSON, so call need to use jsondata.id mode);

When Ajax meets JQuery Ajax-based applications are now more and more, and for front-desk developers, it is not a pleasant thing to deal directly with the underlying HttpRequest. Since jquery encapsulates JavaScript, it must have considered the problem of AJAX applications. Indeed, if using jquery to write Ajax would be more convenient than the direct use of JS write n times. (Do not know the long with jquery, will not lose the knowledge of JS ...) This assumes that you are already familiar with the jquery syntax to summarize some of the applications of Ajax.
Loading static pages

Load (URL, [data], [callback]);

URL address of the URL (String) of the requested HTML page
Data (MAP) (optional parameters) sent to the server Key/value
Callback (callback) (optional parameter) callback function when the request is complete (does not need to be success)
The load () method can easily load static page content into a specified jquery object.

$ (' #ajax-div '). Load (' data.html ');

In this way, the contents of the data.html will be loaded into the DOM object with ID ajax-div. You can even implement an AJAX operation that loads some content by making an ID, such as:

$ (' #ajax-div '). Load (' data.html#my-section ');

Implementing the Get and Post methods

Get (URL, [data], [callback])

URL (String) to send the requested URL address.
Data (MAP) (optional parameter) to be sent to the server, expressed as a Key/value key-value pair, is appended to the request URL as QueryString
Callback (callback) (optional parameter) The callback function when loading succeeds (only if the return state of response is success the method is called)
Obviously this is a function that implements get mode, which is quite simple to use.

$.get (' login.php ', {   id      : ' Robin ',   password: ' 123456 ',   gate    : ' Index '  }, function (data, Status) {   //data is the return object, status is the requested State   alert (data);   At this point, assume that the server script returns a text "Hello, robin! , then the browser pops up a dialog box to display the text   alert (status);   The result is success, error, and so on, but this is the function that will run when it succeeds  });

Post (URL, [data], [callback], [type])

URL (String) to send the requested URL address.
Data (MAP) (optional parameter) to be sent to the server, expressed as a Key/value key-value pair
Callback (callback) (optional parameter) The callback function when loading succeeds (only if the return state of response is success the method is called)
Type (String) (optional parameter) request data types, Xml,text,json, etc.
is also a handy function of jquery, in fact the usage

$.post (' regsiter.php ', {   ID: ' Robin ',   password: ' 123456 ',   type: ' User '  },function (data, status) {   alert (data);  }, "json");

Event-Driven script loader function: GetScript ()

GetScript (URL, [callback])

URL (String) to be loaded into the JS file address
Callback (function) (optional) After successful load callback function
The GetScript () function can be loaded remotely into JavaScript scripts and executed. This function can be loaded into JS files across domains (magical ...!!). ）。 The meaning of this function is huge, it can greatly reduce the amount of code that the page loads initially, because you can load the corresponding JS file according to the user's interaction, without having to load it all when the page is initialized.

$.getscript (' Ajaxevent.js ', function () {   alert ("Scripts loaded!");   Loads the Ajaxevent.js and displays a dialog prompt after a successful load.  });

Building a bridge for data communication: Getjson ()

Getjson (Url,[data],[callback])

URL (String) to send request address
Data (MAP) (optional) Key/value parameters to be sent
Callback (function) (optional) The callback function when loading succeeds.
JSON is an ideal data transmission format, it can be well fused with JavaScript or other host language, and can be used directly by JS. Using JSON to send "naked" data directly through GET, post, is structurally more reasonable and more secure. As for jquery's Getjson () function, it's just a simplified version of the Ajax () function that sets the JSON parameter. This function can also be used across domains, with a certain advantage over get () and post (). In addition, this function can be used to write the request URL as a "myurl?callback=x" format, so that the program executes the callback function X.

$.getjson (' feed.php ', {   request:images,   ID:      001,   size:    large   }, function (JSON) {    alert (json.images[0].link);    Here JSON is the JSON object that is returned remotely, assuming the format is as follows:    //{' images ': [    //{link:images/001.jpg, x:100, y:100},    //{Link:image S/002.jpg, x:200, y:}    //]};   } );

Lower-level Ajax () functions
Although the get () and post () functions are very simple and easy to use, some of the more complex design requirements are not achievable, such as making different moves during the different periods of time that Ajax sends. jquery provides a more specific function: Ajax ().

Ajax (Options)

Ajax () provides a large amount of parameters, so you can implement quite complex functions.

Name of parameter	Type	Describe
Url	String	(Default: Current page address) sends the requested address.
Type	String	(Default: "Get") The Request method ("POST" or "get"), the default is "get". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support it.
Timeout	Number	Sets the request time-out (in milliseconds). This setting overrides the global settings.
Async	Boolean	(default: TRUE) by default, all requests are asynchronous requests. If you need to send a synchronization request, set this option to false. Note that the sync 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 functions of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header. The XMLHttpRequest object is the only parameter. function (XMLHttpRequest) {this;//the options for this AJAX request}
Cache	Boolean	(default: TRUE) JQuery 1.2 new feature, set to False will not load the request information from the browser cache.
Complete	Function	The callback function after the request completes (called when the request succeeds or fails). Parameters: XMLHttpRequest Object, Success information string. function (XMLHttpRequest, textstatus) {this;//the options for this AJAX request}
ContentType	String	(Default: "application/x-www-form-urlencoded") the content encoding type when sending information to the server. The default values are suitable for most applications.
Data	Object, String	Data sent to the server. is automatically converted to the request string format. The GET request will be appended to the URL. View the ProcessData option description to disallow this automatic conversion. Must be a key/value format. If an array, JQuery automatically corresponds to the same name for the different values. such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2′.
DataType	String	Expected data type returned by the server. If not specified, JQuery will automatically be based on the HTTP packet MIME information Returns Responsexml or ResponseText, and is passed as a callback function parameter, with the available values: "XML": Returns an XML document that can be processed with jQuery. HTML: Returns plain text HTML information, including the script element. "Script": Returns plain text JavaScript code. Results are not automatically cached. "JSON": Returns the JSON data. "JSONP": Jsonp format. When a function is called using the JSONP form, Like "myurl?callback=?" JQuery will be replaced automatically? is the correct function name to execute the callback function.
Error	Function	(Default: This method is called when a request for automatic judgment (XML or HTML) fails.) This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being captured. function (XMLHttpRequest, textstatus, Errorthrown) {//normally textstatus and Errorthown only one of which has the value of this; AX Request}
Global	Boolean	(default: TRUE) whether to trigger global AJAX events. Setting to False will not trigger a global AJAX event. such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events
Ifmodified	Boolean	(default: false) to get new data only when the server data changes. Use the HTTP packet last-modified header information to determine.
ProcessData	Boolean	(default: TRUE) by default, the sent data 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	The callback function after the request succeeds. This method has two parameters: the server returns data, returns the status function (data, textstatus) {//data could be xmldoc, jsonobj, HTML, text, etc ... This The options for this AJAX request}

You can specify XML, script, HTML, JSON as its data type, you can set the processing function for Beforesend, error, sucess, complete and other states, and many other parameters can also be customized to completely define the user's Ajax experience. In the following example, we use Ajax () to invoke an XML document:

$.ajax ({    URL: ' doc.xml ',    type: ' GET ',    dataType: ' xml ',    timeout:1000,    error:function () {        Alert (' Error loading XML document ');    },    success:function (XML) {        alert (XML);  Here XML is the jquery object of XML, you can use Find (), next () or XPath, and other methods in the search for nodes, and the use of jquery to manipulate HTML objects without distinction    });

Learn more about AJAX events
Some of the methods discussed earlier have their own event handling mechanism, which can only be described as local functions from the overall page. jquery provides the definition of an AJAX global function to meet specific requirements. The following are all the functions provided by jquery (in the order of the triggering sequence below):

Ajaxstart

(global event) starts a new AJAX request, and no other AJAX request is in progress at this time

Beforesend

(local event) is triggered when an AJAX request starts. If necessary, you can set the XMLHttpRequest object here

Ajaxsend

global event triggered before the request starts (global event)

Success

triggered when the request is successful (local event). That is, the server does not return an error and the returned data is not error

Ajaxsuccess

Global Event Global request succeeded

Error

(local event) is triggered only when an error occurs. You cannot perform both success and error two callback functions at the same time

Ajaxerror

global event triggered when an error occurs globally

Complete

(Local event) Whether you request success or failure, even if the request is synchronous, you can trigger the event when the request is complete

Ajaxcomplete

triggered when global event global request completes

Ajaxstop

(global event) triggered when no Ajax is in progress

Local events are described in previous functions, and we look at global events in the main. A global event listener for an object will have an impact on the global Ajax action. For example, when the page is doing an AJAX operation, the DIV with the id "loading" is displayed:

$ ("#loading"). Ajaxstart (function () {   $ (this). Show ();});

Global events can also help you write global errors appropriately and successfully accordingly, without having to set up independently for each AJAX request. It is necessary to point out that the parameters of the global event are useful. In addition to Ajaxstart, Ajaxoptions, other events have event, XMLHttpRequest, ajaxoptions three parameters. The first parameter is the event itself, the second is the XHR object, and the third is the Ajax parameter object that you passed. Displays the global AJAX situation in an object:

$ ("#msg"). Beforesend (function (e,xhr,o) {$ (this). HTML ("requesting" +o.url). Ajaxsuccess (function (e,xhr,o) {$ (this). HTML (o.url+ "request succeeded");}). Ajaxerror (function (e,xhr,o) {$ (this). HTML (o.url+ "request Failed");});

Obviously, the third parameter can also help you pass the custom parameters you added to the Ajax event. In a single AJAX request, you can set the value of global to false to make this request independent of the Ajax global event.

$.ajax ({   URL: "request.php",   global:false,   //disables global AJAX events.});

If you want to set parameters for global Ajax, you will use the Ajaxsetup () function. For example, pass all AJAX requests to request.php, disable the global method, and force the Post method to pass:

$.ajaxsetup ({  URL: "request.php",  global:false,  type: "POST"});

Some of the ways you have to know
Ajax must be written to get the corresponding value from the page. Here are some simple ways to enumerate:

Val ()

The Val () function can return the value of a form's build, such as the value of any kind of input. With the selector action, you can easily get the value of an option group, input box, button, and so on.

$ ("Input[name= ' info ']:text"). Val ();//Returns the value of the text box named info $ ("Input[name= ' Pass '):p Assword"). Val ();//Returns the value of the password box with the name Pass ( "Input[name= ' save ']:radio"). Val ();//Returns the value of the single option named save//And so on

Serialize ()

The Serialize function can help you convert all the values of a Form object to a sequence of strings. This is handy if you want to write a get format request.

Serializearray ()

similar to serialize () except that it returns a JSON object.

Ajax Application Reference
(WordPress) using JQuery to implement AJAX messages: http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html
Use jquery to facilitate AJAX-based data query, sorting, and paging capabilities: http://www.malsup.com/jquery/form/

Http://www.cnblogs.com/henryfan/archive/2007/01/27/631954.html
Jquery–ajax No Refresh Save example: http://www.phpchina.com/1296/viewspace_12580.html
Reference documents
Simplifying Ajax development with JQuery: http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html
JQuery official Documention:http://docs.jquery.com/ajax
JQuery Ajax Full parsing: http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.html
Ajax events in jquery: Http://shawphy.com/2008/08/ajax-event-in-jquery.html Tags: javascript, Yuzhongwusan

A detailed explanation of jquery's various AJAX functions