精华内容
下载资源
问答
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。...

    由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

     

         首先我们来看一下我们的form表单:

     

    1. <td>  
    2. 用户名  
    3. </td>  
    4. <td>  
    5. <input type="text" name="admin.username" value=""  
    6. οnblur="checkusername(this,'AdminAction!exists')" />  
    7. </td>  
    8. <td>  
    9. <span id="namemessage" style="color: red;"></span>  
    10. </td>  
    11. </tr>  
    12. <tr bgColor="#d6fdd0">  
    13. <td>  
    14. 密码  
    15. </td>  
    16. <td>  
    17. <input type="password" name="admin.password" value="" />  
    18. </td>  
    19. <td>  
    20. <span></span>  
    21. </td>  
    22. </tr>  



     

    我们可以看到当我们的用户名的文本域注册了一个onblur事件,当用户名这个文本域失去焦点的时候我们就会让他去执行checkusername方法,好,下面让我们来看一下我们的js是怎么实现的ajax:

     

     

    [javascript] view plaincopyprint?
    1. <script type="text/javascript">  
    2. var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象  
    3. function checkusername(field, url) {  
    4. var uername = field.value;  
    5. if (uername == "" || uername.length < 3) {  
    6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";  
    7. return;  
    8. else {  
    9. if (window.ActiveXObject) // IE浏览器  
    10. {  
    11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    12. else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
    13. {  
    14. xmlHttpRequest = new XMLHttpRequest();  
    15. }  
    16. if (null != xmlHttpRequest) {  
    17. //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下  
    18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);  
    19. //关联好ajax的回调函数  
    20. xmlHttpRequest.onreadystatechange = ajaxCallback;  
    21. //真正向服务器端发送数据  
    22. // 使用post方式提交,必须要加上如下一行,get方法就不必加此句  
    23. xmlHttpRequest.setRequestHeader("Content-Type",  
    24. "application/x-www-form-urlencoded");  
    25. xmlHttpRequest.send(null);  
    26. }  
    27. }  
    28. }  
    29. function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,  
    30. if (xmlHttpRequest.readyState == 4) { //请求成功  
    31. if (xmlHttpRequest.status == 200) {  
    32. var responseText = xmlHttpRequest.responseText;  
    33. document.getElementById("namemessage").innerHTML = responseText;  
    34. }  
    35. }  
    36. }  
    37. </script>  



     

             通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:

    · 在不重新加载页面的情况下更新网页

    · 在页面已加载后从服务器请求数据

    · 在页面已加载后从服务器接收数据

    · 在后台向服务器发送数据

     

     

    XMLHttpRequest是Ajax最核心的对象,它有以下几个重要的方法或属性:
        ●open():建立到服务器的新请求。

        ●send():向服务器发送请求。

        ●abort():退出当前请求。

        ●readyState:提供当前 HTML 的就绪状态。

        ●responseText:服务器返回的请求响应文本。

     

     其中XMLHttpRequest 对象的 open() 方法有以下五个参数:

     ●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

     ●url:要连接的 URL。

     ●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true。

     ●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

    ●password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。

     

            通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

     

              得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:

     

    1. public String exists() throws Exception{  
    2. System.out.println(admin==null);  
    3. boolean boo=dao.exists(admin.getUsername());  
    4.   //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图      
    5.         HttpServletResponse response = ServletActionContext.getResponse();      
    6.         //设置字符集      
    7.         response.setCharacterEncoding("UTF-8");      
    8.         PrintWriter out = response.getWriter();      
    9. if(boo){           
    10.         //直接输入响应的内容      
    11.         out.println("*用户名已存在*");      
    12.         /**格式化输出时间**/     
    13.         out.flush();      
    14.         out.close();      
    15. }  
    16. out.println("*用户名可用*");   
    17. return null;  
    18. }  



     

          熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:

     

    转载于:https://www.cnblogs.com/Evil-Rebe/p/4888183.html

    展开全文
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。...

    由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

     

         首先我们来看一下我们的form表单:

     

    1. <td>  
    2. 用户名  
    3. </td>  
    4. <td>  
    5. <input type="text" name="admin.username" value=""  
    6. οnblur="checkusername(this,'AdminAction!exists')" />  
    7. </td>  
    8. <td>  
    9. <span id="namemessage" style="color: red;"></span>  
    10. </td>  
    11. </tr>  
    12. <tr bgColor="#d6fdd0">  
    13. <td>  
    14. 密码  
    15. </td>  
    16. <td>  
    17. <input type="password" name="admin.password" value="" />  
    18. </td>  
    19. <td>  
    20. <span></span>  
    21. </td>  
    22. </tr>  
    [javascript] view plaincopyprint?
    1. <script type="text/javascript">  
    2. var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象  
    3. function checkusername(field, url) {  
    4. var uername = field.value;  
    5. if (uername == "" || uername.length < 3) {  
    6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";  
    7. return;  
    8. else {  
    9. if (window.ActiveXObject) // IE浏览器  
    10. {  
    11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    12. else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
    13. {  
    14. xmlHttpRequest = new XMLHttpRequest();  
    15. }  
    16. if (null != xmlHttpRequest) {  
    17. //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下  
    18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);  
    19. //关联好ajax的回调函数  
    20. xmlHttpRequest.onreadystatechange = ajaxCallback;  
    21. //真正向服务器端发送数据  
    22. // 使用post方式提交,必须要加上如下一行,get方法就不必加此句  
    23. xmlHttpRequest.setRequestHeader("Content-Type",  
    24. "application/x-www-form-urlencoded");  
    25. xmlHttpRequest.send(null);  
    26. }  
    27. }  
    28. }  
    29. function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,  
    30. if (xmlHttpRequest.readyState == 4) { //请求成功  
    31. if (xmlHttpRequest.status == 200) {  
    32. var responseText = xmlHttpRequest.responseText;  
    33. document.getElementById("namemessage").innerHTML = responseText;  
    34. }  
    35. }  
    36. }  
    37. </script>  



     

             通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:

    · 在不重新加载页面的情况下更新网页

    · 在页面已加载后从服务器请求数据

    · 在页面已加载后从服务器接收数据

    · 在后台向服务器发送数据

     

     

    XMLHttpRequest是Ajax最核心的对象,它有以下几个重要的方法或属性:
        ●open():建立到服务器的新请求。

        ●send():向服务器发送请求。

        ●abort():退出当前请求。

        ●readyState:提供当前 HTML 的就绪状态。

        ●responseText:服务器返回的请求响应文本。

     

     其中XMLHttpRequest 对象的 open() 方法有以下五个参数:

     ●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

     ●url:要连接的 URL。

     ●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true。

     ●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

    ●password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。

     

            通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

     

              得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:

     

    1. public String exists() throws Exception{  
    2. System.out.println(admin==null);  
    3. boolean boo=dao.exists(admin.getUsername());  
    4.   //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图      
    5.         HttpServletResponse response = ServletActionContext.getResponse();      
    6.         //设置字符集      
    7.         response.setCharacterEncoding("UTF-8");      
    8.         PrintWriter out = response.getWriter();      
    9. if(boo){           
    10.         //直接输入响应的内容      
    11.         out.println("*用户名已存在*");      
    12.         /**格式化输出时间**/     
    13.         out.flush();      
    14.         out.close();      
    15. }  
    16. out.println("*用户名可用*");   
    17. return null;  
    18. }  



     

          熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:

     

    转载于:https://www.cnblogs.com/Evil-Rebe/p/4888165.html

    展开全文
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。...
     由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。
    

         首先我们来看一下我们的form表单:

    1. <td>  
    2. 用户名  
    3. </td>  
    4. <td>  
    5. <input type="text" name="admin.username" value=""  
    6. onblur="checkusername(this,'AdminAction!exists')" />  
    7. </td>  
    8. <td>  
    9. <span id="namemessage" style="color: red;"></span>  
    10. </td>  
    11. </tr>  
    12. <tr bgColor="#d6fdd0">  
    13. <td>  
    14. 密码  
    15. </td>  
    16. <td>  
    17. <input type="password" name="admin.password" value="" />  
    18. </td>  
    19. <td>  
    20. <span></span>  
    21. </td>  
    22. </tr>  


    我们可以看到当我们的用户名的文本域注册了一个onblur事件,当用户名这个文本域失去焦点的时候我们就会让他去执行checkusername方法,好,下面让我们来看一下我们的js是怎么实现的ajax

    1. <script type="text/javascript">  
    2. var xmlHttpRequest = null//声明一个空对象以接收XMLHttpRequest对象  
    3. function checkusername(field, url) {  
    4. var uername = field.value;  
    5. if (uername == "" || uername.length < 3) {  
    6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";  
    7. return;  
    8. else {  
    9. if (window.ActiveXObject) // IE浏览器  
    10. {  
    11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    12. else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
    13. {  
    14. xmlHttpRequest = new XMLHttpRequest();  
    15. }  
    16. if (null != xmlHttpRequest) {  
    17. //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下  
    18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);  
    19. //关联好ajax的回调函数  
    20. xmlHttpRequest.onreadystatechange = ajaxCallback;  
    21. //真正向服务器端发送数据  
    22. // 使用post方式提交,必须要加上如下一行,get方法就不必加此句  
    23. xmlHttpRequest.setRequestHeader("Content-Type",  
    24. "application/x-www-form-urlencoded");  
    25. xmlHttpRequest.send(null);  
    26. }  
    27. }  
    28. }  
    29. function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,  
    30. if (xmlHttpRequest.readyState == 4) { //请求成功  
    31. if (xmlHttpRequest.status == 200) {  
    32. var responseText = xmlHttpRequest.responseText;  
    33. document.getElementById("namemessage").innerHTML = responseText;  
    34. }  
    35. }  
    36. }  
    37. </script>  


             通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:

    · 在不重新加载页面的情况下更新网页

    · 在页面已加载后从服务器请求数据

    · 在页面已加载后从服务器接收数据

    · 在后台向服务器发送数据


    XMLHttpRequestAjax最核心的对象,它有以下几个重要的方法或属性:
        ●open():建立到服务器的新请求。

        ●send():向服务器发送请求。

        ●abort():退出当前请求。

        ●readyState:提供当前 HTML 的就绪状态。

        ●responseText:服务器返回的请求响应文本。


     其中XMLHttpRequest 对象的 open() 方法有以下五个参数:

     ●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

     ●url:要连接的 URL

     ●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true

     ●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

    password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。


            通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 true。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

              得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:

    1. public String exists() throws Exception{  
    2. System.out.println(admin==null);  
    3. boolean boo=dao.exists(admin.getUsername());  
    4.   //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图      
    5.         HttpServletResponse response = ServletActionContext.getResponse();      
    6.         //设置字符集      
    7.         response.setCharacterEncoding("UTF-8");      
    8.         PrintWriter out = response.getWriter();      
    9. if(boo){           
    10.         //直接输入响应的内容      
    11.         out.println("*用户名已存在*");      
    12.         /**格式化输出时间**/     
    13.         out.flush();      
    14.         out.close();      
    15. }  
    16. out.println("*用户名可用*");   
    17. return null;  
    18. }  


          熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:



    9
    0
    展开全文
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。...

    本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188

    由于老师布置作业的需要,在添加管理员的时候,要实现验证添加的管理员的用户名是否在数据库中已经存在,然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员,验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

         首先我们来看一下我们的form表单:

    1. <td>  
    2. 用户名  
    3. </td>  
    4. <td>  
    5. <input type="text" name="admin.username" value=""  
    6. onblur="checkusername(this,'AdminAction!exists')" />  
    7. </td>  
    8. <td>  
    9. <span id="namemessage" style="color: red;"></span>  
    10. </td>  
    11. </tr>  
    12. <tr bgColor="#d6fdd0">  
    13. <td>  
    14. 密码  
    15. </td>  
    16. <td>  
    17. <input type="password" name="admin.password" value="" />  
    18. </td>  
    19. <td>  
    20. <span></span>  
    21. </td>  
    22. </tr>  
    <td>
    用户名
    </td>
    <td>
    <input type="text" name="admin.username" value=""
    οnblur="checkusername(this,'AdminAction!exists')" />
    </td>
    <td>
    <span id="namemessage" style="color: red;"></span>
    </td>
    </tr>
    <tr bgColor="#d6fdd0">
    <td>
    密码
    </td>
    <td>
    <input type="password" name="admin.password" value="" />
    </td>
    <td>
    <span></span>
    </td>
    </tr>


    我们可以看到当我们的用户名的文本域注册了一个onblur事件,当用户名这个文本域失去焦点的时候我们就会让他去执行checkusername方法,好,下面让我们来看一下我们的js是怎么实现的ajax

    1. <script type="text/javascript">  
    2. var xmlHttpRequest = null//声明一个空对象以接收XMLHttpRequest对象  
    3. function checkusername(field, url) {  
    4. var uername = field.value;  
    5. if (uername == "" || uername.length < 3) {  
    6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";  
    7. return;  
    8. else {  
    9. if (window.ActiveXObject) // IE浏览器  
    10. {  
    11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    12. else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
    13. {  
    14. xmlHttpRequest = new XMLHttpRequest();  
    15. }  
    16. if (null != xmlHttpRequest) {  
    17. //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下  
    18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);  
    19. //关联好ajax的回调函数   
    20. xmlHttpRequest.onreadystatechange = ajaxCallback;  
    21. //真正向服务器端发送数据   
    22. // 使用post方式提交,必须要加上如下一行,get方法就不必加此句   
    23. xmlHttpRequest.setRequestHeader("Content-Type",  
    24. "application/x-www-form-urlencoded");  
    25. xmlHttpRequest.send(null);  
    26. }  
    27. }  
    28. }  
    29. function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,  
    30. if (xmlHttpRequest.readyState == 4) { //请求成功  
    31. if (xmlHttpRequest.status == 200) {  
    32. var responseText = xmlHttpRequest.responseText;  
    33. document.getElementById("namemessage").innerHTML = responseText;  
    34. }  
    35. }  
    36. }  
    37. </script>  
    <script type="text/javascript">
    var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
    function checkusername(field, url) {
    var uername = field.value;
    if (uername == "" || uername.length < 3) {
    document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";
    return;
    } else {
    if (window.ActiveXObject) // IE浏览器
    {
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) //除IE外的其他浏览器实现
    {
    xmlHttpRequest = new XMLHttpRequest();
    }
    if (null != xmlHttpRequest) {
    //当利用get方法访问服务器端时带参数的话,直接在"AjaxServlet"后面加参数,                   下面send方法为参数null就可以,用post方法这必须在把参数加在send参数内,如下
    xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
    //关联好ajax的回调函数
    xmlHttpRequest.onreadystatechange = ajaxCallback;
    //真正向服务器端发送数据
    // 使用post方式提交,必须要加上如下一行,get方法就不必加此句
    xmlHttpRequest.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
    xmlHttpRequest.send(null);
    }
    }
    }
    function ajaxCallback() { //ajax一次请求会改变四次状态,所以我们在第四次(即一次请求结束)进行处理就OK,
    if (xmlHttpRequest.readyState == 4) { //请求成功
    if (xmlHttpRequest.status == 200) {
    var responseText = xmlHttpRequest.responseText;
    document.getElementById("namemessage").innerHTML = responseText;
    }
    }
    }
    </script>


             通过上面的注释我想大家应该能看懂一些内容吧,我们首先去验证填写的内容是否为空,如果为空就给用户以提示。如果不为空的话就去判断一下当前的浏览器,然后根据浏览器去设置xmlHttpRequest对象,xmlHttpRequest对象是什么东西呢?XMLHttpRequest 对象用于在后台与服务器交换数据的对象,他主要的作用:

    · 在不重新加载页面的情况下更新网页

    · 在页面已加载后从服务器请求数据

    · 在页面已加载后从服务器接收数据

    · 在后台向服务器发送数据


    XMLHttpRequestAjax最核心的对象,它有以下几个重要的方法或属性:
        ●open():建立到服务器的新请求。

        ●send():向服务器发送请求。

        ●abort():退出当前请求。

        ●readyState:提供当前 HTML 的就绪状态。

        ●responseText:服务器返回的请求响应文本。


     其中XMLHttpRequest 对象的 open() 方法有以下五个参数:

     ●request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

     ●url:要连接的 URL

     ●asynch:如果希望使用异步连接则为true,否则为 false。该参数是可选的,默认为 true

     ●username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

    password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。


            通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 true。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

              得到XMLHttpRequest 对象之后,我们就利用这个对象去后台执行我们的请求,在执行我们请求的时候一定要注意关联好我们的回调函数:xmlHttpRequest.onreadystatechange = ajaxCallback;这里的回调函数的名字可以随便起,并不是固定死的。我们可以看到我们上面的程序请求是发送给了AdminAction中的exists方法了,好,下面我们去action方法里面去看一下:

    1. public String exists() throws Exception{  
    2. System.out.println(admin==null);  
    3. boolean boo=dao.exists(admin.getUsername());  
    4.   //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图      
    5.         HttpServletResponse response = ServletActionContext.getResponse();      
    6.         //设置字符集       
    7.         response.setCharacterEncoding("UTF-8");      
    8.         PrintWriter out = response.getWriter();      
    9. if(boo){           
    10.         //直接输入响应的内容       
    11.         out.println("*用户名已存在*");      
    12.         /**格式化输出时间**/     
    13.         out.flush();      
    14.         out.close();      
    15. }  
    16. out.println("*用户名可用*");   
    17. return null;  
    18. }  
    public String exists() throws Exception{
    System.out.println(admin==null);
    boolean boo=dao.exists(admin.getUsername());
      //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图    
            HttpServletResponse response = ServletActionContext.getResponse();    
            //设置字符集    
            response.setCharacterEncoding("UTF-8");    
            PrintWriter out = response.getWriter();    
    if(boo){	     
            //直接输入响应的内容    
            out.println("*用户名已存在*");    
            /**格式化输出时间**/   
            out.flush();    
            out.close();    
    }
    out.println("*用户名可用*"); 
    return null;
    }


          熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台,这里我 就不详细解释了。好了,写到这,我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果:


    展开全文
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来。...
  • 我首先想到的就是利用ajax实现异步验证技术,由于利用的ssh框架,所以在这要对struts2和ajax进行整合,由于我还没把ajax的一些知识总结出来,所以在这也不提了,有关ajax的详细内容将会在以后的博客中写出来...
  • 今天做登录/注册系统的时候需要验证用户名是否已被注册,用表单提交然后servlet判断会刷新一下,原来的已填写的数据不会保存以及用户体验差,查了一下发现Ajax可以实现。 1.在script里创建一个参数和三个function ...
  • Django实现Ajax异步表单验证

    千次阅读 2018-06-26 00:49:29
    本demo利用Ajax技术实现对登录表单的检验,假设正确的用户名和密码分别是 大猫 和 123.成果图:一、表单页面 index.html 代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt...
  • 1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4,ajax...
  • PHP+Aax实现异步验证

    2015-06-04 18:24:00
    利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: <!DOCTYPE ...
  • 利用jQuery实现Ajax 验证用户名是否存在 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery ...
  • ====================================================== 注:重要!程序员如何有效的放松身心!下班后做什么? ====================================================== ...刷新评论列表刷新页面返回页首 ...验证
  • 1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml 2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest) 3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net) 4...
  • 前端利用ajax实现用户注册页面

    千次阅读 2020-07-29 11:47:28
    开发一个用户注册界面,使用ajax交互技术 ajax是什么呢?允许浏览器与服务器通信而无须...(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象; (2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息
  • 面对有大量表单需要提交的项目,如果在服务器端进行验证,提交表单时会有一个页面跳转,会让人觉得体验不佳。但如果全部用AJAX提交表单,那么代码量又太大。这个时候我们需要用到下面的技巧。 1、在需要信息交互的...
  • 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post ...
  • 利用jquery validate插件,实现这样的需求:当验证通过后,我不需要通过submit form的方式提交表单,我想要更灵活的通过ajax处理表单,加入很多动态的效果,提高客户体验 页面里引入JS文件:  手机号码:...
  • 利用ajax和webservice实现异步无刷新的用户信息检测 只是演示了用户注册检测功能,具体的注册功能尚未实现 无刷新注册实例 知识要点: 想要在页面里JS代码里onclick去调用后台文件中的一个方法,搞了半天...
  •  异步加载技术,在不刷新网页的前提下,实现部分网页内容的更新!  AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。  思考? 注册界面刚好可以应用此场景。在...
  • 新建项目、配置项目啥的咱就不说了,直奔主题! 1.新建测试方法 views.ajax #from django.views....#@csrf_exempt : 设置该方法忽略CSRF验证 def ajax_test(request): if request.is_ajax(): if request
  • 准备工作: ① 首先要会使用ThinkPHP这个框架 ② 最好有些ajax的基础(可以去看下小飞的另外一篇博文:Ajax实时验证”用户名/邮箱等”是否已经存在) ③ 4个js文档(点此免积分下载) 先贴上源代码: 复制代码 代码...
  • 异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层...
  • 如何在struts2下利用ajax实现上传图片的大小检测,并弹出警告,最好有具体代码,谢谢 [b]问题补充:[/b] Chris_Lu 你验证过这个JS么,这个是错误的,起码在我机器上执行不了这个功能 另外,我想,能不能异步的...
  • 准备工作:① 首先要会使用ThinkPHP这个框架② 最好有些ajax的基础(可以去看下小飞的另外一篇博文:Ajax实时验证"用户名/邮箱等"是否已经存在)③ 4个js文档(点此免积分下载)先贴上源代码:function checktitle(){...
  • 利用ajax技术和Sevlet技术来实现,使用原生的js。 源码可访问,我的Github 什么是ajax Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 Ajax ...

空空如也

空空如也

1 2 3 4
收藏数 71
精华内容 28
关键字:

利用ajax实现异步验证