博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【前端开发系列】—— 别说你不会Ajax
阅读量:5825 次
发布时间:2019-06-18

本文共 6504 字,大约阅读时间需要 21 分钟。

之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的。这里正好就进行一下学习,下面是Ajax的一个时间图。

设置触发条件

  这里模拟一个使用场景,就是在用户登陆时,异步的对用户名以及密码进行验证。所以使用onBlur()触发,onBlur函数在输入框焦点遗失时,就会触发。

1     
2
3
4
5
6
7
8
9
10
11
12
13
14
15
用戶名:
密 码:
16

创建Ajax的对象

  由于Ajax并不是一个统一的标准,因此各个浏览器有自己的创建方式,因此在创建时,需要进行浏览器的验证,使用如下的验证方法即可。

1 if(window.XMLHttpRequest){2             req = new XMLHttpRequest();3         }else if(window.ActiveXObject){4             req = new ActiveXObject("Microsoft.XMLHTTP");5         }

open() onreadystatechante() send()

3.1 open(),这个函数有三个参数,第一个是http的发送方式,常见的有GET和POST,我们这里使用GET,来传送参数;第二个参数是一个url,这个url第一个作用是与后台的servlet进行匹配,第二个作用是传送前台的数据到后台;第三个参数是个bool值,如果为true标识用异步的方式发送请求。

req.open("GET",url+"?username="+document.loginForm.username.value,true);

3.2 onreadystatechange 指定回调函数,当数据返回时,使用该函数进行处理。我们的处理函数是自己定义的usernameCallback

req.onreadystatechange = usernameCallback;

3.3 send函数用来发送创建好的请求。由于前面的参数已经添加到url后面,因此这里直接使用null作为参数就行了。

req.send(null);

  自己定义的usernameCallback函数,用于把返回的字符串使用DOM方式写入指定的div中。

  在函数返回时,可以使用之前创建好的req对象,调用它的readystate 以及 status属性,4表示XMLHttpRequest对象响应正常结束。200表示HTTP请求获得正确的响应。

  只有这两个条件都满足,才表明异步请求请求成功。

function usernameCallback(){        if(req.readyState == 4){            if(req.status == 200){                var str = req.responseText;                if(str.split("!")[0] == "Success"){                    document.getElementById("usernameDiv").className = "black";                }else{                    document.getElementById("usernameDiv").className = "red";                }                document.getElementById("usernameDiv").innerHTML = str;            }else{                alert("username failed!");            }        }else{                    }    }

通过url与后台的servlet关联

checkUsername
usernameServlet
checkUsername
/checkUsername
checkPassword
passwordServlet
checkPassword
/checkPassword

简单反馈

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("text/xml;charset=UTF-8");        response.setHeader("Cache-Control", "no-cache");                String username = request.getParameter("username");//        System.out.println("username"+username);        String str = "";                if("xingoo".equals(username)){            str += "Success!" + username;        }else{            str += "failed!" + username;        }                response.getWriter().write(str);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request,response);        }

另一个验证的servlet采用同样的方式,这里就不再赘述了。下面会贴出所有的代码。

源码暴露

Login.html

1  2  3  4 
5 Insert title here 6 16 78 79 80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
用戶名:
密 码:
95
96 97

web.xml

checkUsername
usernameServlet
checkUsername
/checkUsername
checkPassword
passwordServlet
checkPassword
/checkPassword

usernameServlet.java

import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class usernameServlet extends HttpServlet {        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("text/xml;charset=UTF-8");        response.setHeader("Cache-Control", "no-cache");                String username = request.getParameter("username");//        System.out.println("username"+username);        String str = "";                if("xingoo".equals(username)){            str += "Success!" + username;        }else{            str += "failed!" + username;        }                response.getWriter().write(str);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request,response);        }}

passwordServlet.java

import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class passwordServlet extends HttpServlet {    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("text/xml;charset=UTF-8");        response.setHeader("Cache-Control", "no-cache");                String password = request.getParameter("password");//        System.out.println("password"+password);        String str = "";                if("123".equals(password)){            str += "Success!" + password;        }else{            str += "failed!" + password;        }                response.getWriter().write(str);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {                doGet(request,response);        }}

运行效果

这里直接判断返回状态,进行样式的改变

成功时的效果!

失败时的效果!

本文转自博客园xingoo的博客,原文链接:,如需转载请自行联系原博主。
你可能感兴趣的文章
《写给大忙人看的java se 8》笔记
查看>>
倒计时:计算时间差
查看>>
Linux/windows P2V VMWare ESXi
查看>>
Windows XP倒计时到底意味着什么?
查看>>
tomcat一步步实现反向代理、负载均衡、内存复制
查看>>
运维工程师在干什么学些什么?【致菜鸟】
查看>>
Linux中iptables详解
查看>>
java中回调函数以及关于包装类的Demo
查看>>
maven异常:missing artifact jdk.tools:jar:1.6
查看>>
终端安全求生指南(五)-——日志管理
查看>>
Nginx 使用 openssl 的自签名证书
查看>>
创业维艰、守成不易
查看>>
PHP环境安装套件:快速安装LAMP环境
查看>>
CSS3
查看>>
ul下的li浮动,如何是ul有li的高度
查看>>
C++ primer plus
查看>>
python mysqlDB
查看>>
UVALive 3942 Remember the Word Tire+DP
查看>>
从微软的DBML文件中我们能学到什么(它告诉了我们什么是微软的重中之重)~目录...
查看>>
被需求搞的一塌糊涂,怎么办?
查看>>