2-42 JSON和Ajax

最新推荐文章于 2025-05-14 09:27:32 发布

Doub1eOne

最新推荐文章于 2025-05-14 09:27:32 发布

阅读量515

点赞数

文章标签： ajax json javascript

本文链接：https://blog.youkuaiyun.com/WilsonDone/article/details/127559876

版权

浏览器BOM

浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

用到Window Screen对象访问屏幕的宽度和高度【以像素为单位】

screen.availWidth 宽     screen.availHeight 高

用到Window Location对象用于获取当前网页地址（URL），并把浏览器重定向到新的页面

window.location.assign(URL地址)   跳转URL地址（加载文档方法）
				pathname 返回当前页面路径和文件名   protocol 返回web协议（http或https）
                hostname 返回web主机的域名        port 返回端口号
                href 返回当前页面URL

用到 Window history对象获取浏览器历史

window.history.back() 回退到之前的页面
window.history.forward() 向前一页

用到 window Navigator获取浏览器的应用信息

navigator.cookieEnabled  判断是否启动cookies
navigator.userAgent      用户代理
navigator.systemLanguage  用户代理语言

JavaScript定时器

定义定时器

setInterval(函数（执行操作），毫秒值) 每个固定毫秒值执行一次函数

setTimeout(函数（执行操作），毫秒值) 在固定时间之后执行一次函数调用

关闭定时器

clearInterval(定时器名称)

clearTimeout(定时器名称)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器演示</title>
    <style type="text/css">
        #dd{
            width: 200px; height: 200px;  background-color: pink;
        }
    </style>
</head>
<body>
    <div id="dd"></div>
    <button id="btn">stop</button>
    <script type="text/javascript">
        function ff() {
           var elementById = document.getElementById("dd");
           var r = Math.ceil(Math.random()*255) // 0-255
            var g = Math.ceil(Math.random()*255)
            var b = Math.ceil(Math.random()*255)
            dd.style.background="rgb("+r+","+g+","+b+")";
        }
        A = window.setInterval("ff()",1000);
        document.getElementById("btn").addEventListener("click",function () {
                clearInterval(A);
        })
    </script>


</body>
</html>

什么是JSON？

JSON(JavaScript Object Notation JS对象标签)，是一种轻量级的数据交换格式，它采用完全独立的编程语言的文本格式来存储和表示数据（就是键值对），所以可以作为一些简单数据交互时存数据和发送数据的方式，有效的提升网络传输效率。

说明：

1.JSON是一种轻量级的数据交换格式

2.轻量级指的是跟XML做比较

3.数据交换方式是指客户端和服务器之间业务数据的传递格式

JSON语法

JSON是由键值对组成，并且由花括号(大括号)保卫，每个键由引号引起来，检核值之间使用冒号进行分隔，JSON就是由多个键值对之间进行进行逗号分隔组成的

组成: [ ] 表示数组 { } 表示JSON对象 “ ”表示属性名或字符串类型值：表示属性和值之间分隔符号 , 多个键值对之间的分隔

JSON解析与创建

【Jackson】

相比json-lib框架，Jackson所依赖的jar包较少，简单易用并且性能也要相对高些。而且Jackson社区相对比较活跃，更新速度也比较快。
SpringBoot默认的json解析

【Google Gson】

Gson是目前功能最全的Json解析神器，Gson当初是为因应Google公司内部需求而由Google自行研发而来，但自从在2008年五月公开发布第一版后已被许多公司或用户应用。
Gson的应用主要为toJson与fromJson两个转换函数，无依赖，不需要例外额外的jar，能够直接跑在JDK上。而在使用这种对象转换之前需先创建好对象的类型以及其成员才能成功的将JSON字符串成功转换成相对应的对象。类里面只要有get和set方法，Gson完全可以将复杂类型的json到bean或bean到json的转换，是JSON解析的神器。
Gson在功能上面无可挑剔，但是性能上面比FastJson有所差距。

【阿里巴巴 FastJson】

Fastjson是一个Java语言编写的高性能的JSON处理器,由阿里巴巴公司开发。无依赖，不需要例外额外的jar，能够直接跑在JDK上。
FastJson采用独创的算法，将parse的速度提升到极致，超过所有json库。
FastJson在复杂类型的Bean转换Json上会出现一些问题，可能会出现引用的类型，导致Json转换出错，需要制定引用。有的版本存在高危漏洞，不建议生产使用（还是）

ps：以上是个人观点

现有对JSON的解析和生成JSON的常用三方库【FastJson、 Jackson 、gson】

解析前的准备

要解析字符串：将字符串解析成Java对象

//对象嵌套数组嵌套对象
String json1="{'id':1,'name':'JAVAEE-2002','stus':[{'id':101,'name':'刘一','age':16}]}";
//数组
String json2="['北京','天津','杭州']";

创建两个类Student 和 Grade

package com.qfedu.JSON;
//基础信息
public class Student {
    private int id;
    private String name;
    private int age;
    public Student(){}
    public Student(int id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

package com.qfedu.JSON;

import java.util.ArrayList;

public class Grade {
    private int id;
    private String name;
    private ArrayList<Student> stus;
    public Grade() {
      
    }
    public Grade(int id, String name, ArrayList<Student> stus) {
        this.id = id;
        this.name = name;
        this.stus = stus;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public ArrayList<Student> getStus() {
        return stus;
    }

    public void setStus(ArrayList<Student> stus) {
        this.stus = stus;
    }

    @Override
    public String toString() {
        return "Grade{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", stus=" + stus +
                '}';
    }
}

FastJson解析与创建

添加fastjson.jar包到工程中

FastJson是一个Java库，可以将Java对象转换为JSON格式，当前可以将JSON字符串转为Java对象

调用toJSONString方法可以将对象转换为JSON字符串

调用parseObject方法可以将JSON字符转换为对象

package com.qfedu.JSON;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;

import java.util.ArrayList;
import java.util.List;

public class FastJSonTest {
    public static void main(String[] args) {
        //parseJSON();
        //在网站上找一个在“线JSON校验 www.bejson.com” 可以验证JSON是否正确
        createJSON();
    }
    //解析--》从JSON到对象
    public static void  parseJSON(){
//对象嵌套数组嵌套对象
        String json1="{'id':1,'name':'JAVAEE-2002','stus':[{'id':101,'name':'刘一','age':16}]}";
//数组
        String json2="['北京','天津','杭州']";
        Grade grade = JSON.parseObject(json1, Grade.class);
        System.out.println(grade);
        List<String> strings = JSON.parseArray(json2, String.class);
        strings.forEach(System.out::println);
    }
    //创建 --> 对象转换为JSON字符串
    public static void createJSON(){
        ArrayList<Student> list = new ArrayList<>();
        for(int i = 1; i<3;i++){
            list.add(new Student(101+i,"大宝",20+i));
        }
        Grade grade = new Grade(10086,"中国移动",list);
        String json1 = JSON.toJSONString(grade);
        System.out.println(json1);

        String json2 = JSON.toJSONString(list);
        System.out.println(json2);
    }
}

Jackson解析与创建

需要添加 Jackson-annotartions 、core、 databind 三个jar

这个是三方jar包是使用 readValue和writeValueAsString实现

package com.qfedu.JSON;



import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class JacksonTest {
    public static void main(String[] args) throws IOException {
        //parseJSON();
        //在网站上找一个在“线JSON校验 www.bejson.com” 可以验证JSON是否正确
        createJSON();
    }
    //解析--》从JSON到对象
    public static void  parseJSON() throws IOException {
        //对象嵌套数组嵌套对象
        String json1="{\"id\":1,\"name\":\"JAVAEE-2002\",\"stus\":[{\"id\":101,\"name\":\"刘一\",\"age\":16}]}";
        //数组
        String json2="[\"北京\",\"天津\",\"杭州\"]";
        ObjectMapper objectMapper = new ObjectMapper();
        Grade grade = objectMapper.readValue(json1, Grade.class);
        System.out.println(grade);
        ArrayList<String> list  = objectMapper.readValue(json2, new TypeReference<ArrayList<String>>() {
        });
        System.out.println(list);


    }
    //创建 --> 对象转换为JSON字符串
    public static void createJSON() throws JsonProcessingException {
        ArrayList<Student> list = new ArrayList<>();
        for(int i = 1; i<3;i++){
            list.add(new Student(101+i,"大宝",20+i));
        }
        Grade grade = new Grade(10086,"中国移动",list);

        ObjectMapper objectMapper = new ObjectMapper();
        String json1 = objectMapper.writeValueAsString(grade);
        String json2 = objectMapper.writeValueAsString(list);
        System.out.println(json1);
        System.out.println(json2);

    }
}

Gson解析与创建

导入 gson.jar包核心方法toJSon 与 fromJSon 两个转换方法

package com.qfedu.JSON;

import com.alibaba.fastjson.JSON;
import com.google.gson.Gson;

import java.util.ArrayList;
import java.util.List;

public class GSonTest {
    public static void main(String[] args) {
        parseJSON();
        //在网站上找一个在“线JSON校验 www.bejson.com” 可以验证JSON是否正确
        createJSON();
    }
    //解析--》从JSON到对象
    public static void  parseJSON(){
//对象嵌套数组嵌套对象
        String json1="{'id':1,'name':'JAVAEE-2002','stus':[{'id':101,'name':'刘一','age':16}]}";
//数组
        String json2="['北京','天津','杭州']";
        Gson gson = new Gson();
        Grade grade = gson.fromJson(json1, Grade.class);
        System.out.println(grade);
        List<String> list = gson.fromJson(json2, List.class);
        System.out.println(list);
    }
    //创建 --> 对象转换为JSON字符串
    public static void createJSON(){
        ArrayList<Student> list = new ArrayList<>();
        for(int i = 1; i<3;i++){
            list.add(new Student(101+i,"大宝",20+i));
        }
        Grade grade = new Grade(10086,"中国移动",list);
        Gson gson = new Gson();
        String s = gson.toJson(grade);
        String s1 = gson.toJson(list);
        System.out.println(s);
        System.out.println(s1);
    }
}

扩展：IDEA如何快速创建JSON模型

所有使用的三方jar包，都需要使用到模型进行对JSON中数据的映射，如何快速创建模型

{
    "state": "success",
    "code": "0",
    "data": {
        "acc": 100,
        "city": "北京市",
        "dist": "通州区",
        "addr": "北京市通州区永乐店镇北京金篮子生态种植有限公司",
        "prov": "北京市",
        "lon": 116.82106018,
        "number": "13",
        "town": "永乐店镇",
        "street": "永乐大街",
        "lat": 39.69581985
    }
}

通过IDEA的自带插件市场【plugins】查找GsonFormat插件并安装重启

创建一个外层需要使用JSON类（什么类都行），通过alt+ins 触发GsonFormat插件使用，先格式化格式format，然后在ok，ok之后在一个界面中可以选择要使用属性和修改属性类型，确认无误之后ok，就会指定生成执行的属性和类

ps:如果JSON中内嵌JSON对象，GsonFormat以静态内部类的形式创建这个类，所以自行修改

如何在JS中解析和生成JSON字符串

Json的存在有两种形式

一种是：对象形式存在，我们叫JSON对象

一种是：字符串形式存在，我们叫做json字符串

ps：一般我们要操作JSON中数据时，需要JSON对象的格式，在客户端和服务器之间进行数据交换格式，使用JSON字符串

JSON.stringify() 把JSON对象化转换JSON字符串

JSON.parse() 把JSON字符串转换为JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON串在JS中</title>
    <script type="text/javascript">
        //1.json对象
        var obj = {name:"dabao",age:20,class:1}
        //需要将对象转换字符串
        var s = JSON.stringify(obj);
       // document.write(typeof(s));


        //转换为对象
        var parse = JSON.parse(s);
        document.write(parse.name)
    </script>
</head>
<body>

</body>
</html>

Ajax使用

什么是AJAX？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = Asynchronous异步 JavaScript and XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页。

说明：

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化

局部更新不会舍弃原来页面的内容[也就是说页面中有不同的位置，我们只会局部更新某个位置的信息，其他位置的信息不会更新]

AJAX工作原理

请添加图片描述

AJAX是基于现有Internet标准，并且联合使用他们：

XMLHttpRequest（对象【异步的服务器进行数据交换】）

JavaScript/DOM(信息显示与交互)

CSS（给定数据定义样式）

XML (作为数据的交换格式)

AJAX中的基本操作

创建XMLHttpRequest对象

XMLHttpRequest对象是AJAX的基础，所有现代浏览器均支持XMLHttpRequest对象【IE5和IE6需要使用ActiveXObject】

XMLHttpRequest用于在后台与服务器交换数据，所以在不重新加载整个网页的前提下，可以进行局部网页内容的更新

创建对象【新版本】

var xmlhttp = new XMLHttpRequest();

创建对象【老版本】–>IE5和6

var xmlhttp  = new ActiveXObject("Microsoft.XMLHTTP");

为了保证浏览器可以兼容AJAX，我们建议在创建对象时候这样写

var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp  = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest请求

如果需要使用XMLHttpRequest对象发送请求到服务器，需要使用两个方法一个 open() 和 send()

xmlhttp.open(请求方式,url,异步还是同步);
请求方式："GET" 或  "POST"
url： 服务器地址【服务器上的资源地址】
异步：   true 【异步】 和 false 【同步】 默认参数就是true

例如：请求一个文件
xmlhttp.open("GET","ajaxinfo.txt",true);
xmlhttp.send();

注意:send方法是有参数的 如果是"get"就什么都不写， "post" 就传递参数  数据类型是string

请求演示GET和POST

"GET"
//一个简单的get请求
xmlhttp.open("GET","/try/ajax/servlet3",true);
xmlhttp.send();
//为请求路径添加标识
xmlhttp.open("GET","/try/ajax/servlet3?number="+Math.random(),true);
xmlhttp.send();
//为请求路径添加数据传递
xmlhttp.open("GET","/try/ajax/servlet3?username=lilei&password=123",true);
xmlhttp.send();


"POST"
//一个简单post请求
xmlhttp.open("POST","/try/ajax/servlet4",true);
xmlhttp.send();

//如果需要像HTML表单那样提交POST数据，那么就需要添加HTTP头，然后在send方法规定要发送到数据
xmlhttp.open("POST","/try/ajax/servlet4",true);
xmlhttp.sendRequestHeader("Content-type","application/x-www-form-urlencoded")
xmlhttp.send("username=lilei&password=123");

onreadystateChange函数

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

当使用Async=true时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
**注意：**当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
每当readyState改变的时候，就会触发onreadystatechange事件

说明：onreadystatechange可以存储一个函数，每当readyState属性概改变的时候就会调用该函数

属性描述
readyState 存有XMLHttpRequest的状态，从0到4之间发生变化 0：请求为初始初始阿化 1：服务器来连接已经建立 2 ：请求已接收 3 请求处理中 4 请求完成却响应已经就是
status 状态码最常用监听 200

属性	描述
readyState	存有XMLHttpRequest的状态，从0到4之间发生变化 0：请求为初始初始阿化 1：服务器来连接已经建立 2 ：请求已接收 3 请求处理中 4 请求完成却响应已经就是
status	状态码最常用监听 200

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        //进行页面操作了
        document.getElementById("div").innerHTML=xmlhttp.responseText;
    }
}

ps:onreadystatechange事件中核心  readyState的状态为4并且状态码为200时，表示响应已经就绪，可以对页面继续重新加载

XMLHttpRequest响应

如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性

这两个属性 Text获取字符串形式数据 XML可以获取XML数据

responseText属性

如果来自服务器响应并非是XML，请使用responseText属性【就算是可以也可】，这个方法因为返回值是一个字符串，因为可以这样使用
document.getElementById("div").innerHTML = xmlhttp.responseText;
responseXML属性

如果来之服务器的响应是XML，【而且】需要作为xml对象进行解析，就需要使用responseXML属性
1.先获取responseXML对象 ---》    xmlhttp.responseXML
2.通过获取responseXML对象查找对节点 获取其内部值  ---> 通过responseXML对象.elementsByTageName

案例演示【Sevlet（get请求）】

package com.qfedu.controller;

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;

@WebServlet(name = "ServiceDateServlet",value="/sds")
public class ServiceDataServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {           
                String mess = "hello ajax!";
                response.getWriter().println(mess);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get请求</title>
</head>
<body>
   <button id="btn" type="button" >填充数据</button>
   <div id = "res"></div>
   <script type="text/javascript">
         var btn = document.getElementById("btn");//按钮
         var res = document.getElementById("res");//div
        btn.addEventListener("click",function () {
             var xhr;
             if(window.XMLHttpRequest){
                 xhr = new  XMLHttpRequest();//ajax对象
             }else{
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             //需要发送请求到servlet
            xhr.open("GET","sds",true);
            xhr.send();//发送
            //监听结果 【监听结果成功执行什么（function函数中实现）】
            xhr.onreadystatechange = function () {
                //如何是成功 一个 readyState=4  status =200
                if(xhr.readyState==4 && xhr.status==200){
                     res.innerHTML = xhr.responseText;
                }
                
            }
        })

   </script>

</body>
</html>

案例演示【Sevlet（post请求）】

package com.qfedu.controller;

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;

@WebServlet(name = "ServiceDateServlet",value="/sds2")
public class ServiceDataServlet2 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("name ==="+ name);
        System.out.println("age === "+ age);
        String mess = name+" "+age;
        response.getWriter().println(mess);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post请求</title>
</head>
<body>
   <button id="btn" type="button" >填充数据</button>
   <div id = "res"></div>
   <script type="text/javascript">
         var btn = document.getElementById("btn");//按钮
         var res = document.getElementById("res");//div
        btn.addEventListener("click",function () {
             var xhr;
             if(window.XMLHttpRequest){
                 xhr = new  XMLHttpRequest();//ajax对象
             }else{
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             //发送异步post请求
            xhr.open("post","sds2",true);
             //设置请求头
             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
             xhr.send("name=dabao&age=20");
            //监听结果 【监听结果成功执行什么（function函数中实现）】
            xhr.onreadystatechange = function () {
                //如何是成功 一个 readyState=4  status =200
                if(xhr.readyState==4 && xhr.status==200){
                     res.innerHTML = xhr.responseText;
                }

            }
        })

   </script>

</body>
</html>

案例演示：读取JSON数据

package com.qfedu.controller;

import com.alibaba.fastjson.JSON;
import com.qfedu.JSON.Grade;
import com.qfedu.JSON.Student;

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

@WebServlet(name = "ServiceDateServlet3",value="/sds3")
public class ServiceDataServlet3 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //设置编码格式
          request.setCharacterEncoding("UTF-8");//前端页面传递到后端是给定编码集
          response.setContentType("text/html;charset=UTF-8");//后端写好数据之后前端展示编码集
        ArrayList<Student> list= new ArrayList<>();
        for(int i = 1 ;i<3;i++){
            list.add(new Student(101+i,"大宝",20+i));
        }
        Grade grade = new Grade(10010,"中国联通",list);
        String string = JSON.toJSONString(grade);
        response.getWriter().write(string);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post请求</title>
</head>
<body>
    <div id = "myDiv"><h2>使用Ajax修改文本内容</h2></div>
   <button type="button" onclick="loadJSONDoc()" >修改内容</button>

   <script type="text/javascript">
        function loadJSONDoc() {
            //1.创建XMLHttpRequest 对象
            var xhr;
            if(window.XMLHttpRequest){
                xhr = new  XMLHttpRequest();//ajax对象
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //打开链接并发送请求
            xhr.open("GET","sds3",true);
            xhr.send()

            //监听结果
            xhr.onreadystatechange = function () {
                    if(xhr.readyState==4 && xhr.status==200){
                        //1.因为返回的是一个JSON字符串，所以可以直接展示信息
                       // document.getElementById("myDiv").innerHTML= xhr.responseText;
                        //2.解析JSON 获取某个值
                        var parseJSON = JSON.parse(xhr.responseText);
                        document.getElementById("myDiv").innerHTML= parseJSON.id+parseJSON.name;

                    }
            }
        }

   </script>

</body>
</html>

案例演示：读取XML数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XML数据读取</title>
</head>
<body>
    <div id = "myDiv"><h2>使用Ajax修改文本内容</h2></div>
   <button type="button" onclick="loadJSONDoc()" >修改内容</button>

   <script type="text/javascript">
        function loadJSONDoc() {
            //1.创建XMLHttpRequest 对象
            var xhr;
            if(window.XMLHttpRequest){
                xhr = new  XMLHttpRequest();//ajax对象
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //打开链接并发送请求
            xhr.open("GET","book.xml",true);
            xhr.send()

            //监听结果
            xhr.onreadystatechange = function () {
                    if(xhr.readyState==4 && xhr.status==200){
                        //1.因为返回的是一个XML字符串，所以可以直接展示信息
                       // document.getElementById("myDiv").innerHTML= xhr.responseText;
                        //2.获取XML文件中某一个值
                        //读取xml文件对象
                        var responseXML = xhr.responseXML;
                        //提供一个空的字符串，以便拼接内容
                        var txt = "";
                        //获取根节点下的子节点
                        var elementsByTagName = responseXML.getElementsByTagName("book");
                        for(var i = 0;i<elementsByTagName.length;i++){
                            txt = txt+responseXML.getElementsByTagName("id")[i].childNodes[0].nodeValue+"<br/>";
                        }


                        document.getElementById("myDiv").innerHTML= txt


                    }
            }
        }

   </script>

</body>
</html>

Ajax应用【模拟登陆验证】

模拟登陆验证，验证用户是否可以注册，利用Ajax技术进行动态验证。

注册界面

<%--
  Created by IntelliJ IDEA.
  User: jkmaster
  Date: 2020/10/23
  Time: 15:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
</head>
<body>
<form action="/regist" method="post">
    用户名:<input id = "us" type="text" name="username" onblur="onblurFunction()"/>
    <span id="sp"></span><br/>
    密码：<input  type="password" name="password"/><br/>
    <input type="submit" value="注册"/>
</form>
<script type="text/javascript">
    var us = document.getElementById("us");
    //获取元素【标签】对象的值 --> value方法
    //1.获取input输入框的值
    var value = us.value;
    //2.进行验证
    if(value != null && value != ""){
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
        }
        //设置请求发送【尽量对应当前请求，如果需要简便可以使用get】
        //JSP与JS无缝对接
        xmlhttp.open("GET","${pageContext.request.contextPath}/ds?value="+value);
        xmlhttp.send();
        
        //设置监听状态
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                //获取数据值 1 可以注册  2 不能注册
                var result = xmlhttp.responseText;
                var sp = document.getElementById("sp");
                if(result == "1"){
                    sp.innerHTML="恭喜，可以注册！"
                    sp.style.color="green";
                }else{
                    sp.innerText="用户名已经被注册!"
                    sp.style.color="red";
                }
            }
        }



    }

</script>
</body>
</html>

package com.qfedu.controller;

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;
//检查用户名
@WebServlet(name = "DataServlet",value="/ds")
public class DataServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1设置编码格式
          request.setCharacterEncoding("UTF-8");
          response.setContentType("text/html;charset=UTF-8");
          //2.获取value值
        String value = request.getParameter("value");
         //3定义变量返回约定的值，并验证用户名是否已经存在
        String result = null;
        if (value.equals("root") || value.equals("admin")){
            //返回2 正经已经存在了
             result = "2";
        }else{
            //返回1 证明可以注册
            result = "1";
        }
        response.getWriter().write(result);
    }
}