Ajax相关 - 技术栈

Ajax

1. 什么是Ajax

客户端发送请求后，我们的服务端响应一个页面或地址

而ajax响应的不再是地址或网页，而是**一个数据**

Ajax技术的产生：Asynchronous JavaScript and XML

允许浏览器与服务器通信而无须刷新当前页面的技术都叫Ajax

Ajax的流程

使用Ajax必须具备：

通过事件触发向服务器发送请求
服务器响应的一定是数据，不再是地址或网页
具备的条件：js功底和css功底

2. 如何使用ajax

两种实现方法：

可以通过js完成原生的ajax请求。JavaScript
可以使用jquery实现ajax请求------别人封装原生js发送的ajax

ajax请求：常用方法如下

$.get(url,[data],[callback],[type]);

$post(url,[data],[callback],[type]);

参数意义：

url：服务器的地址

data：发送ajax请求时携带的数据

callback：回调函数------当服务器响应时会触发该函数

type：服务器响应的数据类型。默认text。而我们一般需要json

：里面的参数表示可有可无

实现步骤：

1. 引入jquery文件

在所需的jsp文件的html------的head里引入jquery文件，同前端所学一样

jsp 复制代码

<head>
    <title>$Title$</title>
    <%--引入jquery文件--%>
    <script src="js/jquery-3.4.1.js"></script>
  </head>

2. 通过事件向服务器发送请求

给响应按钮添加相应事件，如点击事件，在事件中发送ajax请求

jsp 复制代码

  <body>
  <button onclick="MyAjax()">点击时间</button>
  <%--获取当前时间--%>
  <%=new Date()%>>
  <span id="r"></span>
  </body>

在点击事件中定义ajax服务器的地址，发送请求时所携带的数据，回调函数等

jsp 复制代码

<script>
<%--/MyServlet：服务器地址
    {name:"zmq",age:15}：发送请求时携带的值
    回调函数：当服务器响应后触发的函数
    msg：服务器响应后的数据赋值给该变量
--%>
  function MyAjax(){
    $.get("/MyServlet",{name:"zmq",age:15},function (msg){
       //依据选择器将msg的值传入到相应位置
       $("#r").html(msg);
    })
  }
</script>

3. 服务器端的相关业务操作

注解：用于注册servlet

java 复制代码

@WebServlet(urlPatterns = "/MyServlet")

继承HttpServlet类，重写service方法

因为前面发送请求时携带了参数，所以------接收参数

java 复制代码

 //获取数据
        String name = req.getParameter("name");
        String age = req.getParameter("age");

因为java代码中没有内置输出对象，所以------需要先获取输出对象

因为是响应的，所以用resp

java 复制代码

//获取输出对象
        PrintWriter our = resp.getWriter();

通过输出对象响应数据，将响应的数据传入赋值给msg

java 复制代码

//响应数据
        our.print("ajax----------响应");

最后，刷新out对象和关闭out对象

java 复制代码

  //刷新页面
        our.flush();
        //关闭响应
        our.close();

整体代码

java 复制代码

@WebServlet(urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    //重写service方法
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码格式
        req.setCharacterEncoding("utf-8");//请求的编码格式
        resp.setCharacterEncoding("utf-8");//响应的编码格式
        //获取数据
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        //获取输出对象
        PrintWriter our = resp.getWriter();
        //响应数据
        our.print("ajax----------响应");

        //刷新页面
        our.flush();
        //关闭响应
        our.close();
    }
}

3.服务器响应的数据类型

text：文本类型，默认就是文本类型

json ：json对象类型，非常重要

xml ：xml类型，可扩展标记语言，一般用于人工智能、微信支付【了解】

4. json以及格式

4.1 what

JSON ：JavaScript Object Notation 一种简单的数据格式

是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包

JSON规则：对象是一个无需的" '名称/值'对"集合。一个对象已"{"(左括号)开始，"}"(右括号)结束。每个"名称"后跟一个":"(冒号)；"'名称/值'对"之间使用","(逗号)分隔

JSON对象：

java 复制代码

{"key":value,"key":value...}

JSON集合：

java 复制代码

[
    {"key":value,"key":value...},
    {"key":value,"key":value...},
    ...
    {"key":value,"key":value...}
]

规则如下：

① 映射用冒号(":")表示。名称：值

② 并列的数据之间用逗号(",")分割。名称1：值1，名称2：值2

③ 映射的集合(对象)用大括号("{}")表示。{名称1：值1，名称2：值2}

④ 并列数据的集合(对象)用大括号("[]")表示

[

{名称1：值1，名称2：值2}，

{名称1：值1，名称2：值2}

]

⑤ 元素值可具有的类型：string、number、object、array、true、false、null

⑥ 调用json对象中数据：对象名.key

jsp 复制代码

    <script>
         //json对象,String,number,boolean,Object,null
         var p={"name":"张三","age":18};
         // alert(p.name)
         //复杂的json
         var p2={"name":"李四","age":22,"address":{"province":"河南省","city":"郑州市","street":"杨金街道"}};
         // alert(p2.address.street)
        //json集合对象
         var ps=[
             {"name":"李四1","age":22,"address":{"province":"河南省1","city":"郑州市1","street":"杨金街道1"}},
             {"name":"李四2","age":221,"address":{"province":"河南省2","city":"郑州市2","street":"杨金街道2"}},
             {"name":"李四3","age":222,"address":{"province":"河南省3","city":"郑州市3","street":"杨金街道3"}}
         ]
        //循环
        for(var i=0;i<ps.length;i++){
            alert(ps[i].name)
        }
    </script>

4.2 服务器如何响应json数据

就是把拿到的java对象，转化为json数据响应给前端

第一种，手动把java对象转化为json对象【不用】

后端

java 复制代码

@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受参数
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        //业务操作---
        System.out.println("name~~~~~~~~~~"+name+";age~~~~~~~~~~~"+age);
        //获取输出对象
        PrintWriter out = resp.getWriter();
        User user=new User(1,"xueyang",18);
        //把java对象转化为json字符串数据---手动转化  学生: id,name,sex,age,hiredate,address,banji....
        String json="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"}";
        System.out.println(json);
        //响应数据---
        out.print(json);

        //刷新和关闭out对象
        out.flush();
        out.close();
    }
}

前端

jsp 复制代码

 <script>
      function myclick() {
           // AjaxServlet服务器的地址
           // {key:value,key:value.....}
           // 回调函数: 当服务器响应后触发的函数  msg:服务器响应的数据赋值给该变量
            $.get("/AjaxServlet",{name:"zs",age:25},function(msg){ //msg={\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"};
                   //alert(msg.name)//服务器响应的是一个json格式的字符串
                //手动把json格式的字符串转化为json对象
                // var jsonObject=JSON.parse(msg);
                // alert(jsonObject.name+";"+jsonObject.age)
                // $("#r").html(msg)
                alert(msg.name)
            },"json");
      }
   </script>

第二种：第三方工具------阿里巴巴fastjson

① 引入fastjson依赖

② 后端代码

创建一个Java对象

java 复制代码

User user=new User(1,zmq,18);

把Java对象转化为json字符串数据------通过fastjson工具类

java 复制代码

String json=JSON.toJSONString(user);

完整代码

java 复制代码

@Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");//请求的编码设置
        resp.setCharacterEncoding("utf-8");//设置响应的编码
        //接受参数
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        //业务操作---
        System.out.println("name~~~~~~~~~~"+name+";age~~~~~~~~~~~"+age);
        //获取输出对象
        PrintWriter out = resp.getWriter();
        User user=new User(1,"薛阳",18);
        //把java对象转化为json字符串数据---手动转化  学生: id,name,sex,age,hiredate,address,banji....
//        String json="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"age\":"+user.getAge()+"}";
//        System.out.println(json);
        //把java对象转化为json字符串数据---fastjson工具类
        String json = JSON.toJSONString(user);
        //响应数据---
        out.print(json);

        //刷新和关闭out对象
        out.flush();
        out.close();
    }

③ 前端代码

回调函数中type设置为json类型

js 复制代码

<script>
	function myclick(){
        $.get("/AjaxServlet",{name:"zs",age:25},funcion(msg){
             alert(msg.name) 
              },"json");
    }
</script>

5.通过使用Ajax实现登录

type类型改为button，不再使用submit提交表单数据，而是普通的普通按钮，添加点击事件
jsp 复制代码
```
 <input type="button" value="登录" onclick="loginCheck()"/>
```

在点击事件function中，通过选择器获取到input框中的值。通过get方法中的[data]将数据携带

jsp 复制代码

function loginCheck(){
    //依据id选择器获取值
    var username = $("#username").val();
    var userpassword = $("#userpassword").val();
    //ajax请求，携带通过id选择器获取到的数据username和userpassword
    $.get("/LoginServlet",{"name":username,"password":userpassword},function (msg){
        if(msg==="true"){
          alert("登陆成功！");
          location.href="success.jsp";
        }else{
          alert("账号或密码错误");
        }
    });
  }

在LoginServlet中，通过req.getParamether获取携带的数据，封装到session会话中。调用方法查询，如果返回值为null，返回false给msg；如果不等于null，返回true给msg。都是通过创建的out响应对象调用print进行返回。

java 复制代码

//获取数据
        String name = req.getParameter("name");
        String password = req.getParameter("password");
        //通过获取到的数据调用userdao中的方法进行判断
        UserDao userDao=new UserDao();
        User user = userDao.selectByNameAndPassword(name, password);
        //获取输出对象
        PrintWriter out = resp.getWriter();
        //对user进行判断
        if(user!=null){
            //获取session对象，并将用户信息封装到会话中
            HttpSession session = req.getSession();
            session.setAttribute("user",user);
            //输出布尔值true
            out.print(true);
        }else {
            //输出布尔值false
            out.print(false);
        }

刷新，关闭

java 复制代码

        //刷新
        out.flush();
        //关闭out对象
        out.close();

总结

失焦事件：onblur()

json中"key"为字符串类型，不加"",表示jaon中的类对象

onload：页面加载完执行事件【js】

【jquery】：$(function(){})