异步AJAX，Gson

DaiQuan2206

已于 2022-02-03 09:18:47 修改

阅读量715

点赞数

分类专栏： web 文章标签： ajax javascript ecmascript

于 2022-01-18 22:30:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45935397/article/details/122564911

版权

web 专栏收录该内容

7 篇文章

订阅专栏

异步请求；局部刷新。

小例子：播放视频下面点赞

点赞的时候，视屏继续播放。只能用异步请求做

同步请求会刷新页面；

同步请求会阻塞当前页面直到处理完业务

异步提交不能用表单；

表单是同步提交

用jquery手写异步请求代码

1.创建ajax核心代码

var xhr=new XMLHttpRequest( );//实现异步必须的

2.调用xhr 的open对象打开严格请求

xml.open( "get","/demo/nice",true)//发送异步请求

提交方式；资源路径；是否发送异步请求

3.调用xhr的send( )将参数发出；

xhr.send(null) //get方法是没有请求体的；传入null

异步请求在servlet的更改：

不需要response.sendRedirect("路径")

只要响应页面部分需要更新的内容

响应字符串的设置头写法

//获取到数据库的值；返回这个值给浏览器

network状态 type=xhr表示是异步请求

异步请求发送后是获取不到状态的；

这是response发送前端的值

怎么获取呢？？？onreadystatechange

xhr.send(null)：

监控xhr状态的变化（xhr在请求发送的过程中会经历四次状态变化）：

四次状态变化：0--1：请求准备完毕

1---2：请求已经发送给服务器了

2---3：已经开始读取响应的内容

3---4：响应内容已经读取完毕了

xhr=onreadystatechange=function( ){

if(xhr.readyState==4){为true说明响应内容已经读取到了

document.getElementById("设置的id属性" ).innerHTML=xhr.responseText

//将xhr返回的Text内容设置到id的属性

}

案例：检查用户的登录名是否存在；用异步提交；

 <form>
      <p>用户名<input id=username onblur="checkUsername(this)" >
<span id="info"></span></p>
      <p>密码<input id=password type="password"> </p>
      <input type="submit" value="注册">
    </form>

<script type="text/javascript">
    function checkUsername(node){
        var xhr =new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            var span = document.getElementById("info");
            if (xhr.readyState==4){
                if (xhr.responseText=="pass"){
                    span.innerHTML="该用户名可以注册"
                }else{
                    span.innerHTML="已被注册"
                }
            }
        }
        xhr.open("get","/web/check?username="+node.value,true)
        xhr.send(null);
    }
</script>

@WebServlet("/check")
public class AddServlet extends HttpServlet {
    private UserAddService service = new userAddServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
      String username=request.getParameter("username");
        System.out.println(username);
        User user = service.checkUserNamex(username);
        if (user!=null){
            response.getWriter().write("nopass");
        }else { response.getWriter().write("pass");}

ajax大大提高了用户体验

复杂形式数据的交互

json

JSON ： JSON ( JavaScript Object Notation, JS 对象 ) 是一种轻量级【相对于 xml 来

说】的数据交换格式，它是一种能0006';

'2够被所有的编程语言都支持的一种通用数据格式 , 因

此 JSON 具有跨语言的特性

将一个 JAVA 对象转成 JSON 的过程称为 “JSON 的序列化 ” ，反之将一个 JSON 格式的数据

转成 JAVA 对象这个过程称为 “JSON 的反序列化 ”

服务器给浏览器响应一个对象的流程：

1.JAVA对象----->JSON---->JS对象反之也可以

为什么 JSON 能够被不同的编程语言都识别？

JSON 从本质上来说就是一个字符串，但是不是所有的字符串都能称为 JSON 数据，因

为 JSON 字符串是有要求的

JSON 必须是一个严格的按照 JS 对象的格式进行组织的一个字符串

严格的体现有两点：

属性名必须加双引号

如果属性值为文本类型，必须使用双引号【不能使用单引号】

JSON对象的格式：{属性名:属性值,属性名:属性值,.....}

JSON以逗号隔开

在 JS 中对于接收到的 json 字符串可以调用内置对象 JSON 的一个方法

parse(string JSON),将 JSON 字符串转成一个 JS 对象

调用 JSON对象的stringify(object obj)可以将一个JS对象序列化为JSON

问题：在后端通过字符串拼接的方式将一个 JAVA 对象转成 JSON 格式的字符串非常的

麻烦，也容易出错，将来很难维护？

解决方案：使用第三方的开源工具来自动完成上述过程

Gson

gson的使用:

1. String json = new Gson (). toJSON ( Object obj ) JSON 的序列化

2. Person person = new Gson (). fromJson ( json , Person . class ); JSON 的

反序列化

List < Employee > empList = new EmployeeServiceImpl (). findEmpList ();

String s = JSON . toJSONString ( empList );

System . out . println ( s );

使用jquery封装的ajax

原生js实现ajax:开发效率低；兼容性差

jquery对ajax进行了完美的封装

1.引入jquery框架

2.使用语法

$.ajax({
 url:设置请求的资源路径, 【必选参数】 
type:设置请求的方式 "get/post"
 如果不设置则默认为get请求,
 data:{参数名:参数值,参数名:参数值,....},
设置传递的参数，以对象的形式存在 【可选的】
 对于get请求也可以将请求的参数附加到url地址之后，
 dataType:"text/json",设置预期返回的响应结果类型 
text表示响应一个普通 的字符串 json表示响应一个json 【可选参数】 
如果不设置则默认为text success:function(res){ 
//响应成功后的回调，可以通过参数res获取到响应的结果数据 
//对结果进行处理 }，beforeSend:function(){ 
//请求发送之前的处理 },
complete:function(){ //请求完成后的处理 } })

$("input").click(function(){ $.ajax({
 url:"/web/test", type:"get", dataType:"text", 
success:function(res){ alert(res) } }) });

引入jquery;测试ajax

通过get从web/test获取到一个字符串 dateType指定获取的格式； res ：对获取的res进行操作

<input type="button" value="测试">
12345677654345676543
<script type="text/javascript" 
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
  $(function (){
    $("input").click(function (){
      $.ajax({
        url:"/web/test",
        type:"get",
        dataType:"text",
        success:function (res){
          alert("----------------")
        }
      })
    })
  })
</script>

若是传入一个json对象：

设置返回的类型dataType改成json

dataType:"json":会自动将后台传过来的json数据解析

使用ajax实现前后端完全分离；

让前端没有jsp 需要的数据全部从后台获取

异步请求获取查询所有用户，不能刷新页面。

<body>
<input type="button" value="加载数据" id="btnLoad">
<table>

  <thead>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>出生</th>
    <th>部门编号</th>
    <th>个人头像</th>

    <th>操作</th>
  </tr>
  <img src="/img/1.gif" width="50" height="50">
  </thead>
  </table>
  <tbody>

  </tbody>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function (){
      $("#btnLoad").click(function (){
        $.ajax({
          url:"/web/load",
          type:"get",
          dataType:"json",
          success:function(arr){
            alert(arr.length)
          // for (var i=0;i<arr.length;i++){
          //   var row=$("<tr><td>"+arr[i].id+"</tr></td>"+"<tr><td>"+arr[i].name+"</td><td>"+
          //           arr[i].gender+"</td><td>"+ arr[i].birth+"</td><td>"+arr[i].deptid+"</td></tr>");
          //   $("tbody").append(row);
          // }

        },
          beforeSend:function (){
            // 发送之前的操作
            $("img").show();
          },
          complete:function (){
            //发送之后的处理
            $("img").hide();
          }
        })
      })

    })
</script>
</body>

效果：