Ajax in jquery (vi)

Source: Internet
Author: User
Tags getscript http post browser cache connectionstrings

One: Ajax requests
Jquery.ajax (Options)
Load (Url,[data],[callback])
Jquery.get (Url,[data],[callback])
Jquery.getjson (Url,[data],[callback])
Jquery.getscript (Url,[callback])
Jquery.post (Url,[data],[callback])


1.jquery.ajax (Options)
Load remote data over HTTP requests.
JQuery underlying AJAX implementations. Returns the XMLHttpRequest object to which it was created. In most cases you do not need to manipulate the object directly, but in special cases you can use it to terminate the request manually.
$.ajax () has only one parameter: The parameter Key/value object, which contains the configuration and callback function information.
Note 1: If you specify the DataType option, make sure that the server returns the correct MIME information (such as XML returns "Text/xml"). Incorrect MIME type can cause unpredictable errors

NOTE 2: If datatype is set to "script", all post requests that are remote (not under the same domain name) will be converted to get requests. (because the script tag of the DOM will be used to load)
return value
XMLHttpRequest
Parameters
Options (optional): AJAX request settings. All options are optional.
Options
Async (Boolean): (Default: TRUE) The default setting, 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): Functions that modify the XMLHttpRequest object before sending a request, such as adding a custom HTTP header. The XMLHttpRequest object is the only parameter.
function (XMLHttpRequest) {
This Options parameters passed when calling this Ajax request

}

Cache (Boolean): (Default: True,datatype is script when default is False) JQuery 1.2 new feature, set to False will not load request information from the browser cache.
Complete (function): The callback function after the request completes (called when the request succeeds or fails). Parameters: The XMLHttpRequest object and a string that describes the successful request type.
function (XMLHttpRequest, textstatus) {
This Options parameters passed when calling 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): 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"]} converted to ' &foo=bar1&foo=bar2 '.

DataType (String): Expected data type returned by the server. If not specified, JQuery automatically returns Responsexml or ResponseText based on the HTTP packet MIME information 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. Unless the "cache" parameter is set
"JSON": Returns the JSON data.

Error (Function): (Default: Auto-judge (XML or HTML)) call time when request fails. Parameters: XMLHttpRequest Object, error message, (optional) caught Error object. Ajax events.
function (XMLHttpRequest, textstatus, Errorthrown) {
Usually among Textstatus and Errorthrown
Only one will contain information
This Options parameters passed when calling this Ajax request
}

Example
Loads and executes a JS file.
JQuery Code:
$.ajax ({
Type: "GET",
URL: "Test.js",
DataType: "Script"
});
Save the data to the server and display the information when it succeeds.
JQuery Code:
$.ajax ({
Type: "POST",
URL: "some.php",
Data: "Name=john&location=boston",
Success:function (msg) {
Alert ("Data Saved:" + msg);
}
});

Load the latest version of an HTML page. JQuery Code: $.ajax ({
URL: "Test.html",
Cache:false,
Success:function (HTML) {
$ ("#results"). Append (HTML);
}
}); Load data synchronously. Lock the browser while sending the request. Use synchronization when you need to lock down user interactions. JQuery code: var html =$.ajax ({
URL: "some.php",
Async:false
}). responsetext;

Ii. Jquery.get (Url,[data],[callback])
The information is loaded through a remote HTTP GET request.
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.
return value
XMLHttpRequest
Parameters
URL (String): The URL address of the page to be loaded
Data (MAP): (optional) key/value parameter to be sent.
Callback (function): (optional) The callback function when loading succeeds.

Example
Requests the test.php Web page, ignoring the return value.
JQuery Code:
$.get ("test.php");
Request test.php Web page, transfer 2 parameters, ignore the return value.
JQuery Code:
$.get ("test.php", {name: "John", Time: "2pm"});

Displays the test.php return value (HTML or XML, depending on the return value).
JQuery Code:
$.get ("test.php", function (data) {
Alert ("Data Loaded:" + data);
});
Displays the test.cgi return value (HTML or XML, depending on the return value), and adds a set of request parameters.
JQuery Code:
$.get ("test.cgi", {name: "John", Time: "2pm"},
function (data) {
Alert ("Data Loaded:" + data);
});

Three: Jquery.getjson (Url,[data],[callback])
The JSON data is loaded via an HTTP GET request.

Note: The subsequent code of this line will be executed before this callback function executes.
return value
XMLHttpRequest
Parameters
URL (String): Sends the request address.
Data (MAP): (optional) key/value parameter to be sent.
Callback (function): (optional) callback function when loading succeeds

Example
Load 4 new pictures of cats from the Flickr JSONP API.
HTML Code:
<div id= "Images" ></div>
JQuery Code:
$.getjson ("Http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json &jsoncallback=? ", function (data) {
$.each (Data.items, function (I,item) {
$ ("ITEM.MEDIA.M). AppendTo ("#images");
if (i = = 3) return false;
});
});

Loads JSON data from Test.js and displays a name field data from the JSON data.
JQuery Code:
$.getjson ("Test.js", function (JSON) {
Alert ("JSON Data:" + json.users[3].name);
});
Load JSON data from Test.js, append parameters, and display a name field data from the JSON data.
JQuery Code:
$.getjson ("Test.js", {name: "John", Time: "2pm"}, function (JSON) {
Alert ("JSON Data:" + json.users[3].name);
});

Four: Jquery.getscript (Url,[callback])
Loads and executes a JavaScript file via an HTTP GET request.
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.
return value
XMLHttpRequest
Parameters
URL (String): The JS file address to be loaded.
Callback (function): (optional) The post-load callback function is successfully loaded.

Example
Load the JQuery official color animation plugin after successful binding color change animation.
HTML Code:
<button id= "Go" >»Run</button>
<div class= "Block" ></div>
JQuery Code:
Jquery.getscript ("Http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
function () {
$ ("#go"). Click (function () {
$ (". Block"). Animate ({backgroundcolor: ' Pink '}, 1000)
. Animate ({backgroundcolor: ' Blue '}, 1000);
});
});


Load and execute the test.js.
JQuery Code:
$.getscript ("Test.js");
Load and execute test.js, and display the information after success.
JQuery Code:
$.getscript ("Test.js", function () {
Alert ("Script loaded and executed.");
});

V: Jquery.post (Url,[data],[callback])
Loading information through a remote HTTP POST request.
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.
return value
XMLHttpRequest
Parameters
URL (String): Sends the request address.
Data (MAP): (optional) key/value parameter to be sent.
Callback (function): (optional) callback function when sending successfully.

Code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Implement bulk Delete:

<%@ page language= "C #" autoeventwireup= "true" codefile= "19-2.aspx.cs" inherits= "T19_jquery" _19_2 in AJAX applications%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Background code:

protected void Page_Load (object sender, EventArgs e)    {        if (request["IDs"]! = null)        {            string ids = Request . querystring["IDs"];            String strSQL = "Delete from the Employee where ID in (" + IDs + ")";            Response.Write ("{success:true}");        }        else            Response.Write ("{success:false}");    }

Ajax in jquery (vi)

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.