Ajax Basics One.

Learn about Ajax for a leisurely understanding of his basic content.

Have not been to Ajax before, in the university did not study well, has not been applied to practice. Now learn basic knowledge and fill in the concept of Ajax in the sea.

The following is a summary of the content.

1.Ajax sends a request to the server:
Use the open () and send () methods of the XMLHttpRequest object;
Open (Method,url,async), method: Indicates that the requested type has get and post

URL: The location of the file on the server. Async:true (asynchronous) or false (synchronous)

Send (String): Send request to server, String only for POST request
2.Ajax Creating Objects XMLHttpRequest
var xmlhttp;
if (Windows. XMLHttpRequest) {
Adaptation Browser: Ie7+,firefox,chrome,opera,safari
XMLHTTP = new XMLHttpRequest ();
}else{
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
Adapting to Browser ie6,ie5
}
3.Ajax Get Server response
ResponseText: Getting response data in string form

function Loadxmldoc ()
{
var xmlhttp;
if (window. XMLHttpRequest)
{//code for ie7+, Firefox, Chrome, Opera, Safari
Xmlhttp=new XMLHttpRequest ();
}
Else
{//code for IE6, IE5
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4 && xmlhttp.status==200)
{
Ajax-created object XMLHTTP gets the character data responsetext;
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
}
}
Xmlhttp.open ("Get", "/ajax/test1.txt", true);//Get Data asynchronously
Xmlhttp.send ();//will send s above open GET request, file location, asynchronously sent to the server.
}

Responsexml, get the response data in XML form:
4.ajax-onreadystatechange Events
The XMLHttpRequest object has three important properties:
onReadyStateChange: A stored function that calls with a function whenever readystate zodiac changes
ReadyState: Describes the state of XMLHttpRequest 0: request initialization, 1: Server Establishment connection, 2: Request to receive, 3: Request processing, 4: request completed, and response ready
Status:200 means OK,

When ReadyState equals 4 and the status is 200, the response is ready:

Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate==4 && xmlhttp.status = = 200) {
document.getElementById ("Mydiv"). InnerHTML = xmlhttp.responsetext;//Get the dom of id = ' mydiv ', send ResponseText request type
}
}

When there are multiple Ajax tasks, buy a resume standard function to invoke it.

The Var xmlhttp;//first defines the Ajax object.
Here is the AJAXDE Data request response function
function Loadxmldoc (url,cfunc)
{
if (window. XMLHttpRequest)
{//code for ie7+, Firefox, Chrome, Opera, Safari
Xmlhttp=new XMLHttpRequest ();
}
Else
{//code for IE6, IE5
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange=cfunc;
Xmlhttp.open ("GET", url,true);
Xmlhttp.send ();//Send Request
}
Resume Brick function, call Ajax request, click "MyFunction"
function Myfunction () {
Loadxmldoc ("/ajax/test.txt", function () {//Calls AJAX requests, contains data file locations and tasks required to be processed
Set AJAX request Status
if (xmlhttp.readystate ==4 && xmlhttp = = 200)
{
document.getElementById ("Mydiv"). innerhtml=xmlhttp.responsetext;//description is an AJAX character request sent by the DOM of Mydiv
}
}
)

}

<div id= "mydiv" ><button type= "button" onclick= "MyFunction ()" > Change content via AJAX </button>

Ajax Basics One.