Web - Ajax

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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值