Go JAVA Ajax Tutorial Chapter III-ajax detailed explanation

Now it's time to get into Ajax, and here's a combination of old ideas, theory and practice. This chapter is mainly to explain the Ajax steps in detail, the next one will use an AJAX technology to implement the page tip effect of the example to illustrate the implementation of Ajax.

First, the Ajax steps in detail

Ajax essentially follows the request/server pattern to work, and the basic process of this framework includes the following specific steps:

(1) XMLHttpRequest Object initialization

(2) Send request

(3) The server receives the request and processes it

(4) The server returns the response data

(5) client receives

(6) Modify client page content based on response data

The communication interaction mode is asynchronous throughout the process. Here are some steps to explain the core work of Ajax:

1. Initialize and create the XMLHttpRequest object and issue the XMLHttpRequest request

In order for JavaScript to send HTTP requests to the server, the XMLHttpRequest object must be used. Before you use it, instantiate the XMLHttpRequest object first. Each browser unfairly implements this instantiation process. IE browser is provided as a Acitivex control, while browsers such as Mozilla Browser are provided directly in the form of the XMLHttpRequest class. So in the first chapter in order to write the program can be run across browsers, so write:

if (Window. XMLHttpRequest) {

Xmlhttpreq = new XMLHttpRequest ();

}Else if(window. ActiveXObject) {

Try {

Xmlhttpreq = new activexobject ("MSXML2. XMLHTTP ");

}catch(e) {

Try {

Xmlhttpreq = new activexobject ("mircsoft.xmlhttp");

}Catch(E1) {}

}

}

In addition, some Mozilla browsers will error when processing server information that does not contain the return content of the XML Mime-type header information. Therefore, to ensure that the returned content contains text/xml information:

XMLHttpRequest = new XMLHttpRequest ();

Xmlhttprequest.overridemimetype ("Text/xml");

2. Specify the response handler function

Down to specify how the client handles when the current server returns information, as long as the corresponding handler function name is assigned to the onReadyStateChange property of the XMLHttpRequest object. Like what:

Xmlhttprequest.onreadystatechange = ProcessResponse;

Note that this function name does not have parentheses, and does not specify parameters. You can also define a function by using JavaScript to define the function in the immediate way. Like what:

Xmlhttprequest.onreadystatechange = function () {};

3. Make an HTTP request

After you specify the response handler function, you can send an HTTP request to the server. This part invokes the open and send methods of the XMLHttpRequest object.

Xmlhttprequest.open ("GET", url,true);

Xmlhttprequest.send (null);//Send Request

The first parameter of open is the HTTP request method, which is get, post, or head. The second parameter of open is the destination URL. Based on security considerations, this URL can only be the same domain, otherwise prompt "No permissions" error. The Target URL processing request XMLHttpRequest request is the same as dealing with a normal HTTP request, such as JSP can use Request.getparameter ("") or Request.getattribute ("") to get the URL parameter value. The third parameter of open simply specifies whether to continue executing the following code within the time it is waiting for the server to return information. If it is ture, execution will not continue until the server returns information. The default is true.

In order, the Send method is called after the open call is complete. The send parameter can be any content that you want to pass to the server if it is sent by post.

4, processing the information returned by the server

First, check the readystate value of the XMLHttpRequest to determine the current state of the request. Referring to the previous property sheet, it is known that the readystate value is 4 o'clock, which means that the server has returned all the information and can begin processing the information and updating the page content. For example:

if (Xmlhttpreq.readystate = = 4) {

Information is returned and can begin processing

}else{

Information has not yet returned, waiting for

}

After the information is returned, it is necessary to determine the HTTP status code, so that the returned page has no errors. Where 200 represents the normal page, the basic program is as follows:

if (Xmlhttpreq.status = = 200) {

The page is working and you can start processing information

}Else{

Page has a problem

}

XMLHttpRequest has two methods for successfully returning information, one for responsetext, the information to be returned when the string is used, and the other for reponsexml, the information that will be passed back when the XML document is used, you can use the DOM processing.

Summing up the above steps, we can complete an initial AJAX development framework for later invocation. The example code is as follows, in which you only need to change the specific data:

<script language="JavaScript">

var Xmlhttpreq = false;

function createxmlhttprequest () {

if (Window. XMLHttpRequest) {

Xmlhttpreq = new XMLHttpRequest ();

}Else if(window. ActiveXObject) {

Try {

Xmlhttpreq = new activexobject ("MSXML2. XMLHTTP ");

}catch(e) {

Try {

Xmlhttpreq = new activexobject ("mircsoft.xmlhttp");

}Catch(E1) {}

}

}

}

function sendrequest (URL) {

Create a XMLHttpRequest Object

Createxmlhttprequest ();

Call the Open method

Xmlhttpreq.open ("GET", url,true);

Specifies the client's handler function when the server returns information

Xmlhttpreq.onreadystatechange = ProcessResponse;

Send a request to the server

Xmlhttpreq.send (null);

}

function ProcessResponse () {

Determine the appropriate situation

if (Xmlhttpreq.readystate = = 4) {

To determine the HTTP status code

if (Xmlhttpreq.status = = 200) {

var res = XMLHttpReq.responseXML.getElementsByTagName ("res") [0].firstchild.data;

Window.alert (RES);

Document.myform.uname.value= "";

Document.myform.pwd.value= "";

}Else{

Window.alert ("The page you requested has an exception");

}

}

}

function Usercheck () {

var uname = Document.myform.uname.value;

var pwd = Document.myform.pwd.value;

if (uname = = "") {

Window.alert ("User name cannot be empty");

Document.myform.pwd.value= "";

Document.myform.uname.focus ();

return false;

}Else{

Invoke AJAX Preliminary framework

SendRequest ("login?uname=" +uname+ "&pwd=" +pwd);

}

}

</script>