AJAX综合案例

最新推荐文章于 2023-07-22 16:57:55 发布
最新推荐文章于 2023-07-22 16:57:55 发布
阅读量217 收藏
点赞数
分类专栏： Javaweb学习笔记 文章标签： ajax servlet javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48578877/article/details/126616352
版权

实现百度搜索框的效果

在这里插入图片描述

search.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #imgDiv{
        margin-left: 600px;
        margin-top: 200px;
      }
      #par{
        width: 600px;
        height: 480px;
        position: absolute;
        left: 30%;
      }
      #keyword{
        width: 400px;
        height: 30px;
        margin-top: 30px;
        border: 1px solid green;
      }
      #search{
        margin-top: 30px;
        width: 150px;
        height: 36px;
        font-size: 20px;
      }

      .tdHover{
          background-color: pink;
          font-size: 20px;
      }
    </style>
    </head>
<body>
<div id="imgDiv">
    <img src="imgs/logo.png" width="480"/>
</div>
<div id="par">
    <input type="text" id="keyword" onkeyup="getContent()">
    <input type="button" id="search" value="search一下">
    <table>
        <tbody id="bodyId">
        <!--<tr>
            <td>java</td>
        </tr>-->
        </tbody>
    </table>
</div>
</body>
</html>

SearchServlet.java(给XMLHttpRequest提供URL)

//需要gson-2.8.0.jar

import com.google.gson.Gson;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

@WebServlet(name = "SearchServlet", urlPatterns = "/SearchServlet")
public class SearchServlet extends HttpServlet {
    //模拟数据源
    private static List<String> datas = new ArrayList<>();
    static {
        datas.add("java");
        datas.add("javascript");
        datas.add("jsp");
        datas.add("jstl");
        datas.add("aaaa");
        datas.add("abc");
        datas.add("bbbb");
        datas.add("zzzz");
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //从页面获取参数
        String keyword = request.getParameter("keyword");

        //调用getContent方法获取list
        List list = getContent(keyword);

        Gson g = new Gson();
        //将list转换为字符串
        String json = g.toJson(list);

        //将json输出到页面显示
        response.getWriter().write(json);
    }

    private List<String> getContent(String keyword){
        if(keyword == null || keyword.length() == 0){
            return datas;
        }

        List<String> list = new ArrayList<>();

        for(String s : datas){
            //字符串中包含keybody就加入到集合中
            //String.contains(String str)看字符串中是否包含子字符串
            if(s.contains(keyword)){
                list.add(s);
            }
        }

        //对集合进行排序
        Collections.sort(list);

        return list;
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

在search.html中编写ajax

<script>
  //  声明一个全局的XMLHttpRequest对象
  var xhr;

  //  兼容所有浏览器创建XMLHttpRequest对象
  function create(){
    if(window.XMLHttpRequest){

        //    ie7+, ff, openra, safiri , chrome
      xhr = new XMLHttpRequest();
    }else{
        //    ie5, ie6
      xhr = new ActiveXObject("Mricosft.XMLHTTP");
    }
  }

  //  键盘事件出发该函数
  function getContent(){
      //  创建XMLHttpRequest对象
    create();

    //alert(xhr)
    //console.log(xhr);

      //  拿到用户在输入框中的值
    var keyword = document.getElementById("keyword").value;

    //alert(keyword);

      //  ajax的第二步，open（）方法，三个参数，请求方式，url，异步
    xhr.open("GET", "SearchServlet?keyword=" + keyword, true);

      //  ajax的第三步，send（）发送请求
    xhr.send();

      //  XMLHttpRequest对象的状态监控，调用回调函数
    xhr.onreadystatechange = callback;
  }

  //  回调函数
  function callback(){
      //  监控状态
      if(xhr.readyState == 4 && xhr.status == 200){
          //alert(xhr.responseText)

          //  拿到后台传递过来的数据
          var content = xhr.responseText;

          //  将字符串转换为json对象
          content = eval(content);

          //  给tbody里面动态添加tr、td、textNode
          createTD(content);

          //  动态地给每个td设置监听
          setListener(content);
      }
  }

  //  设置监听
  function setListener(c){
      //  分别给每个td设置鼠标悬浮、鼠标离开和点击事件
      var size = c.length;

      for(var i = 0; i < size; i++){
          //  鼠标悬浮，让悬浮的td有一个专门的样式tdHover
          document.getElementById("id" + i).addEventListener("mouseover", function () {
              this.setAttribute("class", "tdHover");
          }, false)
          //  鼠标离开，让离开之后的td没有了之前的样式tdHover
          document.getElementById("id" + i).addEventListener("mouseout", function () {
              this.setAttribute("class", "kill");
          }, false)
          //  点击事件，用户点击该td之后，让td的内容填充给keyword输入框，并且消除tbody的所有内容
          document.getElementById("id" + i).addEventListener("click", function () {
              //  keyword的内容直接是当前的文本内容
              document.getElementById("keyword").value = this.innerText;
              //  动态清理tbody中的所有子元素
              clearTD();
          }, false)
      }
  }

  //  动态的创建tr、td以及textNode
  function createTD(c){
      //  每一次创建之前，需要将之前tbody的所有内容清空
      clearTD();

      //  拿到tbody
      var tbody = document.getElementById("bodyId");

      //  分别动态的创建tr、td textNode
      //alert(c.length);
      for(var i = 0; i < c.length; i++){
          var cc = c[i];

          var tr = document.createElement("tr");
          var td = document.createElement("td");

          var tvalue = document.createTextNode(cc);

          //  给每个tid设置一个id
          td.setAttribute("id", "id" + i);

          //  分别将textNode添加到td
          //  将td添加到tr
          //  将tr添加到tbody中
          td.appendChild(tvalue);
          tr.appendChild(td);
          tbody.appendChild(tr);
      }
  }

  //  逆序动态清理tbody中的所有内容
  function clearTD(){
      var tbody = document.getElementById("bodyId");

      var size = tbody.childNodes.length;

      for(var i = size - 1; i >= 0; i--){
          //  删除tbody中的所有的子元素
          tbody.removeChild(tbody.childNodes[i]);
      }
  }
</script>

实现效果

在这里插入图片描述

实现思路

  • 兼容所有浏览器创建XMLHttpRequest对象。

    //  声明一个全局的XMLHttpRequest对象
var xhr;

//  兼容所有浏览器创建XMLHttpRequest对象
function create(){
    if(window.XMLHttpRequest){

        //    ie7+, ff, openra, safiri , chrome
        xhr = new XMLHttpRequest();
    }else{
        //    ie5, ie6
        xhr = new ActiveXObject("Mricosft.XMLHTTP");
    }
}

  • ajax实现动态获取数据

    //  键盘事件触发该函数
  function getContent(){
      //  创建XMLHttpRequest对象
    create();

    //alert(xhr)
    //console.log(xhr);

      //  拿到用户在输入框中的值
    var keyword = document.getElementById("keyword").value;

    //alert(keyword);

      //  ajax的第二步，open（）方法，三个参数，请求方式，url，异步
    xhr.open("GET", "SearchServlet?keyword=" + keyword, true);

      //  ajax的第三步，send（）发送请求
    xhr.send();

      //  XMLHttpRequest对象的状态监控，调用回调函数
    xhr.onreadystatechange = callback;
  }

 //  回调函数
  function callback(){
      //  监控状态
      if(xhr.readyState == 4 && xhr.status == 200){
          //alert(xhr.responseText)

          //  拿到后台传递过来的数据
          var content = xhr.responseText;

          //  将字符串转换为json对象
          content = eval(content);

          //  给tbody里面动态添加tr、td、textNode
          createTD(content);

          //  动态地给每个td设置监听
          setListener(content);
      }
  }

  • 给tbody里面动态添加tr、td、textNode

    //  动态的创建tr、td以及textNode
function createTD(c){
    //  每一次创建之前，需要将之前tbody的所有内容清空
   clearTD();

    //  拿到tbody
    var tbody = document.getElementById("bodyId");

    //  分别动态的创建tr、td textNode
    //alert(c.length);
    for(var i = 0; i < c.length; i++){
        var cc = c[i];

        var tr = document.createElement("tr");
        var td = document.createElement("td");

        var tvalue = document.createTextNode(cc);

        //  给每个tid设置一个id
        td.setAttribute("id", "id" + i);

        //  分别将textNode添加到td
        //  将td添加到tr
        //  将tr添加到tbody中
        td.appendChild(tvalue);
        tr.appendChild(td);
        tbody.appendChild(tr);
    }
}

此时基本实现功能，但会出现tbody中数据不断重复的现象，所以需要在每次键盘事件后对数据进行清理

  • 逆序动态清理tbody中的所有内容

    function clearTD(){
    var tbody = document.getElementById("bodyId");

    var size = tbody.childNodes.length;

    for(var i = size - 1; i >= 0; i--){
        //  删除tbody中的所有的子元素
        tbody.removeChild(tbody.childNodes[i]);
    }
}

  • 动态地给每个td设置监听，分别给每个td设置鼠标悬浮、鼠标离开和点击事件

    //  设置监听
function setListener(c){
    //  分别给每个td设置鼠标悬浮、鼠标离开和点击事件
    var size = c.length;

    for(var i = 0; i < size; i++){
        //  鼠标悬浮，让悬浮的td有一个专门的样式tdHover
        document.getElementById("id" + i).addEventListener("mouseover", function () {
            this.setAttribute("class", "tdHover");
        }, false)
        //  鼠标离开，让离开之后的td没有了之前的样式tdHover
        document.getElementById("id" + i).addEventListener("mouseout", function () {
            this.setAttribute("class", "kill");
        }, false)
        //  点击事件，用户点击该td之后，让td的内容填充给keyword输入框，并且消除tbody的所有内容
        document.getElementById("id" + i).addEventListener("click", function () {
            //  keyword的内容直接是当前的文本内容
            document.getElementById("keyword").value = this.innerText;
            //  动态清理tbody中的所有子元素
            clearTD();
        }, false)
    }
}
囨誌
关注
专栏目录
Ajax 简单案例
qq_41179691的博客
02-19 1442
Ajax 发送 GET // 1、创建对象 var xhr = new XMLHttpRequest(); // 2、初始化 设置 请求方法 url 是否异步（true为异步） xhr.open('GET', 'http://127.0.0.1:8888/ajax', true); // 3、发送 xhr.send(); /* 4、回调（处理服务端返回的数据） readyState: 0: 请求未初始
Ajax小案例
qq_43537987的博客
04-11 339
需求：根据对应编号搜索对应图书 前台代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax小案例</title> <script src="ajax.js"></script> <scri...
AJAX案例
zhyue28的博客
07-01 1899
案例：为修改密码的页面中的提交按钮添加js代码。ajax的主要作用是当点击按钮时浏览器使用子线程发送请求，表现为整个页面不会刷新。 $("#btn-change-password").click(function() { //html函数由两个作用：1.里面有参数是把参数内容填到对应的html标签里；2.里面无参数是获取html标签的内容 $.ajax({ // ur...
ajax例子
野绅士的博客
10-15 874
$.ajax({ url: "${webPath}/agg/projBaTest.do?method=test", // 提交的页面 data: {"Id":id}, // 从表单中获取数据 type: "POST", // 设置请求类型为"POST"，默认为"GET" ...
2.AJAX 综合案例 DAY2
最新发布
m0_51394252的博客
07-22 148
Bootstrap 弹框
JavaWeb 快速入门 MVC模式AJax综合案例（商品管理）
m0_60786924的博客
05-02 932
前言：本文章设计知识点有：1.Oracle、2.JSP、3.Servlet、4.MVC模式、5.HTML、6.Css、7.jQuery... 综合性强，希望能对大家有所帮助 一、代码部分 1.Oracle部分： 首先得安装好Oracle,不会安装的可以点击此链接：https://blog.csdn.net/m0_60786924/article/details/124262712?spm=1001.2014.3001.5501 create ta...
1.ajax综合案例
YasWestmere的博客
11-14 170
ajax promise基本结构
Ajax的综合案例
09-29
**Ajax综合案例** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这个综合案例旨在深入理解并...
Ajax案例集下载：新增分页查询案例（包括《Ajax开发精要》中的两个综合案例） 下载
10-30
本文将详细介绍《Ajax开发精要》一书中新增的分页查询案例，并结合书中的两个综合案例进行分析，旨在帮助读者更好地理解Ajax技术的应用场景和技术细节。 #### 二、案例背景 在《Ajax开发精要》这本书中，作者构建...
Ajax做的一个小例子
03-28
NULL 博文链接：https://zys08.iteye.com/blog/1223960
ajax例子ajax例子
05-18
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
Ajax案例
技术专栏
07-27 520
数据库采用Sql Server2005项目名称为:Ajax_Demo1.com.demo.conn包package com.demo.conn;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;//获取数据库连接的类public class DBConnec
Ajax实例
qq_41281571的博客
08-02 685
Ajax实例 Ajax，最好的方便之处就是不用页面跳转来实现数据传输，直接js脚本，向处理页面提交异步请求，有点像多线程的感觉，用一个分支线程来进行数据分析，而不用整个页面跳转，用户体验非常好。 var name=document.getElementById(“name”); name.innerHTML=要改变的值，占位。 in_array(值，数组)：检测值是否在数组里面 onbl...
25个优秀的Ajax技术和实例
zhoujinxiong
06-05 632
1.Ajax RSS reader 一个简单的RSS reader，读取远程xml数据基于AJAX,PHP,MYSQL的RSS源， 这个例子允许用户在一个网页中查看多种源内容 2.Ajax 桌面 该指南是一个手把手教程，通过它你可以创建一个类似 于PageFlagePageFlage 和 Netvibes的桌面/网页。这个指南的目的是展示一些基于web应用程序的技巧，这些技巧也是比较常用的，比...
js ajax 案例
二娃的博客
03-13 257
HTML页面: &lt;?php if($theMethod=='browsec1'){ ?&gt; &lt;script type="text/javascript"&gt; $(function(){ $('#orderDate').change(function(){ var user_name=$('#seller').val(); var date=$('#ord...
Ajax经典案例大全：实战提升Web开发技能
书中涵盖了Ajax技术的多个关键领域，包括动态加载数据、改善用户体验、电子商务应用、服务器端计算、网页应用、自动化及定时任务、服务器管理、访问第三方服务以及综合项目开发。 本书共收录了45个精心设计的实例，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值