Ajax entry-level instances

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

Ajax is made up of HTML, JavaScript, DHTML, and DOM, an excellent way to turn a clumsy Web interface into an interactive Ajax application.

Make a note of the AJAX entry-level example today, and I hope I can understand it as soon as I get started.

In the actual operation of Ajax, the access to XMLHttpRequest (XHR) is not done at once, but the results obtained after a number of different states, for this state in the Ajax there are 5 kinds, respectively.
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,
3-(interactive) parsing response content
4-(complete) The response content resolution is complete and can be invoked on the client
For the above state, where the "0" state is the state value automatically after the definition, and for the status of the successful access (get information) Most of US use "4" to judge.

The index.jsp code is as follows

<%@ page language= "Java"Import= "java.util.*" pageencoding= "GBK"%><%String Path=Request.getcontextpath (); String BasePath= Request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >function Test () {//Create a XMLHttpRequest objectvar req; //IE7 Below is the second way, more than 7 and other browsers such as Firefox are the first way to create XMLHttpRequest            if(window. XMLHttpRequest) {req=NewXMLHttpRequest (); }Else{req=NewActiveXObject ("Msxml2.xmlhttp"); }             //Handling ResponsesReq.onreadystatechange =function () {if(4==req.readystate) {var result=Req.responsetext; document.getElementById ("Div1"). InnerHTML =result; }             }                        //Send RequestReq.open ("Get", "Servlet/testajaxservlet",true); Req.send (NULL); Alert ("Heihei");//because it is asynchronous, Heihei appears first, and after three seconds the Ajax text        }        </script> 
Then create a servlet,testajaxservlet.jsp
Importjava.io.IOException;ImportJava.io.PrintWriter;Importjavax.servlet.ServletException;ImportJavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse; Public classTestajaxservletextendsHttpServlet {/*** The Doget method of the servlet. <br> * * This method was called when a form have its tag value met     Hod equals to get. *      * @paramrequest the request send by the client to the server *@paramresponse The response send by the server to the client *@throwsservletexception If an error occurred *@throwsIOException If an error occurred*/     Public voiddoget (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {System.out.println ("Hello Ajax"); Try{Thread.Sleep (3000);//Ajax text appears after three seconds}Catch(interruptedexception e) {e.printstacktrace (); } response.getwriter (). println ("); }    /*** The DoPost method of the servlet. <br> * * This method was called when a form have its tag value me     Thod equals to post. *      * @paramrequest the request send by the client to the server *@paramresponse The response send by the server to the client *@throwsservletexception If an error occurred *@throwsIOException If an error occurred*/     Public voidDoPost (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {doget (request,response); }}
Enter the index.jsp address,
Click the button
Appears after three seconds
Because it is asynchronous, the first alert appears Ajax test. Ajax defaults to Async, and the parameters are true.
Ajax entry-level instances