原生与封装Ajax

2023-12-27 19:27:52

Ajax

一.Ajax概述

1.应用场景

  • 在线视频、直播平台等…评论实时更新、点赞、小礼物、…
  • 会员注册时的信息验证,手机号、账号唯一
  • 百度关键搜索补全功能

2.简介

  • Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术
  • Ajax 是一种用于创建快速动态网页的技术
  • Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
  • 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面

3.特点

  • 局部刷新
  • 异步交互

4.异步与同步方式区别

(1)同步方式发送请求

  • 发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中

(2)异步方式发送请求

  • 发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待

二.JS原生方式实现异步

1.实现步骤

1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、使用open方法指定请求的相关信息
xhr.open("get/post","***Servlet",true);
3、使用send方法发送请求
xhr.send();
4、定义onreadystatechange的函数
xhr.onreadystatechange = function(){}
5、当readystate属性值为4时
xhr.readyState == 4;
6、获取响应信息
var msg = xhr.responseText;
7、处理信息 

2.案例

  • 视频点赞

(1)video.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script>
   function like() {
       var xhr = new XMLHttpRequest();
       xhr.open("get","likeServlet",true);
       xhr.send();
       xhr.onreadystatechange = function(){
           if (xhr.readyState == 4) {
               var msg = xhr.responseText;
               document.getElementById("num").innerText = msg;
           }
       }
   }
</script>
</head>
<body>
<video src="test.mp4" controls width="500"></video><br>
<input type="button" value="点赞" οnclick="like()">
当前点赞量:<span style="color: red;" id="num">${empty applicationScope.count ? 0 : applicationScope.count}</span>
</body>
</html>

(2)likeServlet.java

package com.lfg.servlet;

import javax.servlet.ServletContext;
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 java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/likeServlet")
public class LikeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   //获取原本的点赞量+1,将新的点赞量放回去
   ServletContext servletContext = getServletContext();
   Integer count = (Integer) servletContext.getAttribute("count");
   //如果当前点赞是第一个点赞
   if (count == null) {
       count = 1;
   } else {
       count++;
   }
   servletContext.setAttribute("count",count);
   //将最新的点赞量还给Ajax
   PrintWriter out = resp.getWriter();
   out.print(count);
   out.close();
}
}

三.jQuery方式实现异步

1.概述

  • jQuery是一个优秀的js框架,自然对JS原生的Ajax进行了封装,封装后的Ajax的操作方法更简洁,功能更强大,这也是程序员最普遍使用,语法结构简单,代码可读性好。

2.Ajax操作相关的jQuery方法

请求方式语法
Ajax请求$.ajax([settings])
GET请求$.get(url, [data], [callback], [type])
POST请求$.post(url, [data], [callback], [type])

(1)Ajax请求

a.语法
$.ajax({
	url:"",
	data:{},
	type:"post/get",
	async:true,
	dataType:"text",
	success:function(obj){

	},
	error:function(){

	}
})
b.属性解析
参数名称描述
url请求的服务器端url地址, 与form表单中的action一样,都是代表请求的路径
data前台需要向后台传递的数据(键值对形式)
type和form表单中method对应,代表请求类型 get/post
async取值是布尔类型true/false,分别表示异步和同步,默认为true(异步),一般不建议写
dataType回传的数据类型。text、xml、html、json…
success成功的回调函数,参数obj表示返回值
error失败的回调函数,一般不写
c.注意事项
  • 每个属性后都要跟随一个英文逗号,最后一个不用。
  • 每一个属性都是键值对的形式存在,中间用英文冒号:隔开
  • data:{} 是一个特殊的写法,值是一个{},里面使用键值对存储
    • 例如:data:{“键1”:值1, “键2”:值2, “键3”:值3}
  • 引入jQuery
d.示例
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    url:"likeServlet",
                    data:null,
                    type:"get",
                    async:true,
                    dataType:"text",
                    success:function (obj) {
                        $("#num").text(obj);
                    },
                    error:function () {
                        alert("测试");
                    }
                });
            });
        });

(2)GET请求

a.语法格式
$.get(url, [data], [callback], [type]);
b.属性解析
参数名称描述
url请求的服务器端url地址, 与form表单中的action一样,都是代表请求的路径
data前台需要向后台传递的数据(键值对形式)
callback当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
type预期的返回数据的类型,取值可以是 text、xml、html、json…
c.注意事项
  • 写法功能和$.ajax是一样的,但是严格要求属性顺序。
  • 引入jQuery
d.示例
	$.get("likeServlet",null,function (obj) {
                    $("#num").text(obj);
                },"text");

(3)POST请求

a.语法
$.post(url, [data], [callback], [type]);
b.属性解析
参数名称描述
url请求的服务器端url地址, 与form表单中的action一样,都是代表请求的路径
data前台需要向后台传递的数据(键值对形式)
callback当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
type预期的返回数据的类型,取值可以是 text、xml、html、json…
c.注意事项
  • 写法功能和$.ajax是一样的,但是严格要求属性顺序
  • 引入jQuery
d.示例
				$.post("likeServlet",null,function (obj) {
                    $("#num").text(obj);
                },"text");

(4) . a j a x 与 .ajax与 .ajax.get|$.post异同

相同点不同点
都是jQuery封装的方法实现异步交互$.ajax()是jQuery的第一次封装,使用时稍显麻烦,但是功能强大,覆盖了get和post请求,有错误调试能力,写法顺序可以改变。
. p o s t ( ) 和 .post()和 .post().get()是jQuery Ajax的第二次封装,由于 . A j a x ( ) 写法过于臃肿,简化为 .Ajax()写法过于臃肿,简化为 .Ajax()写法过于臃肿,简化为.post()和$.get(),功能是相同的没有区别。但是写法要求更高,顺序不能改变。

3.案例

  • 校验用户名是否唯一

(1)需求

  • 在用户注册页面,输入用户名,当用户名输入框失去焦点时,发送异步请求,将输入框的用户名传递给服务器端进行是否存在的校验。

(2)register.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<script src="jquery-3.6.4.js"></script>
<script>
   $(function () {
       // blur()失焦事件
       $("[name=username]").blur(function () {
           //获取用户输入的账号
           var username = $(this).val();
           //携带数据发送Ajax请求
           $.post("registerServlet",{"name":username},function(obj){
               if (obj) {
                   $("#username_msg").text("√");
               } else {
                   $("#username_msg").text("该账号已存在");
               }
           },"json");
       });
   });
</script>
</head>
<body>
<form action="" method="">
   账号:<input type="text" name="username"><span id="username_msg"></span><br>
   密码:<input type="password" name="password"><br>
   <input type="submit" value="注册">
</form>
</body>
</html>

(3)RegisterServlet.java

package com.lfg.servlet;

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 java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
       throws ServletException, IOException {
   String name = req.getParameter("name");
   boolean res = true;
   //账号不能是admin和chenwei
   if ("admin".equals(name) || "lfg".equals(name)) {
       res = false;
   }
   PrintWriter out = resp.getWriter();
   out.print(res);
   out.close();
}
}

(4)返回效果

在这里插入图片描述

四.Ajax返回值类型介绍

类型介绍
XML太麻烦,解析太费劲,已经不使用
HTML网页,其实质和返回文本一样,没区别,一般使用文本代替
script直接返回脚本
Text(文本)(默认返回类型)字符串类型,返回直接接收字符串
json返回是一个json对象,脚本中可以直接操作这个对象,非常方便
jsonp和Json一样,只不过这个支持跨域访问

五.JSON数据格式

1.JSON概述

  • JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
  • 它基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
  • JSON本质上就是格式有点特殊的字符串。

2.JSON语法格式

类型语法解释
对象类型{name:value,name:value…}其中name是字符串类型,而value是任意类型
数组类型[value,value,value…]其中value是任意类型
混合类型[{},{}… …] 或 {name:[]… …}合理包裹嵌套对象类型和数组类型

3.JSON书写规范

  • 使用{}和[]书写,{}表示对象类型,[]表示数组类型
  • 对象类型中每组数据之间用逗号隔开,每组中的关键字与值之间用冒号隔开
  • 数组类型中每个值之间用逗号隔开,最后一个值后面不要加逗号

4.JSON数据应用

(1)概述

  • json的转换工具是通过java封装好的一些jar工具包,直接将java对象或集合转换成json格式的字符串。
  • json可以直接接收boolean值,故不用转字符串

(2)JSON数据中转换常用工具

工具名称介绍
JsonlibJava 类库,需要导入的jar包较多
Gsongoogle提供的一个简单的json转换工具
Fastjsonalibaba技术团队提供的一个高性能的json转换工具
Jackson开源免费的json转换工具,springmvc转换默认使用jackson

5.JSON使用步骤

(1)导入json相关jar包

jackson-annotations-2.7.9.jar
jackson-core-2.7.9.jar
jackson-databind-2.7.9.jar

(2)创建java对象或集合

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="jquery-3.6.4.js"></script>
<script>
   $(function () {
       $("#btn").click(function () {
           $.get("jsonServlet",null,function (obj) {
               console.log(obj);
               //解析对象
               //console.log(obj.sid+","+obj.name);
               //解析数组
               /*for (var i = 0;i < obj.length;i ++) {
                   console.log(obj[i]);
               }*/

               //解析装满学生对象的数组
               /*for (var i = 0;i < obj.length;i ++) {
                   console.log(obj[i].sid+","+obj[i].name);
               }*/

               //解析map
               var students = obj.students;
               for (var i = 0;i < students.length;i ++) {
                   console.log(students[i].sid+","+students[i].name);
               }

           },"json");
       });
   });
</script>
</head>
<body>
<input type="button" value="测试" id="btn">
</body>
</html>

(3)进行转换

  • 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换
  • JsonServlet.java
package com.lfg.servlet;

import com.lfg.entity.Student;
import com.fasterxml.jackson.databind.ObjectMapper;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/jsonServlet")
public class JsonServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   //对象类型
   Student student = new Student(1,"mary");

   //数组类型
   String[] strs = {"abc","bcd","cde"};

   //混合类型(集合)
   List<Student> list = new ArrayList<>();
   Student student1 = new Student(1,"mary");
   Student student2 = new Student(2,"tom");
   Student student3 = new Student(3,"jack");
   list.add(student1);
   list.add(student2);
   list.add(student3);

   Map<String,Object> map = new HashMap<>();
   map.put("students",list);

   //使用Jackson进行数据类型转换
   ObjectMapper mapper = new ObjectMapper();
   String str = mapper.writeValueAsString(map);
   System.out.println(str);
   PrintWriter out = resp.getWriter();
   out.print(str);
   out.close();

}
}

6.案例

  • 百度搜索框自动补全

(1)需求

  • 在输入框输入关键字,下拉框中异步显示与该关键字相关的学生姓名

(2)search.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>百度一下</title>
<style type="text/css">
       * {
           margin: 0px;
           padding: 0px;
       }

       #box {
           display: inline-block;
       }

       #search {
           width: 545px;
           height: 42px;
           border-color: #4E6EF2;
           border-top-left-radius: 10px;
           border-bottom-left-radius: 10px;
           float: left;
       }

       #btn {
           width: 108px;
           height: 42px;
           background-color: #4e6ef2;
           color: #fff;
           border: none;
           font-size: 17px;
           font-weight: 400;
           border-top-right-radius: 10px;
           border-bottom-right-radius: 10px;
           float: left;
       }

       #show {
           width: 545px;
           border: 1px solid #4e6ef2;
           position: relative;
           left: -55px;
           text-align: left;
       }
   </style>
   <script src="jquery-3.6.4.js"></script>
   <script>
       $(function () {
           $("#search").bind("input propertyChange",function () {
               //获取输入的数据
               var sname = $(this).val();
               if (sname != "") {
                   $.get("studentServlet",{"sname":sname},function (obj) {
                       var div = "";
                       for (var i = 0;i < obj.length;i ++) {
                            div += "<div>"+obj[i].sname+"</div>";
                       }
                       $("#show").html(div);
                   },"json");
               } else {
                   $("#show").html("");
               }
           });
       });
   </script>
</head>
<body>
<center>
   <img alt="" width="310" height="150" src="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"><br/>
   <div id="box">
       <input id="search" type="text" name="search"/>
       <button id="btn">百度一下</button>
   </div>
   <div id="show">

   </div>
</center>
</body>
</html>

(3)StudentServlet.java

package com.lfg.servlet;

import com.lfg.entity.Student;
import com.lfg.service.StudentService;
import com.lfg.service.impl.StudentServiceImpl;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/studentServlet")
public class StudentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  req.setCharacterEncoding("utf-8");
  resp.setContentType("text/html;charset=utf-8");
  String sname = req.getParameter("sname");
  StudentService studentService = new StudentServiceImpl();
  String res = studentService.getStudentBySname(sname);
  PrintWriter out = resp.getWriter();
  out.print(res);
  out.close();
}
}

(4)Service

package com.lfg.service;

public interface StudentService {
String getStudentBySname(String sname);
}


package com.lfg.service.impl;

import com.lfg.dao.StudentDao;
import com.lfg.dao.impl.StudentDaoImpl;
import com.lfg.entity.Student;
import com.lfg.service.StudentService;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.util.List;

public class StudentServiceImpl implements StudentService {

StudentDao studentDao = new StudentDaoImpl();

@Override
public String getStudentBySname(String sname) {
  List<Student> list = studentDao.getStudentBySname(sname);
  ObjectMapper mapper = new ObjectMapper();
  String str = "";
  try {
      str = mapper.writeValueAsString(list);
  } catch (JsonProcessingException e) {
      e.printStackTrace();
  }
  return str;
}
}

(5)Dao

package com.lfg.dao;

import com.lfg.entity.Student;

import java.util.List;

public interface StudentDao {
List<Student> getStudentBySname(String sname);
}

package com.etime.dao.impl;

import com.etime.dao.StudentDao;
import com.etime.entity.Student;
import com.etime.util.C3P0Util;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class StudentDaoImpl implements StudentDao {

QueryRunner queryRunner = new QueryRunner(C3P0Util.getDataSource());

@Override
public List<Student> getStudentBySname(String sname) {
  List<Student> list = null;
  String sql = "select * from student where sname like ?";
  try {
      list = queryRunner.query(sql, new BeanListHandler<>(Student.class),"%"+sname+"%");
  } catch (SQLException e) {
      e.printStackTrace();
  }
  return list;
}
}

(6)实现效果

在这里插入图片描述

六.同异步

1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.6.4.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    url:"asyncServlet",
                    data:{"flag":"first"},
                    type:"get",
                    dataType:"text",
                    async:false,
                    success:function (obj) {
                        $("body").append(obj);
                    }
                });

                $.ajax({
                    url:"asyncServlet",
                    data:{"flag":"second"},
                    type:"get",
                    dataType:"text",
                    async:false,
                    success:function (obj) {
                        $("body").append(obj);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="同异步测试" id="btn">

</body>
</html>

2.servlet

package com.lfg.servlet;

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 java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/asyncServlet")
public class AsyncServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String flag = req.getParameter("flag");
        PrintWriter out = resp.getWriter();
        if ("first".equals(flag)) {
            out.print("<div style='background-color:red;'>" + flag + "</div>");
        } else {
            out.print("<div style='background-color:green;'>" + flag + "</div>");
        }
        out.close();
    }
}

3.注意事项

  • 必须使用同步的情况:第二个请求需要的数据是第一个请求返回的结果时
  • 设置同步请求
    • async:false

文章来源:https://blog.csdn.net/weixin_53903929/article/details/135246677
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。