What is Ajax

Source: Internet
Author: User
Tags ajax status code

What is Ajax
Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technique that creates interactive Web applications.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without AJAX) if you need to update your content, you must reload the entire page surface.
Traditional mode: Wait-response-wait
Advantage:
1: Use JavaScript to make requests to the server and handle the response without blocking the user! Core Object XMLHttpRequest. With this object, your JavaScript can be used without overloading the page.
Exchange data with the Web server.
2:ajax uses asynchronous data transfer (HTTP requests) between the browser and the Web server, which allows the Web page to request a small amount of information from the server, rather than the entire page.
Execution process:
1, create XMLHttpRequest object (need to consider the browser compatibility issues)
var xhr = function Getxmlhttpobject () {
var objxmlhttp = null;
if (window. XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
objXmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
return objxmlhttp;
}
2. Use the XMLHttpRequest object to open a connection (specify the connection mode and the connection address and whether to synchronize)
Xhr.open ("POST", "URL", true);
3. Set the requested header (the requested type and the requested encoding format)
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
4. Set callback function
Ajax Status Code (READYSTATE):
0-(uninitialized) has not yet called the Send () method
1-(load) called the Send () method, sending the request
2-(loading complete) the Send () method executes and has received the full response content
3-(interactive) parsing response content
4-(complete) The response content resolution is complete and can be invoked on the client
Xhr.onreadystatechange=function () {
If ReadyState is 4, the response has been fully received.
if (xhr.readystate==4) {
If a result status code of 200 is obtained, the service side returns normally
if (xhr.status==200) {
var Txt=xhr.responsetext;
document.getElementById ("Err"). Innerhtml=txt;
}
}
}
5. Send Request
Call the Send method of the XMLHttpRequest object to implement data delivery.
Xhr.send ("name=" +name);
Full code:
var xhr = Getxmlhttpobject ();
Xhr.open ("Get", "./users.json", true);
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send ();
Xhr.onreadystatechange = function () {
If ReadyState is 4, the response has been fully received.
if (xhr.readystate = = 4) {
If a result status code of 200 is obtained, the service side returns normally
if (Xhr.status = = 200) {
var txt = xhr.responsetext;
Console.log (TXT);
}
}
}
function Getxmlhttpobject () {
var objxmlhttp = null;
if (window. XMLHttpRequest) {
objXmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
objXmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
return objxmlhttp;
}

What is Ajax

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.