Ajax入门 - 技术栈

一、ajax介绍

1、ajax(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

2、本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。

3、一般的网页如果需要更新内容，必需重新加载个页面。

4、而AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

2、JQuery的GET方式实现AJAX

1、核心语法：$.get(data],[callback],[type] )

1.url:请求的资源路径。

2.data:发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

3.callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

4.type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

2、代码实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>用户注册</title>

</head>

<body>

<form autocomplete="off">

姓名：<input type="text" id="username">

<span id="uSpan"></span>

<br>

密码：<input type="password" id="password">

<br>

<input type="submit" value="注册">

</form>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

//1.为用户名绑定失去焦点事件

$("#username").blur(function () {

let username = $("#username").val();

//2.jQuery的GET方式实现AJAX

$.get(

//请求的资源路径

"userServlet",

//请求参数

"username=" + username,

//回调函数

function (data) {

//将响应的数据显示到span标签

$("#uSpan").html(data);

},

//响应数据形式

"text"

);

});

</script>

</html>

3、JQuery的POST方式实现AJAX

1、核心语法：$.post(url,[data],[callback],[type]);

url:请求的资源路径。

data:发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback:当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type:预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

4、代码实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>用户注册</title>

</head>

<body>

<form autocomplete="off">

姓名：<input type="text" id="username">

<span id="uSpan"></span>

<br>

密码：<input type="password" id="password">

<br>

<input type="submit" value="注册">

</form>

</body>

<script src="js/jquery-3.3.1.min.js"></script>

<script>

//1.为用户名绑定失去焦点事件

$("#username").blur(function () {

let username = $("#username").val();

//2.jQuery的POST方式实现AJAX

$.post(

//请求的资源路径

"userServlet",

//请求参数

"username=" + username,

//回调函数

function (data) {

//将响应的数据显示到span标签

$("#uSpan").html(data);

},

//响应数据形式

"text"

);

});

</script>

</html>

5、JQuery的通用方式实现AJAX

1、核心语法：$.ajax({name:value,name:value,...});

1.url：请求的资源路径。

2.async：是否异步请求，true-是，false-否 (默认是 true)。

3.data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

4.type：请求方式，POST 或 GET (默认是 GET)。

5.dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

6.success：请求成功时调用的回调函数。

7.error：请求失败时调用的回调函数。

6、代码实现

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<%--引入js--%>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

<input type="button" value="发送异步请求" οnclick="fun();">
<br>
<span id="span1"></span>
<br>
<span id="span2"></span>

</body>
<script>
    $("#span1").html(new Date().getTime());
    //给按钮绑定单击事件,发起ajax异步请求, 后台返回数,将后台返回的数据写到span2中
    function fun() {
        //ajax请求: 1.路径  2.数据  3.请求方式  4.返回的数据类型  5.回调函数
        $.ajax({
            //请求资源路径
            url:"/bb",
            //是否异步
            async:true,
            //请求参数 key=value的形式,多个键值对之间使用&隔开
            data:"username=tom&age=20",
            //请求方式
            type:"post",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数 data就是后台返回的数据
            success:function (data) {
                //请求成功后执行 将响应的数据显示到span标签
                $("#span2").html(data);
            },
            error:function (data) {
                //请求失败之后执行
                $("#span2").html("请求失败");
            }
        });
    }
</script>
</html>

7、小结

1、AJ**AX(Asynchronous JavaScript And XML)：**异步的 JavaScript 和 XML

2、通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

3、同步和异步

1、同步：服务器端在处理过程中，无法进行其他操作。

2、异步：服务器端在处理过程中，可以进行其他操作。

4、GET 方式实现：$.get();

5、POST 方式实现：$.post();

1、url：请求的资源路径。

2、data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

3、Callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

4、type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

6、通用方式实现：$.ajax();

1.url：请求的资源路径。

2.async：是否异步请求，true-是，false-否 (默认是 true)。

3.data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

4.type：请求方式，POST 或 GET (默认是 GET)。

5.dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

6.success：请求成功时调用的回调函数。

7.error：请求失败时调用的回调函数。

二、JSON的处理

1、json回顾

1.JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

2.它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

3.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。

2、创建格式

基本规则

据在名称/值对中：json数据是由键值对构成的

键用引号(单双都行)引起来，也可以不使用引号

值得取值类型：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中） {"persons":[{},{}]}

对象（在花括号中） {"address":{"province"："陕西"....}}

null

数据由逗号分隔：多个键值对由逗号分隔

花括号保存对象：使用{}定义json 格式

方括号保存数组：[]

//1.定义基本格式

var person = {"name": "张三", age: 23, 'gender': true};

//2.嵌套格式 {}---------> []

var persons = {

"persons": [

{"name": "张三", "age": 23, "gender": true},

{"name": "李四", "age": 24, "gender": true},

{"name": "王五", "age": 25, "gender": false}

]

};

//3.嵌套格式 []---------> {}

var ps = [{"name": "张三", "age": 23, "gender": true},

{"name": "李四", "age": 24, "gender": true},

{"name": "王五", "age": 25, "gender": false}];

2、JSON转换工具的介绍

我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。

JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。

可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。

Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
- 导入 jar 包。
  1. 创建核心对象。
  2. 调用方法完成转换。

三、JSON转换练习

1、对象json，json转对象

java 复制代码

package com;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.jupiter.api.Test;
import pojo.Student;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
/**
 * @author 86136
 */
public class Test01 {
    //对象->JSON  在JSON格式中. {}就代表一个对象, []代表数组/集合
    @Test
    public void test1() throws IOException {
        //1.创建jackson和新对象
        ObjectMapper mapper = new ObjectMapper();
        //2.创建Student对象
        Student student = new Student(1, "苏沐橙", "成都");
        //3.将Student对象=>JSON格式
        String s = mapper.writeValueAsString(student);
        //{"id":1,"name":"苏沐橙","address":"成都"}
        System.out.println(s);
        //4.JSON=>Student对象
        Student stu = mapper.readValue(s, Student.class);
        //Student{id=1, name='苏沐橙', address='成都'}
        System.out.println(stu);
    }
    //list集合->JSON
    @Test
    public void test02() throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        ArrayList<Object> list = new ArrayList<>();
        Collections.addAll(list,
                new Student(1,"苏沐橙","成都"),
                new Student(2,"瑶瑶","武汉"),
                new Student(2,"陈雨舒","北京"));
        String s = mapper.writeValueAsString(list);
        System.out.println(s);

        //JSON->list
        ArrayList arrayList = mapper.readValue(s, ArrayList.class);
        System.out.println(arrayList);
    }

    //map->json
    @Test
    public void test03() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        HashMap<String, Object> map = new HashMap<>();
        map.put("name","瑶瑶");
        map.put("address", "成都");
        String s = mapper.writeValueAsString(map);
        System.out.println(s);
    }

}

四、综合案例

代码：

java 复制代码

package web;

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.util.HashMap;

/**
 * @author 86136
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //浏览器中文乱码
        resp.setContentType("application/json;charset=utf-8");
        //1、获取用户名
        String username = req.getParameter("username");
        //2、调用service层判断用户名是否存在
        //设置响应的数据格式为json
        HashMap<String, Object> map = new HashMap<>();
        if ("苏沐橙".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名已有,请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        //将map转为json，并且传递给客户端
        //将map转为json
        ObjectMapper mapper = new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(resp.getWriter(),map);
    }

}

jsp代码：

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册</title>
  </head>
  <body>
  <form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
  </form>
  </body>
<script src="js/jquery-3.3.1.js"></script>
<script>
 //页面加载完成后
 $(function () {
   //给username绑定blur事件
   $("#username").blur(function () {
     //获取username文本输入框的值
     var username = $(this).val();
     //发送ajax请求
     $.get("findUserServlet",{username:username},function (data) {
       //判断userExsit键的值是否是true
       //alert(data);
       var span = $("#s_username");
       if (data.userExsit){
         //用户名存在
         span.css("color","red");
         span.html(data.msg);
       }else {
         //用户名不存在
         span.css("color","green");
         span.html(data.msg)
       }
     });
   });
 });
</script>
</html>