Ajax Initial Learning

First, IntroductionAJAX (Asynchronous JavaScript and XML), which refers to asynchronous JavaScript and XML, is not a new programming language, but rather a technique for creating better, faster, and more interactive Web applications.Its essence is JavaScript technology, and it doesn't really matter much to XML. With Ajax, you can use JavaScript's XMLHttpRequest object to communicate directly with the server. With this object, JavaScript can beExchange data with a WEB server without overloading the page。Ajax uses asynchronous data transfer between the browser and the Web server(HTTP request), which allows the Web page to request a small amount of information from the server, rather than the entire page, thusmake Internet applications smaller, faster, and more friendly。 "Of course Ajax also supports synchronous data transfer, but it doesn't make much sense. The reason for using AJAX is because of its advantages of asynchronous transmission. "Ii. methods of Use1. Create an Ajax engine object XMLHttpRequest2. Call the Open method to establish a connection to the Ajax engine and tell the Ajax engine that we are requesting a get, request URL, and asynchronous 3. After telling the Ajax engine how to get the results back to us, we usually specify a method handle, then Ajax invokes the method we specify so that we can get the data returned by the Ajax engine (which is commonly referred to as the callback mechanism) 4. Finally, the parameters set by the Send method are sent to the Ajax engineSpecific code examples(Verify that password changes are equal to the passwords in the session at login):JavaScript script code:var xmlhttp;function createxmlhttprequest ()  {    if (window. XMLHttpRequest) {        xmlHttp = new XMLHttpRequest ();   } else if (window. ActiveXObject) {        xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");    }} function Validate () {    var oldpassword = document.getelementbyidx_x_x (" OldPassword ");    if (oldPassword.value.length! = 0) {        Createxmlhttprequest ();        var url = "... /servlet/passwordvalidateservlet?oldpassword= "+ oldpassword.value;        Xmlhttp.open ("GET", url, True);       //method address, automatic call after processing is complete, i.e. callback (call implicit function)         //The implicit function is used here, and the funtion () function is independent.        //As new defines a function functions back () {}         //and XMLHTTP Association         xmlhttp.onreadystatechange=function () {            if (xmlhttp.readystate = = 4) {                 if (xmlhttp.status = =) {                     if (Xmlhttp.responsetext! = "") {                         document.getelementbyidx_x_x ("Oldpasswordspan"). InnerHTML = "<font color= ' red ' > "+ xmlhttp.responsetext +" </font> ";                    } else {                         document.getelementbyidx_x _x ("Oldpasswordspan"). InnerHTML = "";                    }                } else {                     alert ("Request failed! Error code = "+ xmlhttp.status);                }           }        };        xmlhttp.send (null);     }else {         document.getelementbyidx_x_x ("Oldpasswordspan"). InnerHTML = "";    }} HTML code(other code slightly):<td> <input name= "OldPassword" type= "password" class= "Text1" id= "OldPassword" size= "onblur=" Validate () "><span id=" Oldpasswordspan "></span></td>Java Code(It can also be other languages, where the code is executed by the server side, so the service-side program is what the development of what language to write in): Import Java.io.ioexception;import Javax.servlet.servletexception;import Javax.servlet.http.httpservlet;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;import Com.wang.drp.sysmgr.domain.user;  public class Passwordvalidateservlet extends httpservlet{      @Override     protected void doget (HttpServletRequest request, HttpServletResponse Response) throws Servletexception, IOException {       //clean browser cache         //If this is not the case, using AJAX will produce some inexplicable errors         Response.setcontenttype ("Text/xml");        Response.setheader (" Cache-control "," No-sotre ");        response.setheader (" Pragma "," No-cache ");         Response.setdateheader ("Expires", 0);           Response.setcontenttype ("text/html; charset=gb18030 ");        User user = (user) request.getsession (). GetAttribute (" Login_user ");        String OldPassword = Request.getparameter (" OldPassword ");         if (!oldpassword.equals (User.getpassword ())) {             Response.getwriter (). println ("Input password does not match the original password! ");       }   }}  III, related instructions 1. XMLHttpRequest in Ajax is one of the most critical core objects. 2. XMLHttpRequest provides the ReadyState property to judge the server response. The values of the readystate are as follows: 0 (initialization), 1 (Loading), 2 (Loaded), 3 (interactive), 4 (complete) so the function can handle the response only if a full server response has been received when readystate=4. 3. The Status property of XMLHttpRequest: The HTTP status code returned by the server, such as 200 for success, and 404 for "not Found" error. 4. XMLHttpRequest's ResponseText property: The response body (excluding the header) received from the server so far, or an empty string if the data has not yet been received. And this corresponds to the output of the Response.getwriter () corresponding to the content.

Ajax Initial Learning