First-in-scope Ajax

First-in-scope Ajax

Reprint please indicate the source

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).
AJAX is not a new programming language, but a new method of using existing standards.
AJAX is the technique of exchanging data with a server and updating parts of a Web page without reloading the entire page.

0. "Write in front" standard AJAX code with callback function

var xmlhttp;
function Loadxmldoc (url,callbackfunc) {
if (window. XMLHttpRequest) {
xmlhttp=new XMLHttpRequest ();
} else {
xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = Callbackfunc;
Xmlhttp.open ("GET", url,true);
xmlhttp.send ();
}

function MyFunction1 () {
loadxmldoc ("/ajax/test1.txt", function () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
...
document.getElementById ("Mydiv"). innerhtml= Xmlhttp.responsetext;
...
}
});

Callback mechanism: Write an execution function for each AJAX request, such as MyCallbackFunction1, in order to handle the response;
The callback function calls the Loadxmldoc () function to perform Ajax, while passing a callback function to handle the response as a parameter.

1. Create a XMLHttpRequest Object

　　XMLHttpRequest is the basis of Ajax for exchanging data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Create syntax:
　　var xmlhttp = new XMLHttpRequest ();

To handle all modern browsers, including IE5 and IE6, check whether the browser supports XMLHttpRequest objects. If supported, the XMLHttpRequest object is created. If not, create ActiveXObject (the asynchronous load technique used by IE):

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");
}

2. Send a request to the server

<1> Send Request
To send the request to the server, we use the open () and send () methods of the XMLHttpRequest object:
　　Xmlhttp.open ("GET", "Test1.txt", true);
Xmlhttp.send ();

Method Description
Open (Method,url,async) specifies the type of request, the URL, and whether the request is processed asynchronously.
> method: Type of request; GET or POST
> URL: The location of the file on the server
> Async:true (Asynchronous) or False (synchronous)
Send (String) sends the request to the server.
> string: Only for POST requests

<2> Add an HTTP header
If you need to POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the Send () method:
　　Xmlhttp.open ("POST", "ajax_test.asp", true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("Fname=bill&lname=gates");

method Description  
setrequestheader (Header,value)     Add an HTTP header to the request.   
> Header: Name of the specified header       
> Value: The value of the specified header             

<3> URL Parameters
URL-Files on the server
The URL parameter of the open () method is the address of the file on the server:
　　Xmlhttp.open ("GET", "ajax_test.asp", true);
The file can be any type of file,
>> such as. txt and. xml, or server script files (the response returned is the entire TXT file or XML file);
>> such as. asp and. PHP (the ability to perform tasks on the server before returning the response).

<4> Asynchronous requests
The async parameter of the Open method must be true for the XMLHttpRequest object if it is used for Ajax;

> execute additional script while waiting for server response
> handle response when response is ready

When using async=true, you need to actually respond to the function that is executed when you are in the ready state in the onReadyStateChange event:
　　Xmlhttp.onreadystatechange=function () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
}
}
The specific use of onreadystatechange is detailed in 4.

3. Server response

Use the ResponseText or Responsexml property of the XMLHttpRequest object to obtain a response from the server.
Property Description
ResponseText gets the response data in the form of a string.
Responsexml gets the response data in XML form.

ResponseText Example:
　　document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;

Responsexml Example:
　　Xmldoc=xmlhttp.responsexml;
Txt= "";
X=xmldoc.getelementsbytagname ("ARTIST");
for (i=0;i<x.length;i++) {
Txt=txt + x[i].childnodes[0].nodevalue + "<br/>";
}
document.getElementById ("Mydiv"). Innerhtml=txt;

4. onReadyStateChange Events

<1>
When a request is sent to the server, we need to perform some response-based tasks.
The onreadystatechange event is triggered whenever the readyState changes.
The ReadyState attribute holds state information for XMLHttpRequest.

<2>
The following are three important properties of the XMLHttpRequest object:
Property Description
onreadystatechange stores functions (or function names) and calls the function whenever the ReadyState property changes.
readyState have XMLHttpRequest state. Vary from 0 to 4.
> 0: Request not initialized
> 1: Server connection established
> 2: Request received
> 3: In Request processing
> 4: The request is complete and the response is ready
"Note": The onReadyStateChange event is triggered 5 times (0-4), corresponding to each change of readyState.
status >: "OK"
> 404: Page Not found

<3>


xmlhttp.onreadystatechange = function () {
if ( Xmlhttp.readystate==4 && xmlhttp.status==200) {
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
}
}

<4> using Callback Functions
The callback function is a function that is passed as an argument to another function.
If you have multiple Ajax tasks on your site, you should write a standard function for creating XMLHttpRequest objects and call that function for each AJAX task.
The function call should contain the URL and the task that is performed when the onReadyStateChange event occurs (each call may be different):

var xmlhttp;
function Loadxmldoc (url,cfunc) {
if (window. XMLHttpRequest) {
xmlhttp=new XMLHttpRequest ();
} else {
xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange=cfunc;
Xmlhttp.open ("GET", url,true);
xmlhttp.send ();
}

function MyFunction () {
Loadxmldoc ("/ajax/test1.txt", function () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;
}
});
}

5. Practice

/**
* Ajax Gets the XML document on the server
*
*/
function Loadxmldoc (URL) {
var xmlhttp;
var content;
if (window. XMLHttpRequest) {
xmlhttp = new XMLHttpRequest ();
} else {
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = 4 && Xmlhttp.status = =) {
content = Xmlhttp.responsetext;
document.getElementById ("content"). InnerHTML = content;
}
}
Xmlhttp.open ("GET", url, true);
xmlhttp.send ();
}

First-in-scope Ajax