java servet 密码不正确提示 java密码校验

Ajax

即“Asynchronous JavaScript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax并非一种新的技术，而是集中原有技术的结合体。它由下列技术组合而成：

使用CSS和XHTML表示

使用DOM模型交互和动态显示

使用XMLHttpRequest和服务器进行异步通信

使用JavaScript绑定和调用

1. 作用

实现在不刷新整个页面的情况下，对部分数据进行更新。

2. 内部原理【简单理解】

举个例子:判断用户名是否已被注册

传统方式：

输入用户名；

点击一个按钮，校验；

把数据交给服务器；

服务器在后台完成校验，并且反馈信息；

在浏览器上提示用户。

Ajax方式：

通过JS获取输入框文本内容document.getElementById(“username”).value

通过XMLHttpRequest执行请求；

请求结束后，收到结果，再使用js完成提示。**

3.1 数据请求 Get

1. 创建对象；

function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2. 发送请求；
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求。
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
request.open("GET" ,"DemoServlet" ,true );
request.send();
}
如果发送请求的同时，还想获取数据，那么代码如下：
//执行get请求
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求(带参数)
request.open("GET" ,"DemoServlet?name=zhangsan&age=18" ,true );
//3. 获取响应数据 [注册监听]。如果准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
3.2 数据请求 Post
//1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "DemoServlet", true );
//如果不带数据，写这行就可以了
//request.send();
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=zhangsan&age=18");
}
如果需要获取数据，代码如下
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "DemoServlet", true );
//获取服务器传送过来的数据
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post："+request.responseText);
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=zhangsan&age=18");
}
4. 实现案例：Ajax异步校验用户名
4.1 搭建环境
1.页面准备【demo.jsp】
用户名

密码
邮箱
简介
2.数据库准备【table/t_user】

[备注：练习时，可以添加多个字段，主要是 username ]

4.2 Servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面，到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
4.3 Dao代码
public class UserDaomImpl implements UserDao{
@Override
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select table(*) from t_user where username =?";
runner.query(sql, new ScalarHandler(), username);
Long result = (Long) runner.query(sql, new ScalarHandler(), username);
return result > 0 ;
}
}
4.4 jsp页面显示
function checkUserName() {
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"CheckUserNameServlet" , true );
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "用户名已存在!";
}else{
document.getElementById("span01").innerHTML = "用户名可用!";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
5. 补充：同步和异步
5.1 同步

同步，就是调用某个东西是，调用方需等待这个调用返回结果才能继续往后执行。

5.2 异步

异步，和同步相反，调用方不会立刻得到结果，而是在调用发出后调用者可用继续执行后续操作。