Web

来源：互联网发布：wish数据分析编辑：程序博客网时间：2024/05/18 19:43

1.背景

在很多网站上实现注册功能的时候，书要输入用户名，光标离开文本框的时候，提示：用户名已经存在。

1.1技术概述

【AJAX】

1.AJAX：异步的JavaScript And XML。
- 使用的是老技术，用的是新思想。
了解同步和异步的区别：
AJAX的功能，完成页面的局部刷新，不中断用户的体验。
有了AJAX后，可以将部分代码写到客户端浏览器：RIA：rich Internet Appication. FLEX:AS 脚本编程。
XML：使用XML作为数据传递的格式：JSON：

【XMLHttpRequest】

属性：
- onreadystatechange：当XMLHttpRequest状态改变的时候触发的一个函数。
- readyState ： XMLHttpRequest的状态（0 未初始化,1初始化,2发送数据,3数据传送中,4完成）
- status：获得响应吗的状态码
- responseText：获得响应的文本信息
- responseXML：获得响应的XML数据
方法
- open（请求方式，请求路径，是否异步）—一步向服务器发送请求；
- send（请求参数）—发送请求
- sendRequestHeader（头信息，头的值）—–处理POST请求方式的中文问题
创建XMLHttpRequest对象：
- IE：将XMLHttpRequest对象封装在一个ActiveXObject组件。
- FireFox：直接创建XMLHttpRequest对像。

【AJAX的入门】

AJAX的编写的步骤
- 第一步：创建异步的对象
- 第二部：设置对象状态的改变的触发
- 第三部：设置向后台提交的路径
- 第四部：发送请求的命令
GET方式提交请求

【案例】

JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ajax Get</title><script type="text/javascript" src="${ pageContext.request.contextPath }/01_Ajax_get/ajaxGet.js"></script></head><body><div id="d1" style="width:300px;height:300px;border:1px solid blue"></div><input id="bt1" type="button" value="AJAX get request" onclick="ajax_get()"></body></html>

js页面

function ajax_get(){//  创建异步请求对象    var xhr = createXMLHttp();//  设置状态改变的监听 回调函数    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){//请求成功            if(xhr.status == 200){//响应成功//              获取响应的数据                var data=xhr.responseText;//              将数据写入到DIV中                document.getElementById("d1").innerHTML = data;            }        }    }//  设置请求路径,get 请求的参数要写在路径的后面    xhr.open("GET","/day15AJAX/ServletDemo1?name=aaa&password=1234",true);//  发送请求    xhr.send(null);}function createXMLHttp(){    var xmlHttp;    try{        xmlHttp = new XMLHttpRequest();    }catch(e){        try{            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        }catch(e){            try{                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }catch(e){            }        }    }    return xmlHttp;}

Servlet

package com.itheima.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/ServletDemo1")public class ServletDemo1 extends HttpServlet {    private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub//      System.out.println("hello...");        String name = request.getParameter("name");        String password = request.getParameter("password");        response.setContentType("text/html;charset=UTF-8");        response.getWriter().println("hello ajax ....+"+name+"\t"+password);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

POST方式提交请求
*修改C:\tomcat\conf\web.xml中的Servlet-lists属性为true，可以不同输入地址后面的路径：http://localhost:8080/AJAX 下面的列表都会显示出来

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="${ pageContext.request.contextPath }/02_ajax_post/ajaxPost.js"></script></head><body><div id="d1" style="width:300px;height:300px;border:1px solid blue"></div><input id="bt1" type="button" value="AJAX get request" onclick="ajax_post()"></body></html>

js

function ajax_post(){//  创建异步请求对象    var xhr = createXMLHttp();//  设置状态改变的监听 回调函数    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){//请求成功            if(xhr.status == 200){//响应成功//              获取响应的数据                var data=xhr.responseText;//              将数据写入到DIV中                document.getElementById("d1").innerHTML = data;            }        }    }//  设置请求路径,get 请求的参数要写在路径的后面    xhr.open("POST","/day15AJAX/ServletDemo1",true);//  发送请求    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xhr.send("name=奚唐敏&password=123");}function createXMLHttp(){    var xmlHttp;    try{        xmlHttp = new XMLHttpRequest();    }catch(e){        try{            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        }catch(e){            try{                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }catch(e){            }        }    }    return xmlHttp;}

servlet

package com.itheima.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/ServletDemo1")public class ServletDemo1 extends HttpServlet {    private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub//      System.out.println("hello...");        String name = request.getParameter("name");        String password = request.getParameter("password");        response.setContentType("text/html;charset=UTF-8");        response.getWriter().println("hello ajax get....+"+name+"\t"+password);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub//      doGet(request, response);        request.setCharacterEncoding("UTF-8");        String name = request.getParameter("name");        String password = request.getParameter("password");        response.setContentType("text/html;charset=UTF-8");        response.getWriter().println("hello ajax post....+"+name+"\t"+password);    }}

3.验证用户是否存在

【步骤一】：创建表和数据库
【步骤二】：设计一个注册页面
【步骤三】：在用户名的文本框中使用onblur时间触发一个函数
【步骤四】：AJAX的异步操作，将文本框的值传到Servlet中
【步骤五】：Servlet中根据传入的用户名去数据库进行查询
【步骤六】：处理查询结果。

js

function checkUsername(){    var username = document.getElementById("username").value;//  创建异步请求对象    var xhr = createXMLHttp();//  设置状态改变的监听 回调函数    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){//请求成功            if(xhr.status == 200){//响应成功                var data = xhr.responseText;                if(data == 1){                    document.getElementById("s1").innerHTML = "<font color='green'>could be</font>";                }else{                    document.getElementById("s1").innerHTML = "<font color='green'>couldn't be</font>";                }            }        }    }//  设置请求路径,get 请求的参数要写在路径的后面    xhr.open("GET","/day15AJAX/ServletDemo2?username="+username,true);//  发送请求    xhr.send(null);}function createXMLHttp(){    var xmlHttp;    try{        xmlHttp = new XMLHttpRequest();    }catch(e){        try{            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        }catch(e){            try{                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }catch(e){            }        }    }    return xmlHttp;}

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="${pageContext.request.contextPath }/03_ajax_register/ajaxRegister.js"></script></head><body><div id="d1" style="width:300px;height:300px;border:2px solid blue"><table><tr>    <td>username:</td>    <td><input id="username" type = "text" name = "username" onblur="checkUsername()"><span id="s1"></span></td></tr><tr>    <td>password:</td>    <td><input type = "text" name = "username"><span id="s1"></span></td></tr><tr>    <td>nickname:</td>    <td><input type = "text" name = "username"><span id="s1"></span></td></tr><tr>    <td>type:</td>    <td><input type = "text" name = "username"><span id="s1"></span></td></tr><tr>    <td>regiter</td>    <td><input id="d12" type = "submit" value = "register" ></td></tr></table></div></body></html>

servlet

package com.itheima.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import Domain.User;import Service.UserService;/** * 异步校验用户名 */@WebServlet("/ServletDemo2")public class ServletDemo2 extends HttpServlet {    private static final long serialVersionUID = 1L;    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.getWriter().println("hello hhl");        try{        //      接受参数        String username = request.getParameter("username");        System.out.println("name:"+"\t"+username);//      调用业务层        UserService userService = new UserService();        User user = userService.findByUsername(username);        if (user == null) {//          用户名可以注册            response.getWriter().println(1);        }else{//          用户名已存在            response.getWriter().println(0);        }        }catch (Exception e) {            // TODO: handle exception            throw new RuntimeException();        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

阅读全文

1 0