1 varXmlHttp =NULL;2 /*using the XMLHttpRequest object for Ajax interaction*/3 functionverifynew (ID) {4 /*get the data you want to plan*/5 varUsername =document.getElementById (ID). value;6 7 /*Create a XMLHttpRequest object*/8 9 if(window. XMLHttpRequest) {Ten /*for Firefox mozillar Opera Safair ie7+*/ OneXmlHttp =NewXMLHttpRequest (); A /*bug fixes for some versions of the Mozillar browser*/ - if(xmlhttp.overridemimetype) { -Xmlhttp.overridemimetype ("Text/xml"); the } -}Else if(window. ActiveXObject) { - /*for IE6 IE5.5 IE5*/ - varActivexname = ["MSXML2. XMLHTTP "," Microsoft.XMLHTTP "]; + for(vari = 0;i < activexname.length;i++){ - Try{ + /*take out a space name to create and terminate the loop if the creation succeeds*/ AXmlHttp =NewActiveXObject (Activexname[i]); at Break; -}Catch(e) { - - } - } - } in if(!xmlHttp) { -Alert ("XMLHttpRequest object creation failed"); to}Else{ + /*Registering callback Functions*/ -Xmlhttp.onreadystatechange =callback; the * /*set connection True to indicate asynchronous interaction*/ $Xmlhttp.open ("GET", "/lesson5_ajax_demo1/ajaxservletdo.do?name=" +username,true);
/* If you use post, you need to set the request header yourself */
/*
Xmlhttp.open ("POST", "/lesson5_ajax_demo1/ajaxservletdo.do" +username,true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("name=" +username);
*/
Panax Notoginseng
- /*Send Data*/ theXmlhttp.send (NULL);/*because the data sent is already in the URL, the send data parameter here is set to null*/ + } A the + - } $ $ functioncallback () { - if(Xmlhttp.readystate = = 4) {/*Interactive Completion*/ - if(Xmlhttp.status = = 200) {/*whether the HTTP interaction was successful*/ the /*Get service-side return data*/ - varResponseText =Xmlhttp.responsetext;Wuyidocument.getElementById ("Result"). InnerHTML =responsetext; the } - } Wu}
Page
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>itcast.cn users of the famous Ajax example</title>6 <Scripttype= "Text/javascript"src= "/lesson5_ajax_demo1/jslib/jquery-2.1.4.min.js"></Script>7 <Scripttype= "Text/javascript"src= "/lesson5_ajax_demo1/jslib/ajax.js"></Script>8 </Head>9 <Body>Tenitcast.cn User's Ajax example, enter the user name:<BR/> One <!--Ajax mode, you do not need to submit data using forms - A <inputtype= "text"ID= "UserName"value=""/> - <inputtype= "button"value= "Checksum"onclick= "verifynew (' UserName ')"/><BR/> - <!--Div space for displaying AJAX processing results - the <DivID= "Result"></Div> - </Body> - </HTML>
Service side
1 PackageOrg.zln.ajax.servlet;2 3 Importjavax.servlet.ServletException;4 ImportJavax.servlet.annotation.WebServlet;5 ImportJavax.servlet.http.HttpServlet;6 Importjavax.servlet.http.HttpServletRequest;7 ImportJavax.servlet.http.HttpServletResponse;8 Importjava.io.IOException;9 ImportJava.io.PrintWriter;Ten One /** A * Created by Coolkid on 2015/6/7 0007. - */ - Public classAjaxserverextendsHttpServlet { the @Override - protected voidDoPost (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException { - doget (request,response); - } + - @Override + protected voidDoget (HttpServletRequest request, httpservletresponse response)throwsservletexception, IOException { A Try{ atResponse.setcontenttype ("Text/html;charset=utf-8"); -Request.setcharacterencoding ("UTF-8"); -PrintWriter out =Response.getwriter (); - //Take parameter information -String name = Request.getparameter ("name"); - //Input Checksum in if(Name = =NULL|| Name.length () = = 0){ -Out.println ("User name cannot be empty"); to}Else{ + //logical check and business processing - if(Name.equals ("Wangxingkui")){ theOUT.PRINTLN ("username [" + name + "] already exists, please use a different user name"); *}Else{ $OUT.PRINTLN ("username [" + name + "] does not exist and can be registered using the user name");Panax Notoginseng } - } the /*The data sent to the HTML will be processed by the Ajax callback function*/ +Out.println ("<br/><a href=\" ajax.html\ "> Return to Validation page </a>"); A}Catch(Exception e) { the e.printstacktrace (); + } - //returns update data (instead of jumping to a new view) $ } $}
Using JavaScript for Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
