Web - Ajax

最新推荐文章于 2023-04-22 15:05:53 发布

Frank_Wang_2014

最新推荐文章于 2023-04-22 15:05:53 发布

阅读量225

点赞数 1

分类专栏： Web 文章标签： ajax web

本文链接：https://blog.csdn.net/wangchunyang51/article/details/78062726

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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);
    }

}

Frank_Wang_2014

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web - Ajax

1.背景在很多网站上实现注册功能的时候，书要输入用户名，光标离开文本框的时候，提示：用户名已经存在。1.1技术概述【AJAX】 1.AJAX：异步的JavaScript And XML。 - 使用的是老技术，用的是新思想。了解同步和异步的区别： AJAX的功能，完成页面的局部刷新，不中断用户的体验。有了AJAX后，可以将部分代码写到客户端浏览
复制链接

扫一扫

专栏目录