Jquery Ajax usage

I. jquery. Ajax syntax Basics

Jquery. Ajax ([Options])
Overview: Load remote data using HTTP requests.

Jquery underlying Ajax implementation. For easy-to-use high-level implementation, see $. Get, $. Post, and so on. $. Ajax () returns the created XMLHTTPRequest object. Using this method gives you more flexibility.
Data Type
The $. Ajax () function depends on the information provided by the server to process the returned data. You can use the datatype option to specify different data processing methods. The data returned by the text and XML types is not processed. If it is specified as HTML, any embedded Javascript will be executed before HTML is returned as a string. If the JSON type is specified, the obtained data is parsed as a JavaScript Object and the constructed object is returned as the result. Send data to the server. By default, Ajax requests use the get method. If you want to use the post method, you can set the type parameter value. This option also affects how the content in the Data option is sent to the server.
Scenario 1:
Description: saves data to the server. Information is displayed when data is successfully saved. Jquery code:
$. Ajax ({
Type: "Post ",
URL: "Some. php ",
Data: "name = John & location = Boston ",
Success: function (MSG ){
Alert ("data saved:" + MSG );
}
});
Scenario 2:
Description: adds the latest HTML webpage version. Jquery code:
$. Ajax ({
URL: "test.html ",
Cache: false,
Success: function (HTML ){
$ ("# Results"). append (HTML );
}
});

Load (URL, [data], [callback])
Overview: Load remote HTML file code and insert it into the Dom.
By default, the get method is used. The method is automatically converted to the post mode when additional parameters are passed.
Scenario 1:
Description: loads the content of the feeds.html file. Jquery code:
$ ("# Feeds"). Load ("feeds.html ");

Jquery. Get (URL, [data], [callback], [type]) and jquery. Post (URL, [data], [callback], [type])

Overview: load information through remote http get or POST requests.
This is a simple get or POST Request function to replace complex $. Ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. Ajax.
Description: displays the return value of test. aspx (HTML or XML, depending on the returned value), and adds a set of request parameters. Jquery code:
$. Get ("test. aspx", {name: "John", time: "2 "},
Function (data ){
Alert ("data loaded:" + data );
});
$. Post ("test. aspx", {name: "John", time: "2 "},
Function (data ){
Alert ("data loaded:" + data );
});

The above is the basic syntax. We only need to understand it first. If you are familiar with it, we will start to discuss the above methods and use cases step by step.

Ii. Practical practices of jquery. Ajax with ASP. NET

First, create the default. ASPX page as the request initiation page and obtain the returned value. The page code default. aspx is:

View code

<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "jqueryajax2. _ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<SCRIPT src = "javascript \ jquery-1.6.2.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ('# Showinfo'). Click (function (){
VaR DATA = {key1: "Liu Mingfeng", key2: "Lin Wang "};
$. Ajax ({
Type: "Post ",
URL: "response. aspx ",
Data: data,
Datatype: "text ",
Success: function (MSG ){
$ ("# Ajax"). append (MSG );
}
});
$. Ajax ({
URL: "test.htm ",
Cache: false,
Success: function (HTML ){
$ ("# Resulthtml"). append (HTML );
}
});
$ ("# Load"). Load ("test.htm ");
$. Get ("response. aspx", Data, success1, "text ");
$. Get ("textjson.txt", success3, "JSON ");
$. Post ("response. aspx", Data, success2, "text ");
Function success1 (Message ){
$ ("# Get"). append (Message );
}
Function success2 (Message ){
$ ("# Post"). append (Message );
}
Function success3 (sitedata ){
VaR result = "<li> 334 bed 1:" + sitedata. key1 + "</LI> ";
Result + = "<li> 334 bed 2:" + sitedata. key2 + "</LI> ";
Result + = "<li> bed 3, 334:" + sitedata. key3 + "</LI> ";
Result + = "<li> Bed 4, 334:" + sitedata. key4 + "</LI> ";
$ ("# Result" example .html (result );
}
});
});
</SCRIPT>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
</Head>
<Body>
<Input type = "button" id = "showinfo" value = "Show INFO"> </input>
<Ul id = "ajax"> Ajax: </ul>
<Ul id = "resulthtml"> resulthtml: </ul>
<Ul id = "LOAD"> load: </ul>
<Ul id = "get"> Get: </ul>
<Ul id = "Post"> post: </ul>
<Ul id = "result"> </ul>

</Body>
</Html> copy the code

No code is written in default. aspx. cs. The default setting is correct.
There are three roles for the request recipient: response.aspx ,、test.htm and textjson.txt.

Response. ASPX page: obtains the data submitted by the client on the server side and returns the data to the client.
Test.htm static page: the latest version of the HTML page is installed on the client.
Textjson.txt: used to store data in files and allow clients to access the file asynchronously.

Response. ASPX page code, response. aspx is:

<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "response. aspx. cs" inherits = "jqueryajax2.response" %>

There is no HTML code, because the server obtains the data submitted by the client and returns the data to the client. HTML content does not need to be displayed, so the HTML Tag is not included.
Response. aspx. CS Page code:

View code

Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. runtime. serialization. JSON;
Using system. runtime. serialization;

Namespace jqueryajax2
{
Public partial class response: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
String STR = request ["key1"];
Response. Write ("success" + Str );
}
}
}

In the code, you can see how the server obtains the data submitted by the client and returns the data to the client.

The code for the test.htm static page is:

View code

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
Test.html
</Body>
</Html>

When a static page is requested, it will be returned to the client in HTML format, and the content of the test.htm static page will be displayed using the $ ("# resulthtml" ).append(html#.

Textjson.txt stores a piece of text in JSON format:

{"Key1": "Liu Mingfeng", "key2": "Lin Wang", "key3": "Chen Wenjie", "key4": ""}

After being accessed, the returned data is in JSON format. After the client obtains the JSON format, the data is automatically converted to an object.

Now, jquery's asynchronous Application Scenario basically meets our needs. Let's try it on our own.