Ajax!从入门到入土

- - Ajax
  - 1、JSON
  - - 1.1 什么是JSON
    - 1.2 JSON语法
  - 2、JSON的解析
  - - 2.1 Java中解析JSON
    - - 2.1.1 FastJSON解析
      - 2.1.2 Jackson
    - 2.2 JavaScript中解析JSON
  - 3、Ajax的基本使用
  - - 3.1 什么是Ajax
    - 3.2 Ajax的工作原理
    - 3.3 Ajax的过程
  - 4、结合JavaWeb使用Ajax

Ajax

BOM：window/screen/location/history/

Asynchronous Javascript And XML （异步的JavaScript和XML）

表单提交：存在“整个页面刷新”过程

Ajax:可以实现“局部刷新”

1、JSON

1.1 什么是JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交互格式。它基于ECMAScript(W3C指定的JS规范)的一个子集，采用完成独立的格式，不依赖与任何编程语言。

1.2 JSON语法

[] 表示数组

{} 表示对象

“” 属性名或字符类型的值

: 属性名和值之间的一个分隔符

, 多个属性之间的一个分隔符

一个JSON对象 {"id":"1001", "name": "张三丰", "gender":"男"} JSON数组 [{"id":1001, "name": "张三丰", "gender":"男"},{"id":1002, "name": "张非", "gender":"男"}]

2、JSON的解析

将JSON转换成需要的数据格式的过程

2.1 Java中解析JSON

将一个字符串格式的JOSN转换成对象

String  json = "{\"id\":1001, \"name\": \"张三丰\", \"gender\":\"男\"}";

class Student{
    private Integer id;
    private String name;
    private String gender;
}

Student student = ?
    student->JSON  将对象转换成json
    json -> student 将json转成java对象

2.1.1 FastJSON解析

FastJSON是一个Java库，可以将Java对象转换成JSON格式，当然也可以将一个JSON字符串转换成Java对象。

提供了toJSONString()和parseObject()方法来将Java对象与JSON相互转换

toJSONString()：将Java对象转换JSON格式字符串

parseObject():将JSON格式字符串转换成Java对象

toJSONString():将Java对象转换成JSON格式字符串

添加依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.54</version>
</dependency>

@Data
public class Employee {
    private Integer id;
    private String name;

    //在FastJson中处理日期格式的
    @JSONField(format = "yyyy-MM-dd HH:mm:ss")
    private Date hireDate;
    private String gender;
    private Double salary;
}

public class FastJSONDemo {
    public static void main(String[] args) {
        Employee emp = new Employee();
        emp.setId(1001);
        emp.setName("张大炮");
        emp.setHireDate(new Date());
        emp.setSalary(2000);
        emp.setGender("女");
        //{"id":1001, "name":"张大炮", "hireDate":"2020-7-9","salary": 2000, "gender":"女"}
        String json = JSON.toJSONString(emp);
        System.out.println(json);

        List<Employee> list = new ArrayList<>();
        list.add(new Employee(1002, "张小炮", 1000, new Date(), "女"));
        list.add(new Employee(1003, "张中炮", 3000, new Date(), "男"));
        list.add(new Employee(1004, "张伟炮", 5000, new Date(), "女"));
        String json2 = JSON.toJSONString(list);
        System.out.println(json2);

    }
}

parseObject()将字符串解析成对象

public class FastJSONDemo {
    public static void main(String[] args) {
        String json = "{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"张大炮\",\"salary\":2000}";
        Employee employee = JSON.parseObject(json, Employee.class);
        System.out.println(employee);

        String json2 = "[\"上海\",\"重庆\",\"天津\",\"北京\"]";
        List<String> list = JSON.parseArray(json2, String.class);
        System.out.println(list);

        String json3 = "[{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1002,\"name\":\"张小炮\",\"salary\":1000},{\"gender\":\"男\",\"hireDate\":1594276557616,\"id\":1003,\"name\":\"张中炮\",\"salary\":3000},{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1004,\"name\":\"张伟炮\",\"salary\":5000}]";
        List<Employee> list3 = JSON.parseArray(json3, Employee.class);
        System.out.println(list3);
    }
}

2.1.2 Jackson

Jackson是一个能够将Java对象转换成JSON字符串，也能够将JSON字符串解析成Java对象

readValue和writeValue实现的

通过writeValueAsString()将对象转换成JSON字符串

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.3</version>
</dependency>

public class JacksonDemo {
    public static void main(String[] args) {
        Employee emp = new Employee();
        emp.setId(1001);
        emp.setName("张大炮");
        emp.setHireDate(new Date());
        emp.setSalary(2000);
        emp.setGender("女");
        ObjectMapper objectMapper = new ObjectMapper();
        try {
            String json = objectMapper.writeValueAsString(emp);
            System.out.println(json);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        List<Employee> list = new ArrayList<>();
        list.add(new Employee(1002, "张小炮", 1000, new Date(), "女"));
        list.add(new Employee(1003, "张中炮", 3000, new Date(), "男"));
        list.add(new Employee(1004, "张伟炮", 5000, new Date(), "女"));
        try {
            String json2 = objectMapper.writeValueAsString(list);
            System.out.println(json2);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
    }
}

将字符串解析成Java对象

public class JacksonDemo {
    public static void main(String[] args) throws IOException {
        String json = "{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"张大炮\",\"salary\":2000}";
        ObjectMapper objectMapper  = new ObjectMapper();
        Employee employee = objectMapper.readValue(json, Employee.class);
        System.out.println(employee);

        String json2 = "[\"上海\",\"重庆\",\"天津\",\"北京\"]";
        List<String> list = objectMapper.readValue(json2, new TypeReference<List<String>>() {});
        System.out.println(list);

        String json3 = "[{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1002,\"name\":\"张小炮\",\"salary\":1000},{\"gender\":\"男\",\"hireDate\":1594276557616,\"id\":1003,\"name\":\"张中炮\",\"salary\":3000},{\"gender\":\"女\",\"hireDate\":1594276557616,\"id\":1004,\"name\":\"张伟炮\",\"salary\":5000}]";
        List<Employee> list3 = objectMapper.readValue(json3, new TypeReference<List<Employee>>(){});
        System.out.println(list3);
    }
}

2.2 JavaScript中解析JSON

字符串转换JSON:JSON.parse()

var json="{\"gender\":\"女\",\"hireDate\":1594276557421,\"id\":1001,\"name\":\"张大炮\",\"salary\":2000}";
var jsonObj = JSON.parse(json);
alert(jsonObj.name);

JSON对象转换成字符串：JSON.stringify();

var jsonObj2 = {"id":1001,"name":"张二炮", "age":20};
//alert(typeof jsonObj2);
var jsonStr = JSON.stringify(jsonObj2);
alert(jsonStr);

总结：

后端

fastjson:

json-》object JSON.parseObject

object->json JSON.toJsonString()

jackson

json->object objectMapper.readValue

object->json objectMapper.writerValueAsString()

前端

json-》object JSON.parse()

object-》json JSON.stringify()

3、Ajax的基本使用

3.1 什么是Ajax

Ajax是一种无须重新加载整个页面的情况下，实现更新部分网页数据的技术。

Ajax = Asynchronous Javascript And XML异步JavaScript andXML

可以实现部分数据与服务器进行交互

传统的方式必须提交页面（销毁），获取响应结果后重新加载整个页面。而AJAX可以实现局部数据的提交，不需要销毁整个页面，所有体验更好！

3.2 Ajax的工作原理

Ajax!从入门到入土

ajax发送请求和接收的请求过程也是符合WEB规范

XMLHttpRequest对象（异步对象，是与服务器进行交互的对象）

JavaScript中的DOM实现处理结果和更新数据

XML(数据的交互格式)\JSON

3.3 Ajax的过程

案例：判断一个用户名是否可用！

1、创建XMLHttpRequest对象

var req= null;
if(window.XMLHttpRequest){
    //IE7+ F...
    req = new XMLHttpRequest();
}else{
    //IE5,IE6
    req = new ActiveXObject("Microsoft.XMLHTTP");
}
alert(req);

MIME：文件格式

2、设置发送方式

xmlhttp.open(请求方式, 服务器接收的地址， true)
- 请求方式， GET  POST 
- 服务器接收的地址： 接收请求并进行相关业务处理
- boolean: true表示异步操作， false同步操作

//发送GET方式
xmlhttp.open("GET", "http://xxxx/xxxx/xxx", true)
//发送GET方式，并传递参数
xmlhttp.open("GET", "http://xxxx/xxxx/xxx?username=admin&age=20", true)

//发送POST方式
xmlhttp.open("POST","http://xxxx/xxxx/xxx", true)
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置HTTP的头信息，表示当前是以表单的方式发送请求到服务器

3、定义回调结果

xmlhttp.onreadystatechange=回调方法

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status == 200){
        //服务器端执行成功了
        
    }
}

readyState:表示ajax的状态码：从0到4的过程

0：请求未初始化

1：已建立连接

2：请求已接收

3：请求中

4：请求已完成

status：http响应的状态码

responseText：服务器返回的结果

4、发送请求

xmlhttp.send();//GET方式，该方法不需要设置任何内容
xmlhttp.send();//POST方式，如果需要传递参数则可以在该方法中拼接字符串xmlhttp.send("key=value&key=value&key=value")

Ajax基本流程

//1.创建ajax对象
var req = null;
if(window.XMLHttpRequest) {
    //IE7+ F...
    req = new XMLHttpRequest();
} else {
    //IE5,IE6
    req = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.定义发送方式
req.open("get", "http://localhost:8080/day22/check?name=admin", true);
//3.定义回调
req.onreadystatechange = function() {
    if(req.readyState == 4 && req.status == 200) {
        alert("Yes")
    }
}

//4.发送
req.send();

4、结合JavaWeb使用Ajax

案例：三级联动

安徽-》合肥-》瑶海

1 安徽 0 1

2 上海 0 1

3 合肥 1 2

4 芜湖 1 2

5 瑶海 3 3

1、整理数据结构

Ajax!从入门到入土

2.设计界面

省：<select id="province">
    <option value="-1">==请选择==</option>
</select>
市：<select id="city">
    <option value="-1">==请选择==</option>
</select>
区：<select id="area">
    <option value="-1">==请选择==</option>
</select>

新闻
	国内新闻
        财经新闻
		体育新闻
			CBA
				
			足球
		
		娱乐新闻
	国际新闻
电影
id   title 	pid   level  isleaf
1     新闻	0      1     0
2	 国内新闻  1      2     0
3	 国际新闻  1	  2     1
4    体育新闻  2      3     1
5    财经新闻  2      3     1
6     电影    0      1     1

新闻》国内新闻》上海新闻》财经新闻

3.服务器端接口的开发

package com.itluma.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itluma.dao.AddressDAO;
import com.itluma.domain.Address;

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.List;

/**
 * @author 飞鸟
 * @create 2020-07-10 10:41
 */
@WebServlet("/address")
public class AddressServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Integer pid = null;
        try {
            pid = Integer.parseInt(req.getParameter("pid"));
        } catch (NumberFormatException e) {
        }

        if (pid != null) {
            AddressDAO dao = new AddressDAO();
            List<Address> list = dao.findByPid(pid);
            ObjectMapper objectMapper = new ObjectMapper();
            String json = objectMapper.writeValueAsString(list);
            resp.setContentType("text/json;charset=utf-8");//设置输出json数据格式
            resp.getWriter().print(json);
        }
    }

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

4、窗体加载后发送ajax请求，查询所有的省

<script type="text/javascript">
        window.onload = function () {
            //1.查询所有省
            /*var list = [
                {"id": 1, "name": "安徽", "pid": 0, "level": 1},
                {"id": 2, "name": "上海", "pid": 0, "level": 1},
                {"id": 3, "name": "湖北", "pid": 0, "level": 1}
            ];*/
            var province = document.getElementById("province");
            var city = document.getElementById("city");

            var req = new XMLHttpRequest();
            req.open("GET", "/day23/address?pid=0", true);
            req.onreadystatechange = function () {
                if (req.readyState == 4 && req.status == 200) {
                    var list = req.responseText;//默认返回的是一个字符串类型的json串

                    //将字符串类型的json转换成json对象
                    var json = JSON.parse(list);

                    //2.遍历list数组，并生成对应的option对象，然后将该option对象放到select中

                    for (var i = 0; i < json.length; i++) {
                        var opt = new Option(json[i].name, json[i].id);//<option value="list[i].id">list[i].name</option>
                        province.options.add(opt);
                    }
                }
            }
            req.send();

            //2.查询算中的省份对应的市
            province.onchange = function () {
                city.options.length = 1;
                if (this.value != -1) {
                    req.open("GET", "/day23/address?pid=" + this.value, true);
                    req.onreadystatechange = function () {
                        if (req.readyState == 4 && req.status == 200) {
                            var list = req.responseText;//默认返回的是一个字符串类型的json串

                            //将字符串类型的json转换成json对象
                            var json = JSON.parse(list);

                            //2.遍历list数组，并生成对应的option对象，然后将该option对象放到select中
                            for (var i = 0; i < json.length; i++) {
                                var opt = new Option(json[i].name, json[i].id);//<option value="list[i].id">list[i].name</option>
                                city.options.add(opt);
                            }
                        }
                    }
                    req.send();
                }
            }
        }
    </script>

Ajax!从入门到入土

Ajax!从入门到入土

Ajax

1、JSON

1.1 什么是JSON

1.2 JSON语法

2、JSON的解析

2.1 Java中解析JSON

2.1.1 FastJSON解析

2.1.2 Jackson

2.2 JavaScript中解析JSON

3、Ajax的基本使用

3.1 什么是Ajax

3.2 Ajax的工作原理

3.3 Ajax的过程

4、结合JavaWeb使用Ajax

继续阅读

jQuery实现Ajax通讯的几种常用方式

SpringMVC 与 Json实现数据交互

Spring MVC+Ajax创建实例

jquery,ajax,jsonp例子+springmvc后台

SpringMVC(六) | 前后端交互之ajax与jsonjsonajax

SpringMVC之ajax异步交互

SpringMvc与前端交互的数据转递（ajax）一、text类型数据二、json类型数据

PHP基础入门，简单实现前端后端交互<?php?>、echo变量及区分单双引号创建数组、echo、print_r()、var_dump()区别二维数组常见数据类型及调用函数自定义函数http协议常用请求方式及在php中的用法网页和服务器简单交互案例

jqGrid的使用笔记：5. 事件

JSON的三种解析方式JSON的三种解析方式一、什么是JSON？二、JSON解析之传统的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON总结：

django短信验证码的后端实现

前后端分离之跨域问题

一.Linux命令行使用技巧Linux命令行使用技巧

How to Map Network Drives From the Command Prompt in Windows

死宅日志——排序和进制

java学习笔记（一）程序基本结构