The jquery framework is a simple description of how $.ajax () is used

Source: Internet
Author: User
Tags http request json string format browser cache

The Ajax () method loads remote data through an HTTP request.

The approach is the jQuery-bottom AJAX implementation. Simple and easy-to-use high-level implementation see $.get, $.post, etc. $.ajax () returns the XMLHttpRequest object that it created. Most of the time you don't have to manipulate the function directly, unless you need to manipulate the infrequently used options for more flexibility.

In the simplest case, $.ajax () can be used directly without any parameters.

Note: All options can be set globally by the $.ajaxsetup () function

Instance

The code is as follows Copy Code

$.ajax ({
Type: ' Post ',//optional get
URL: ' action.php ',//Here is the PHP program to receive the data
Data: ' data= ' DSA,//passed to PHP, multiple parameters & connection
DataType: ' text ',//server returned data type optional XML, Json jsonp script HTML text, etc.
Success:function (msg) {
Here is the data processing function returned by the PHP program after the successful AJAX submission. MSG is the returned data, and the data type is defined in the datatype parameter!
},
Error:function () {
Ajax commit failed processing function!
}
})
PHP action.php
<?php
echo "Www.111cn.net";
?>


Instance

To load a piece of text with AJAX:

The code is as follows Copy Code

JQuery Code:

$ (document). Ready (function () {
$ ("#b01"). Click (function () {
Htmlobj=$.ajax ({url: "/jquery/test1.txt", Async:false});
$ ("#myDiv"). HTML (htmlobj.responsetext);
});
});
HTML Code:

<div id= "mydiv" ><button id= "B01" type= "button" >change content</button>


Instance

JQuery Ajax Events

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

A local event is defined within a method at each AJAX request, for example:

The code is as follows Copy Code
$.ajax ({
Beforesend:function () {
Handle the Beforesend Event
},
Complete:function () {
Handle the Complete event
}
// ...
});

Global events are triggered every time an AJAX request is made, and it broadcasts to all elements in the DOM, and the script loaded in the Getscript () example above is a global Ajax event. Global events can be defined as follows:

The code is as follows Copy Code

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

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

We can disable global events at a specific request, as long as you set the global option:

The code is as follows Copy Code
$.ajax ({
URL: "Test.html",
global:false,//disables global Ajax events.
// ...
});

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, are also available, 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 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 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, Success message 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. 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 you are an 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 the HTTP packet MIME information and pass as a callback function argument, available values:

XML: Returns an XML document that can be processed with jQuery.

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 a function is called using the jsonp , as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function.

 

 

 

 

 

Error Function (Default: Automatic judgment (XML or HTML)) This method is called when a request fails. This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being caught.
function (XMLHttpRequest, Textstatus, Errorthrown) {this//the options for this
  
  ajax request
}
Global Boolean (default: TRUE) triggers a global AJAX event. Setting 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).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.