In a popular sense, Ajax is a kind of web page brushless technology to improve the user experience, Ajax is not a new technology, but only in those years before the fire up (Ajax fire up, the elder brother only know chatting QQ), so it was a view; Of course, those years began to learn.
One, complete the AJAX request
1, before the completion of this request, first to understand what Ajax is, its full name is asynchronous JavaScript and, XML, from the name can be seen, it with JavaScript and XML is indissoluble, Ajax use XML HTTP request, The XMLHttpRequest object created through the browser asynchronously sends the request to the server, and after the server processes the request, The response is returned through the Xmlhttp.responsetext property to the JavaScript function to process the data, further using JavaScript to process the DOM, and complete the local update of the page.
2, code example, use XMLHttpRequest to complete the request
Code: JS:
Copy Code code as follows:
<script type= "Text/javascript" >
XMLHttpRequest objects
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 () {
Judging status
if (xmlhttp.readystate = = 4 && xmlhttp.status = 200) {
alert (Xmlhttp.responsetext);
}
}
Defines the transmitted file HTTP header information
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); The encoding method used
Xmlhttp.send ("value=1");
}
</script>
HANDLER.ASHX:
Copy Code code 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:
two, the Ajax method in jquery
I remember in those years, I was learning jquery did not mention it in the Ajax method, here is made up, jquery provides a lot of Ajax functions, to facilitate the use of developers, no longer need developers to create XMLHttpRequest objects to complete the request, You can use AJAX functions directly in the jquery library to complete the request, and compatibility is also good, let's take a look at jquery Ajax.
1, jquery Get Data method: Load ()
Cases:
Copy Code code as follows:
function Ajaxmethod () {
$ ("#spanDiv"). Load ("DemoData.txt");
}
2, jquery's Get (Url,[data],callback) method
Cases:
Copy Code code as follows:
function Ajaxget () {
Object Data Source
var obj = {A: "Second": "Second"};
$.get (
"Callbackdata.ashx", obj, function (data) {
$ ("#spanDiv"). HTML (data);
});
}
3, jquery post (Url,[data],callback,type) method
Cases:
Copy Code code as follows:
function Ajaxpost () {
Object Data Source
var obj = {A: "Second": "Second"};
$.get (
"Callbackdata.ashx", obj, function (data) {
$ ("#spanDiv"). Text (decodeURI (data));
});
}
4. jquery Ajax (Option) method
Cases:
Copy Code code as follows:
function Ajaxajax () {
Object Data Source
var obj = {A: "Second": "Second"};
$.ajax ({
Type: "Get",
URL: "Callbackdata.ashx",
Data:obj,
Success:function (data) {
$ ("#spanDiv"). Text (decodeURI (data));
}
});
}
5, jquery Ajaxsetup (Options) method, set the global AJAX configuration
Cases:
Copy Code code as follows:
function Ajaxajaxsetup () {
Object Data Source
var obj = {A: "Second": "Second"};
$.ajax ({
Type: "Post",
URL: "Callbackdata.ashx",
Data:obj,
Success:function (data) {
$ ("#spanDiv"). Text (decodeURI (data));
}
});
}
6, jquery Ajaxsubmit (Options) method, submit the form
Summarize
Those years of learning Ajax, improve the user experience, but also reduce the burden on the server, this article recalls those years of learning Ajax days.
