Ajax之入门学习-优快云博客

本文链接：https://blog.youkuaiyun.com/zysp158/article/details/126170956

Ajax和Json基础学习笔记

Ajax简介

Asynchronous JavaScript And XML(异步的JavaScript和XML)
Ajax可以在不刷新页面的前提下，进行页面局部更新
Ajax是前端开发的必备技能，也是主流的开发模式

Ajax的使用流程

创建XMLHttpRequest 对象
XMLHttpRequest是Ajax的核心，Ajax使用该对象发起请求、接收响应
XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同

        var xmlhttp;
        if(window.XMLHttpRequest){
        	// IE7+，Firefox, Chrome, Opera, Safari浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }else{
        	//IE6,IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log("XMLHttpRequest:", xmlhttp);

发送Ajax请求
xmlhttp.open()用于创建请求
open()有两个参数，第一个参数为请求方法，第二个参数为请求的URL或者URI
xmlhttp.send()用于发送请求

	xmlhttp.open("GET", "/content");
	xmlhttp.send();

处理服务器响应
xmlhttp.onreadystatechange()事件用于监听Ajax的执行过程
xmlhttp.readyState属性说明XMLHttpRequest当前状态
readyState值代表的状态
readyState = 0: 请求未初始化
readyState = 1: 服务器连接已建立
readyState = 2: 请求已被接收
readyState = 3: 请求正在处理
readyState = 4: 响应文本已被接收
xmlhttp.status属性服务器响应状态码，200:成功404:未找到…

xmlhttp.onreadystatechange = function () {
			//响应已被接收且服务器处理成功时才执行
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
           		//获取响应体的文本
                var t = xmlhttp.responseText;
                console.log(t);
           		//对服务器结果进行处理
                document.getElementById("divContent").innerHTML =  document.getElementById("divContent").innerHTML + "</br>" + t;
            }
        }
// Ajax完整实现流程
document.getElementById("btnLoad").onclick = function () {
    // 1. 创建XMLHttpRequest 对象
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log("XMLHttpRequest:", xmlhttp);
    // 2. 发送Ajax请求
        xmlhttp.open("GET", "/content");
        xmlhttp.send();
    // 3. 处理服务器响应
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var t = xmlhttp.responseText;
                console.log(t);
                document.getElementById("divContent").innerHTML =  document.getElementById("divContent").innerHTML + "</br>" + t;
            }
        }
    }

JSON语法介绍

JavaScript Object Notation(JavaScript 对象表示法)
JSON是轻量级的文本数据交换格式
JSON独立于语言，具有自我描述性，更易理解
数据由键(key)/值(value)描述，由冒号分隔
大括号代表一个完整的对象，拥有多个键/值对
中括号保存数组，多个对象之间使用逗号分隔

[
  {
    "empno": 7369,
    "ename": "李宁",
    "job": "软件工程师",
    "hiredate": "2019-05-12",
    "salary": 13000,
    "dname": "研发部"
  },
  {
    "empno": 7499,
    "ename": "王乐",
    "job": "客户经理",
    "hiredate": "2017-04-22",
    "salary": 10000,
    "dname": "市场部",
    "customers": [
      {
        "cname": "李东"
      },
      {
        "cname": "刘楠"
      }
    ]
  }
]

利用JavaScript操作JSON数据

var employeeList = [
            {
                "empno": 7369,
                "ename": "李宁",
                "job": "软件工程师",
                "hiredate": "2019-05-12",
                "salary": 13000,
                "dname": "研发部"
            },
            {
                "empno": 7499,
                "ename": "王乐",
                "job": "客户经理",
                "hiredate": "2017-04-22",
                "salary": 10000,
                "dname": "市场部",
                "customers": [
                    {
                        "cname": "李东"
                    },
                    {
                        "cname": "刘楠"
                    }
                ]
            }
        ];
        for (var i = 0 ; i < employeeList.length ; i ++){
            var employee = employeeList[i];
            console.log(employee);
            document.write("<h1>");
            document.write(employee.empno);
            document.write("," + employee.ename);
            document.write("," + employee.job);
            document.write("," + employee.hiredate);
            document.write("," + employee.salary);
            document.write("," + employee.dname);
            document.write("</h1>");
            if (employee.customers != null){
                document.write("<h2>---");
                for (j = 0 ; j < employee.customers.length ; j++){
                    var customer = employee.customers[j];
                    document.write(customer.cname + ",")
                }
                document.write("</h2>");
            }
        }

Ajax + JSON开发模式

截图来自慕课网

利用Jackson序列化为JSON字符串输出

Jackson是国内外著名的Java开源JSON序列化组件
Jackson国内拥有大量使用者，拥有API简单，效率高等优点
Jackson也是众多Java框架的底层组件，掌握Jackson很重要
注：在添加了新的maven依赖后，要在project structure中把jar包添加到WEB-INF的lib中

<!-- pom.xml文件中的依赖 -->
<dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>

//实体类代码
public class News {
    private String title;
    private String date;
    private String source;
    private String content;

    public News(String title, String date, String source, String content) {
        this.title = title;
        this.date = date;
        this.source = source;
        this.content = content;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getSource() {
        return source;
    }

    public void setSource(String source) {
        this.source = source;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

// 处理对象序列化JSON字符串的Servlet
@WebServlet("/news")
public class NewsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<News> list = new ArrayList<>();
        list.add(new News("TIOBE:2018年编程语言排行趋势", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2019年编程语言排行趋势", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2020年编程语言排行趋势", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2021年编程语言排行趋势", "2018-5-1", "TIOBE", "..."));
        ObjectMapper objectMapper = new ObjectMapper();
        // 将对象数组转为JSON字符串
        String json = objectMapper.writeValueAsString(list);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().println(json);
    }
}

Ajax处理JSON数据

var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "/news");
    xmlhttp.send();
    xmlhttp.onreadystatechange = function (){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var str = xmlhttp.responseText;
            console.log(str);
            var json = JSON.parse(str);
            console.log(json);
            for (var i = 0 ; i < json.length ; i ++){
                var news = json[i];
                var container = document.getElementById("container");
                container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";
            }
        }
    }

axios组件库

安装axios
http://www.axios-js.com/docs/
发送get请求
axios.get为发送请求的方法，第一个参数为指定Servlet的URI，第二个参数为JSON格式的向服务器发送的属性的参数
.then为处理服务器返回的响应的方法，其中response.data为组件axios已经格式化好的json对象
.catch为捕获的异常错误信息

axios.get('/news', {params:{"t":"pypl"}}).then(function (response){
        console.log(response);
        var json = response.data;
        for (var i = 0 ; i < json.length ; i ++){
            var news = json[i];
            var container = document.getElementById("container");
            container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";
        }
    }).catch(function (error){
        console.log(error);
    });

发送post请求：
第一个参数为指定Servlet的URI，第二个参数为标准请求参数形式的属性参数，第三个参数为固定的请求头
如果请求参数多，也可以使用第二种方式，只有指定Servlet的URI和参数对象两个参数

axios.post("/news","t=pypl&l=abc",{headers:{"content-type": "application/x-www-form-urlencoded"}})

 const params = new URLSearchParams();
    params.append("t", "pypl");
    params.append("l", "abc");
    axios.post("/news", params)

Ajax的异步和同步

同步是在服务器未返回JSON前,JS程序一直处于阻塞等待的状态
异步是在服务器未返回JSON前,不阻塞程序,Ajax通过回调获取结果
Ajax默认为异步处理

二级联动菜单

// 实体类
public class Channel {
    private String code;
    private String name;

    public Channel() {
    }

    public Channel(String code, String name) {
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

// 处理请求的Servlet
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String level = request.getParameter("level");
        String parent = request.getParameter("parent");
        ArrayList<Channel> chlist = new ArrayList<>();
        if (level.equals("1")){
            chlist.add(new Channel("ai", "人工智能"));
            chlist.add(new Channel("web", "前端开发"));
        }else if (level.equals("2")){
            if (parent.equals("ai")){
                chlist.add(new Channel("dl", "深度学习"));
                chlist.add(new Channel("cv", "计算机视觉"));
                chlist.add(new Channel("nlp", "自然语言处理"));
            } else if (parent.equals("web")) {
                chlist.add(new Channel("html", "HTML超文本标记语言"));
                chlist.add(new Channel("css", "CSS级联样式表"));
                chlist.add(new Channel("js", "JavaScript脚本"));
            }
        }
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(chlist);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().println(json);
    }
}

<!-- 实现功能的html页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.js"></script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px">
    <option value="-1" selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px"></select>
<script>
    let lv1 = document.getElementById("lv1");
    axios.get("/channel", {params:{"level" : "1"}}).then(function (response){
        let json = response.data;
        for (let i = 0 ; i < json.length ; i ++){
            let channel= json[i];
            // Option对象的第一个参数为显示文本，第二个参数为value
            lv1.options.add(new Option(channel.name, channel.code));
            console.log(channel.code);
        }
    });
    let lv2 = document.getElementById("lv2");
    lv1.onchange = function (){
        axios.get("/channel", {params:{"level" : 2, "parent" : lv1.value}}).then(function (response){
            let json = response.data;
            // 清空原来的列表备选项
            lv2.length = 0;
            console.log(json);
            for (let i = 0 ; i < json.length ; i ++){
                let channel= json[i];
                lv2.options.add(new Option(channel.name, channel.code));
            }
        });
    };
</script>
</body>
</html>