Using jquery to implement Ajax is more convenient and concise than using the xmlhttp_request object. The following shows a column. First, create a JSP page and introduce JS files from outside.
Code:
- <% @ Page Language = "Java" Import = "Java. util. *" pageencoding = "UTF-8" %>
- <HTML>
- <Head>
- <Title> jquery1.4.2 </title>
- <Link type = "text/CSS" rel = "stylesheet" href = "CSS/login1.css"> </link>
- <SCRIPT type = "text/JavaScript" src = "JS/jquery-1.4.2.js"> </SCRIPT>
- <SCRIPT type = "text/JavaScript" src = "JS/login. js"> </SCRIPT>
- <SCRIPT type = "text/JavaScript" src = "JS/loginajax. js"> </SCRIPT>
- </Head>
- <Body>
- <H1 align = "center"> User Logon page
- <HR color = "blue">
- <Div align = "center">
- <Table cellspacing = 5 Border = 5 bodercolor = # ffaa00>
- <Tr> <TH colspan = "3" align = "center" bgcolor = # ffaa00> User Logon </Th> </tr>
- <Tr>
- <TH rowspan = "3" background = "images/2.jpg" style =" width = 90px "> </Th>
- <TD> User Name: </TD> <input class = "text" id = "usernameid" type = "text" value = "Please input your name" name = "username"> <label id = "message"> </label> </TD> </tr>
- <Tr> <TD> password: </TD> <input class = "text" id = "userpasswordid" value = "123456" type = "password" name = "userpassword"> </TD> </tr>
- <Tr> <TD colspan = "2" align = "center"> <input name = "login" type = "Submit" value = "register"> <input type = "Reset "value =" reset "> </TD> </tr>
- </Table>
- </Div>
- </Body>
- </Html>
Create the loginajax. js file as follows:
Code:
- $ (Document). Ready (function (){
- // Obtain the lable label
- VaR $ lable = $ ("# message ");
- // Obtain the jquery object of the text box
- VaR $ txtusername = $ ("# usernameid ");
- $ Txtusername. Click (function (){
- $Lable.html ("detecting usernames ......");
- });
- // The cursor loss event
- $ Txtusername. Blur (function (){
- VaR $ name = $ txtusername. Val ();
- // Use the GER method to pass the value
- $. Get ("check? Name = "+ $ name, function (data ){
- // Use the POST method to pass the value
- // $. Post ("checkuser. Do", {Name: $ name, name1: $ name}, function (data ){
- // The Return Value of the server is displayed on the page.
- Export lable.html (data );
- // Alert (data );
- });
- });
- });
Finally, you need to create a servlet to process the values passed by the get () method in jquery, as follows:
Code:
- Package myclass. serlet;
- Import java. Io. ioexception;
- Import java. Io. printwriter;
- Import javax. servlet. servletexception;
- Import javax. servlet. http. httpservlet;
- Import javax. servlet. http. httpservletrequest;
- Import javax. servlet. http. httpservletresponse;
- Public class check extends httpservlet {
- Protected void Service (httpservletrequest request, httpservletresponse response)
- Throws servletexception, ioexception {
- Printwriter out = NULL;
- Out = response. getwriter ();
- String name = request. getparameter ("name ");
- System. Out. Print (name );
- If ("Liping". Equals (name )){
- Out. println ("sorry, User name:" + name + "has existed ");
- } Else {
- Out. println ("Congratulation, User name:" + name + "can use ");
- }
- Out. Flush ();
- Out. Close ();
- }
- }
Then, open tmocat to see the effect.
