In those years, I was still learning Ajax study notes.

In layman's terms, Ajax is a kind of Web Page-free technology to improve user experience. Ajax is not a new technology, but it is only popular in those years, brother knows only chat qq), so it is highly regarded; of course, those years began to learn.
1. Complete Ajax requests
1. Before completing this request, let's take a look at what Ajax is. Its full name is Asynchronous javascript and XML. From the name, we can see that it has an indissoluble relationship with javascript and XML, ajax uses XML to send HTTP requests asynchronously to the server through the xmlHttpRequest object created in the browser. After the server processes the requests, it will send the response through xmlHttp. the responseText property is returned to the javascript function for data processing, and the javascript is used for DOM processing to complete partial page updates.
2. Sample Code. Use XMLHttpRequest to complete the request.
Code: JS: Copy codeThe Code is as follows: <script type = "text/javascript">
// XMLHttpRequest object
Var xmlHttp;
Function buildXMLHttpRequest (){
// Judge the browser
If (window. ActiveXObject ){
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); // IE
} Else if (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // non-IE
} Else {
XmlHttp = NaN;
}
}
Function sendRequest (){
BuildXMLHttpRequest ();
// Post request
XmlHttp. open ("post", "Handler. ashx", true );
XmlHttp. onreadystatechange = function (){
// Determine the status
If (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
Alert (xmlHttp. responseText );
}
}
// Define the HTTP header information of the transmitted File
XmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // The encoding method used.
XmlHttp. send ("value = 1 ");
}
</Script>

Handler. ashx:Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "Handler" %>
Using System;
Using System. Web;
Public class Handler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Context. Response. Write ("Hello World xin_ny file" + context. Request. Params ["value"]);
}
Public bool IsReusable {
Get {
Return false;
}
}
}

Effect:

Ii. Ajax methods in Jquery
I remember that in those years, I was still studying Jquery and didn't talk about its Ajax method. Here I made up it. JQuery provides a lot of Ajax functions to facilitate the use of developers, developers no longer need to create an XMLHttpRequest object to complete the request. They can directly use the Ajax function in the JQuery library to complete the request and have better compatibility. Let's take a look at Jquery's Ajax.
1. Jquery's data method: load ()
Example:Copy codeThe Code is as follows: function ajaxMethod (){
$ ("# SpanDiv"). load ("DemoData.txt ");
}

2. Jquery get (url, [data], callback) Method
Example:Copy codeThe Code is as follows: function ajaxGet (){
// Object Data Source
Var obj = {first: "First", second: "Second "};
$. Get (
"CallBackData. ashx", obj, function (data ){
$ ("# SpanDiv" pai.html (data );
});
}

3. Jquery's post (url, [data], callback, type) Method
Example:Copy codeThe Code is as follows: function ajaxPost (){
// Object Data Source
Var obj = {first: "First", second: "Second "};
$. Get (
"CallBackData. ashx", obj, function (data ){
$ ("# SpanDiv"). text (decodeURI (data ));
});
}

4. Jquery's ajax (option) Method
Example:Copy codeThe Code is as follows: function ajaxAjax (){
// Object Data Source
Var obj = {first: "First", second: "Second "};
$. Ajax ({
Type: "Get ",
Url: "CallBackData. ashx ",
Data: obj,
Success: function (data ){
$ ("# SpanDiv"). text (decodeURI (data ));
}
});
}

5. Jquery's ajaxSetup (options) method, which sets the global ajax Configuration
Example:Copy codeThe Code is as follows: function ajaxAjaxSetup (){
// Object Data Source
Var obj = {first: "First", second: "Second "};
$. Ajax ({
Type: "Post ",
Url: "CallBackData. ashx ",
Data: obj,
Success: function (data ){
$ ("# SpanDiv"). text (decodeURI (data ));
}
});
}

6. Jquery's ajaxSubmit (options) method. submit the form.
Summary
Those years of learning Ajax have improved the user experience and reduced the burden on the server. This article will recall the years of learning Ajax.