【无标题】Ajax And JSON

最新推荐文章于 2024-11-14 23:57:40 发布
最新推荐文章于 2024-11-14 23:57:40 发布
阅读量339 收藏
点赞数 1
文章标签： ajax json javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75790285/article/details/130112390
版权

AJAX概述

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax不是一种编程语言，而是使用JavaScript代码（浏览器通过js发送异步请求）实现前端和后端异步数据交互的技术。

Aja 请求会将前端页面局部更新，浏览器地址栏不会发生变化

Ajax在不刷新前端网页的前提下实现和服务器的数据交互，大大提升了用户的体验感。

  1. AJAX异步交互的实现流程
  1. 同步和异步

同步：等待服务器响应后继续执行内容

            

异步：无需等待服务器响应，继续执行内容，服务器响应后则显示响应内容

  1. 异步交互场景

异步交互技术:

适用于网页中显示大量的数据，同时我们只想对一小部分数据进行更新(大部分数据是不更新)的场景。

局部刷新

  1. AJAX异步交互实现流程

  1. AJAX代码实现
  1. AJAX原生代码实现
  1. 步骤

第一步：XHR创建对象

创建XMLHttpRequest 对象，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

IE7+、FF、O、Safari、Chrome

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 

 

 

 

 

 

 

 

第二步：向服务器发送请求
 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

 
方法
 		 
描述
 
 
open(method,url,async)
 		 
规定请求的类型、URL 以及是否异步处理请求。
 
    
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
 
send(string)
 		 
将请求发送到服务器。
 
    
  • string：仅用于 POST 请求
 

 

Async = true
 

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

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

Async = false
 

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 

 

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
 

请记住， async=false时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
 

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 
 
xmlhttp.send();
 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

 

onreadystatechange 事件
 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
 

每当 readyState 改变时，就会触发 onreadystatechange 事件。
 

readyState 属性存有 XMLHttpRequest 的状态信息。
 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 

 

 

 

 

第三步：获得服务器响应
 

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

 
属性
 		 
描述
 
 
responseText
 		 
获得字符串形式的响应数据。
 
 
responseXML
 		 
获得 XML 形式的响应数据。
 
 

 

 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

使用回调函数：回调函数是一种作为参数被传递到另一个函数的函数。
 

 

 

  1. 具体代码实现
 

案例：点击按钮，动态刷新返回服务端文本
 

Index.html
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<style type="text/css">
 

.view{
 

width:200px;
 

height:200px;
 

background-color:red;
 

}
 

</style>
 

 

 

<script type="text/javascript">
 

function test(){
 

     //1、创建ajax请求对象
 

    if(window.XMLHttpRequest){
 

        ajaxReq = new XMLHttpRequest();
 

    }else{
 

        ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
 

    }
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //2、封装ajax请求数据（初始化）
 

    var method = "GET";
 

    var url = "TestAjaxServlet";
 

    var async = true;
 

    ajaxReq.open(method,url,async);
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
 

   
 

     ajaxReq.onreadystatechange  = function(){
 

     //获取服务器响应结果的两个条件：
 

     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
 

         document.getElementById("myDiv").innerHTML=ajaxReq.responseText;
 

     }
 

    }
 

   
 

    //3.发送请求
 

    ajaxReq.send();
 

}
 

</script>
 

</head>
 

<body>
 

   <input type="button" value="测试"  class="test" onclick="test()"/>
 

   <div class="view" id="myDiv">
 

   </div> 
 

</body>
 

</html>
 

 

TestAjaxServlet.java
 

 

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

 

        String value = "I am  ajax";
 

        PrintWriter printWriter = response.getWriter();
 

        printWriter.write(value);
 

        printWriter.flush();
 

        printWriter.close();
 

    }
 

 

‘
 

 

 

案例：模拟同步异步实现区别
 

什么是局部刷新？
 

使用超链接跳转刷新
 

对比
 

使用ajax进行局部刷新
 

什么是同步？
 

在TestAjaxServlet.java中添加线程睡眠代码，使得ajax响应流程延长
 

 

在JS代码中修改async参数为false，使其同步响应，并在ajax操作后，添加弹框语句。
 

 

当同步响应时，必须等待ajax请求服务器，服务器响应结束后，再出现后续弹框（“111”）的内容。即会先等待3s,出现弹框（“ajax过来了”）,再出现弹框（“111”）。用户体验感较差。
 

而异步响应时，无需等待服务器响应结束，直接可出现弹框（“111”），执行后续流程。
 

 

 

  1. JQuery中的AJAX实现
 

（i）$.ajax()函数
 

语法说明：
 

 

dataType类型：String,预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：
 

  1. "xml": 返回 XML 文档，可用 jQuery 处理。
  2. "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  4. "json": 返回 JSON 数据 。
  5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  6. "text": 返回纯文本字符串
 

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 

 

案例：
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"TestAjaxServlet",
 

        method:"GET",
 

        success:function(data){
 

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

        }
 

       
 

    });
 

})
 

 

 

（ii）$get(url,params,fn,type) 
 

语法说明：
 

 
 
$(selector).get(url,data,success(response,status,xhr),dataType)
 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.get("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

 

（iii）post(url,params,fn,type) 
 

语法说明：
 

 
 
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
 

 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  type: 'POST',
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.post("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

  • Json
 

  1. Json概述
 

JSON 简介 (w3school.com.cn)
 

（1）简介：
 

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
 

JSON
 

采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python
 

等）。 这样就使得 JSON 成为理想的数据交换格式。
 

json 是一种轻量级的数据交换格式。
 

轻量级指的是跟 xml 做比较。
 

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

 

 

 

（2）格式：
 

  1. 对象和Map 转换成 {key:value , key:value,...}
  2. 数组和集合转换成`[e1,e2,e3,...]`
  3.  JSON格式可以嵌套
 

 

 

 

  1. Json在前后端的格式转换
 

  1. Json在javascript中的使用
 

定义：
 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

var students=[
 

    {
 

         stuId:"1001",     
 

         stuName:"小丽",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1002",     
 

         stuName:"小双",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1003",     
 

         stuName:"小军",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    }
 

]
 

 

 

访问：
 

//访问json==alert()弹框  console.log控制台打印日志
 

alert("student1的数据类型是："+typeof(student1));
 

alert("students的数据类型是："+typeof(students));
 

console.log("student1.stuId:"+student1.stuId);
 

console.log("student1.stuName:"+student1.stuName);
 

console.log("student1.stuAge:"+student1.stuAge);
 

console.log("student1.score:"+student1.score[0]);
 

console.log("student1.score:"+student1.score[0].subject);
 

console.log("student1.score:"+student1.score[1].score);
 

console.log("students:"+students[1].stuId);
 

 

前端JS对象与JSON格式转换：
 

json 的存在有两种形式。 
 

一种是：对象的形式存在，我们叫它 json 对象。 
 

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

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 
 

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 
 

  1. JSON.stringify() 
 

把 json 对象转换成为 json 字符串 
 

  1. JSON.parse() 或 eval("("+jsonStr+")");
 

把 json 字符串转换成为 json 对象
 

 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(obj);
 

//将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

var obj3 = JSON.parse(jsonStr)；
 

说明：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
 

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
 

json字符串转化对象时加圆括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象，而不是作为语句(statement)来执行。
 

 

实例：
 

 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

//设置对象性别属性并赋值
 

student1.sex="男";
 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(student1);
 

//string
 

console.log(typeof(jsonStr));
 

console.log(jsonStr);
 

//将将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

//object
 

console.log(typeof(obj2));
 

console.log(obj2);
 

var obj3= JSON.parse(jsonStr);
 

//object
 

console.log(typeof(obj3));
 

console.log(obj3);
 

 

 

 

  1. Json在Java后端中的使用
 

Gson、FastJson、Jackson都是第三方序列化/反序列化 JSON格式的 Java库。JSON 是一种文本形式的数据交换格式，它比XML更轻量、比二进制容易阅读和编写，调式也更加方便。
 

FastJson慎用，有安全漏洞。
 

开源的Jackson：SpringBoot默认使用Jackson作为JSON数据格式处理的类库Google的Gson：Gson是Google为满足内部需求开发的JSON数据处理类库，其核心结构非常简单，toJson与fromJson两个转换函数实现对象与JSON数据的转换。
 

我们在本次学习中使用Gson。
 

  1. Json字符串与JavaBean对象的互相转化
 

 

  • 导入GSON.Jar
 

 

  • 掌握Gson主要方法
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为JavaBean对象
 

com.google.gson.Gson.fromJson(String json, Class<Student> classOfT)
 

  • 案例
 

public class JsonTest {
 

    public static void main(String[] args) {
 

        Student student = new Student("1001", "小花", 29);
 

        // 创建 Gson 对象实例
 

        Gson gson = new Gson();
 

        // toJson 方法可以把 java 对象转换成为 json 字符串
 

        String stuJsonString = gson.toJson(student);
 

        System.out.println(stuJsonString);
 

        // fromJson 把 json 字符串转换回 Java 对象
 

        // 第一个参数是 json 字符串
 

        // 第二个参数是转换回去的 Java 对象类型
 

        Student student1 = gson.fromJson(stuJsonString, Student.class);
 

        System.out.println(student1);
 

    }
 

}
 

 

  1. JSON字符串与List、Map等集合框架互相转化：
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为List或Map对象
 

com.google.gson.Gson.fromJson(String json, Type typeOfT)
 

我们需要继承TypeToken类，调用其getType()方法
 

 

第一种方式：
 

新建类StudentListType.java,继承TypeToken类（使用泛型，确定类型）
 

public class StudentListType extends TypeToken<List<Student>> {
 

 

}
 

List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

 

第二种方式：使用匿名内部类：
 

List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

 

详细代码：
 

// List对象和json字符串的转化
 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println(studentsJsonStr);
 

        List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

        System.out.println(list2.toString());
 

 

        List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

        System.out.println(list3.toString());
 

        // Map对象和json字符串的转化
 

        Map<Integer, Student> map = new HashMap<>();
 

        map.put(1, new Student("1002", "小丽", 29));
 

        map.put(2, new Student("1003", "小文", 29));
 

        String mapStr = gson.toJson(map);
 

        System.out.println(mapStr);
 

        Map<Integer, Student> map2 = gson.fromJson(mapStr, new TypeToken<Map<Integer, Student>>() {
 

        }.getType());
 

        System.out.println(map2.get(1));
 

 

  1. 实例
 

 

前端：
 

 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<script  src="https://code.jquery.com/jquery-3.6.1.min.js" ></script> 
 

 

<script type="text/javascript">
 

$(function(){
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"JsonServlet",
 

        method:"GET",
 

        data:{
 

            key1:"猜猜我是谁",
 

            key2:"皮卡丘"
 

        },
 

        success:function(data){
 

            console.log(typeof(data));
 

            console.log(data);
 

        console.log(data[0].stuId+":"+data[0].stuName);
 

        },
 

        dataType:"json"
 

    });
 

})
 

});
 

</script>
 

</head>
 

<body>
 

 <input type="button" value="测试"  id="test"  />
 

</body>
 

</html>
 

 

后端：
 

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

        request.setCharacterEncoding("utf-8");
 

        String key1 = request.getParameter("key1");
 

        String key2 = request.getParameter("key2");
 

        System.out.println(key1 + ":" + key2);
 

 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

        Gson gson = new Gson();
 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println("要传给前端的json字符串：" + studentsJsonStr);
 

        // 将json格式字符串响应给ajax请求
 

        response.setContentType("application/json;charset=utf-8");
 

        response.setCharacterEncoding("utf-8");
 

        PrintWriter out = response.getWriter();
 

        out.println(studentsJsonStr);
 

        out.flush();
 

        out.close();
 

 

    }
 

服务器控制台输出：
 

猜猜我是谁:皮卡丘
 

要传给前端的json字符串：[{"stuId":"1002","stuName":"小丽","age":29},{"stuId":"1003","stuName":"小文","age":29},{"stuId":"1004","stuName":"小花","age":29}]
 

浏览器控制台输出：
 

 

AJAX概述
 

 

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
 

ajax不是一种编程语言，而是使用JavaScript代码（浏览器通过js发送异步请求）实现前端和后端异步数据交互的技术。
 

Ajax 请求会将前端页面局部更新，浏览器地址栏不会发生变化
 

Ajax在不刷新前端网页的前提下实现和服务器的数据交互，大大提升了用户的体验感。
 

 

 

  1. AJAX异步交互的实现流程
 

  1. 同步和异步
 

 

同步：等待服务器响应后继续执行内容
 

            
 

异步：无需等待服务器响应，继续执行内容，服务器响应后则显示响应内容
 

 

  1. 异步交互场景
 

异步交互技术:
 

 

适用于网页中显示大量的数据，同时我们只想对一小部分数据进行更新(大部分数据是不更新)的场景。
 

局部刷新
 

  1. AJAX异步交互实现流程
 

 

  1. AJAX代码实现
 

  1. AJAX原生代码实现
 

  1. 步骤
 

第一步：XHR创建对象
 

创建XMLHttpRequest 对象，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 

IE7+、FF、O、Safari、Chrome
 

 
 
variable=new XMLHttpRequest();
 

 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
 

 

 
 
variable=new ActiveXObject("Microsoft.XMLHTTP");
 

 

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
 

 
 
var xmlhttp;
 
 
if (window.XMLHttpRequest)
 
 
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 
 
  xmlhttp=new XMLHttpRequest();
 
 
  }
 
 
else
 
 
  {// code for IE6, IE5
 
 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 
  }
 
 
 

 

 

 

 

 

 

 

第二步：向服务器发送请求
 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

 
方法
 		 
描述
 
 
open(method,url,async)
 		 
规定请求的类型、URL 以及是否异步处理请求。
 
    
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
 
send(string)
 		 
将请求发送到服务器。
 
    
  • string：仅用于 POST 请求
 

 

Async = true
 

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

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

Async = false
 

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 

 

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
 

请记住， async=false时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
 

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 
 
xmlhttp.send();
 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

 

onreadystatechange 事件
 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
 

每当 readyState 改变时，就会触发 onreadystatechange 事件。
 

readyState 属性存有 XMLHttpRequest 的状态信息。
 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 

 

 

 

 

第三步：获得服务器响应
 

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

 
属性
 		 
描述
 
 
responseText
 		 
获得字符串形式的响应数据。
 
 
responseXML
 		 
获得 XML 形式的响应数据。
 
 

 

 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

使用回调函数：回调函数是一种作为参数被传递到另一个函数的函数。
 

 

 

  1. 具体代码实现
 

案例：点击按钮，动态刷新返回服务端文本
 

Index.html
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<style type="text/css">
 

.view{
 

width:200px;
 

height:200px;
 

background-color:red;
 

}
 

</style>
 

 

 

<script type="text/javascript">
 

function test(){
 

     //1、创建ajax请求对象
 

    if(window.XMLHttpRequest){
 

        ajaxReq = new XMLHttpRequest();
 

    }else{
 

        ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
 

    }
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //2、封装ajax请求数据（初始化）
 

    var method = "GET";
 

    var url = "TestAjaxServlet";
 

    var async = true;
 

    ajaxReq.open(method,url,async);
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
 

   
 

     ajaxReq.onreadystatechange  = function(){
 

     //获取服务器响应结果的两个条件：
 

     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
 

         document.getElementById("myDiv").innerHTML=ajaxReq.responseText;
 

     }
 

    }
 

   
 

    //3.发送请求
 

    ajaxReq.send();
 

}
 

</script>
 

</head>
 

<body>
 

   <input type="button" value="测试"  class="test" onclick="test()"/>
 

   <div class="view" id="myDiv">
 

   </div> 
 

</body>
 

</html>
 

 

TestAjaxServlet.java
 

 

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

 

        String value = "I am  ajax";
 

        PrintWriter printWriter = response.getWriter();
 

        printWriter.write(value);
 

        printWriter.flush();
 

        printWriter.close();
 

    }
 

 

‘
 

 

 

案例：模拟同步异步实现区别
 

什么是局部刷新？
 

使用超链接跳转刷新
 

对比
 

使用ajax进行局部刷新
 

什么是同步？
 

在TestAjaxServlet.java中添加线程睡眠代码，使得ajax响应流程延长
 

 

在JS代码中修改async参数为false，使其同步响应，并在ajax操作后，添加弹框语句。
 

 

当同步响应时，必须等待ajax请求服务器，服务器响应结束后，再出现后续弹框（“111”）的内容。即会先等待3s,出现弹框（“ajax过来了”）,再出现弹框（“111”）。用户体验感较差。
 

而异步响应时，无需等待服务器响应结束，直接可出现弹框（“111”），执行后续流程。
 

 

 

  1. JQuery中的AJAX实现
 

（i）$.ajax()函数
 

语法说明：
 

 

dataType类型：String,预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：
 

  1. "xml": 返回 XML 文档，可用 jQuery 处理。
  2. "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  4. "json": 返回 JSON 数据 。
  5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  6. "text": 返回纯文本字符串
 

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 

 

案例：
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"TestAjaxServlet",
 

        method:"GET",
 

        success:function(data){
 

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

        }
 

       
 

    });
 

})
 

 

 

（ii）$get(url,params,fn,type) 
 

语法说明：
 

 
 
$(selector).get(url,data,success(response,status,xhr),dataType)
 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.get("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

 

（iii）post(url,params,fn,type) 
 

语法说明：
 

 
 
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
 

 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  type: 'POST',
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.post("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

  • Json
 

  1. Json概述
 

JSON 简介 (w3school.com.cn)
 

（1）简介：
 

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
 

JSON
 

采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python
 

等）。 这样就使得 JSON 成为理想的数据交换格式。
 

json 是一种轻量级的数据交换格式。
 

轻量级指的是跟 xml 做比较。
 

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

 

 

 

（2）格式：
 

  1. 对象和Map 转换成 {key:value , key:value,...}
  2. 数组和集合转换成`[e1,e2,e3,...]`
  3.  JSON格式可以嵌套
 

 

 

 

  1. Json在前后端的格式转换
 

  1. Json在javascript中的使用
 

定义：
 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

var students=[
 

    {
 

         stuId:"1001",     
 

         stuName:"小丽",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1002",     
 

         stuName:"小双",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1003",     
 

         stuName:"小军",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    }
 

]
 

 

 

访问：
 

//访问json==alert()弹框  console.log控制台打印日志
 

alert("student1的数据类型是："+typeof(student1));
 

alert("students的数据类型是："+typeof(students));
 

console.log("student1.stuId:"+student1.stuId);
 

console.log("student1.stuName:"+student1.stuName);
 

console.log("student1.stuAge:"+student1.stuAge);
 

console.log("student1.score:"+student1.score[0]);
 

console.log("student1.score:"+student1.score[0].subject);
 

console.log("student1.score:"+student1.score[1].score);
 

console.log("students:"+students[1].stuId);
 

 

前端JS对象与JSON格式转换：
 

json 的存在有两种形式。 
 

一种是：对象的形式存在，我们叫它 json 对象。 
 

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

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 
 

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 
 

  1. JSON.stringify() 
 

把 json 对象转换成为 json 字符串 
 

  1. JSON.parse() 或 eval("("+jsonStr+")");
 

把 json 字符串转换成为 json 对象
 

 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(obj);
 

//将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

var obj3 = JSON.parse(jsonStr)；
 

说明：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
 

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
 

json字符串转化对象时加圆括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象，而不是作为语句(statement)来执行。
 

 

实例：
 

 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

//设置对象性别属性并赋值
 

student1.sex="男";
 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(student1);
 

//string
 

console.log(typeof(jsonStr));
 

console.log(jsonStr);
 

//将将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

//object
 

console.log(typeof(obj2));
 

console.log(obj2);
 

var obj3= JSON.parse(jsonStr);
 

//object
 

console.log(typeof(obj3));
 

console.log(obj3);
 

 

 

执行效果：
 

 

  1. Json在Java后端中的使用
 

Gson、FastJson、Jackson都是第三方序列化/反序列化 JSON格式的 Java库。JSON 是一种文本形式的数据交换格式，它比XML更轻量、比二进制容易阅读和编写，调式也更加方便。
 

FastJson慎用，有安全漏洞。
 

开源的Jackson：SpringBoot默认使用Jackson作为JSON数据格式处理的类库Google的Gson：Gson是Google为满足内部需求开发的JSON数据处理类库，其核心结构非常简单，toJson与fromJson两个转换函数实现对象与JSON数据的转换。
 

我们在本次学习中使用Gson。
 

  1. Json字符串与JavaBean对象的互相转化
 

 

  • 导入GSON.Jar
 

 

  • 掌握Gson主要方法
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为JavaBean对象
 

com.google.gson.Gson.fromJson(String json, Class<Student> classOfT)
 

  • 案例
 

public class JsonTest {
 

    public static void main(String[] args) {
 

        Student student = new Student("1001", "小花", 29);
 

        // 创建 Gson 对象实例
 

        Gson gson = new Gson();
 

        // toJson 方法可以把 java 对象转换成为 json 字符串
 

        String stuJsonString = gson.toJson(student);
 

        System.out.println(stuJsonString);
 

        // fromJson 把 json 字符串转换回 Java 对象
 

        // 第一个参数是 json 字符串
 

        // 第二个参数是转换回去的 Java 对象类型
 

        Student student1 = gson.fromJson(stuJsonString, Student.class);
 

        System.out.println(student1);
 

    }
 

}
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. JSON字符串与List、Map等集合框架互相转化：
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为List或Map对象
 

com.google.gson.Gson.fromJson(String json, Type typeOfT)
 

我们需要继承TypeToken类，调用其getType()方法
 

 

第一种方式：
 

新建类StudentListType.java,继承TypeToken类（使用泛型，确定类型）
 

public class StudentListType extends TypeToken<List<Student>> {
 

 

}
 

List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

 

第二种方式：使用匿名内部类：
 

List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

 

详细代码：
 

// List对象和json字符串的转化
 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println(studentsJsonStr);
 

        List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

        System.out.println(list2.toString());
 

 

        List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

        System.out.println(list3.toString());
 

        // Map对象和json字符串的转化
 

        Map<Integer, Student> map = new HashMap<>();
 

        map.put(1, new Student("1002", "小丽", 29));
 

        map.put(2, new Student("1003", "小文", 29));
 

        String mapStr = gson.toJson(map);
 

        System.out.println(mapStr);
 

        Map<Integer, Student> map2 = gson.fromJson(mapStr, new TypeToken<Map<Integer, Student>>() {
 

        }.getType());
 

        System.out.println(map2.get(1));
 

 

  1. 实例
 

 

前端：
 

 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<script  src="https://code.jquery.com/jquery-3.6.1.min.js" ></script> 
 

 

<script type="text/javascript">
 

$(function(){
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"JsonServlet",
 

        method:"GET",
 

        data:{
 

            key1:"猜猜我是谁",
 

            key2:"皮卡丘"
 

        },
 

        success:function(data){
 

            console.log(typeof(data));
 

            console.log(data);
 

        console.log(data[0].stuId+":"+data[0].stuName);
 

        },
 

        dataType:"json"
 

    });
 

})
 

});
 

</script>
 

</head>
 

<body>
 

 <input type="button" value="测试"  id="test"  />
 

</body>
 

</html>
 

 

后端：
 

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

        request.setCharacterEncoding("utf-8");
 

        String key1 = request.getParameter("key1");
 

        String key2 = request.getParameter("key2");
 

        System.out.println(key1 + ":" + key2);
 

 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

        Gson gson = new Gson();
 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println("要传给前端的json字符串：" + studentsJsonStr);
 

        // 将json格式字符串响应给ajax请求
 

        response.setContentType("application/json;charset=utf-8");
 

        response.setCharacterEncoding("utf-8");
 

        PrintWriter out = response.getWriter();
 

        out.println(studentsJsonStr);
 

        out.flush();
 

        out.close();
 

 

    }
 

服务器控制台输出：
 

猜猜我是谁:皮卡丘
 

要传给前端的json字符串：[{"stuId":"1002","stuName":"小丽","age":29},{"stuId":"1003","stuName":"小文","age":29},{"stuId":"1004","stuName":"小花","age":29}]
 

浏览器控制台输出：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

AJAX概述
 

 

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
 

ajax不是一种编程语言，而是使用JavaScript代码（浏览器通过js发送异步请求）实现前端和后端异步数据交互的技术。
 

Ajax 请求会将前端页面局部更新，浏览器地址栏不会发生变化
 

Ajax在不刷新前端网页的前提下实现和服务器的数据交互，大大提升了用户的体验感。
 

 

 

  1. AJAX异步交互的实现流程
 

  1. 同步和异步
 

 

同步：等待服务器响应后继续执行内容
 

            
 

异步：无需等待服务器响应，继续执行内容，服务器响应后则显示响应内容
 

 

  1. 异步交互场景
 

异步交互技术:
 

 

适用于网页中显示大量的数据，同时我们只想对一小部分数据进行更新(大部分数据是不更新)的场景。
 

局部刷新
 

  1. AJAX异步交互实现流程
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. AJAX代码实现
 

  1. AJAX原生代码实现
 

  1. 步骤
 

第一步：XHR创建对象
 

创建XMLHttpRequest 对象，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 

IE7+、FF、O、Safari、Chrome
 

 
 
variable=new XMLHttpRequest();
 

 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
 

 

 
 
variable=new ActiveXObject("Microsoft.XMLHTTP");
 

 

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
 

 
 
var xmlhttp;
 
 
if (window.XMLHttpRequest)
 
 
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 
 
  xmlhttp=new XMLHttpRequest();
 
 
  }
 
 
else
 
 
  {// code for IE6, IE5
 
 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 
  }
 
 
 

 

 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

 

第二步：向服务器发送请求
 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

 
方法
 		 
描述
 
 
open(method,url,async)
 		 
规定请求的类型、URL 以及是否异步处理请求。
 
    
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
 
send(string)
 		 
将请求发送到服务器。
 
    
  • string：仅用于 POST 请求
 

 

Async = true
 

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

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

Async = false
 

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 

 

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
 

请记住， async=false时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
 

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 
 
xmlhttp.send();
 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

 

onreadystatechange 事件
 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
 

每当 readyState 改变时，就会触发 onreadystatechange 事件。
 

readyState 属性存有 XMLHttpRequest 的状态信息。
 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 

 

 

 

 

第三步：获得服务器响应
 

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

 
属性
 		 
描述
 
 
responseText
 		 
获得字符串形式的响应数据。
 
 
responseXML
 		 
获得 XML 形式的响应数据。
 
 

 

 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

使用回调函数：回调函数是一种作为参数被传递到另一个函数的函数。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

  1. 具体代码实现
 

案例：点击按钮，动态刷新返回服务端文本
 

Index.html
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<style type="text/css">
 

.view{
 

width:200px;
 

height:200px;
 

background-color:red;
 

}
 

</style>
 

 

 

<script type="text/javascript">
 

function test(){
 

     //1、创建ajax请求对象
 

    if(window.XMLHttpRequest){
 

        ajaxReq = new XMLHttpRequest();
 

    }else{
 

        ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
 

    }
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //2、封装ajax请求数据（初始化）
 

    var method = "GET";
 

    var url = "TestAjaxServlet";
 

    var async = true;
 

    ajaxReq.open(method,url,async);
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
 

   
 

     ajaxReq.onreadystatechange  = function(){
 

     //获取服务器响应结果的两个条件：
 

     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
 

         document.getElementById("myDiv").innerHTML=ajaxReq.responseText;
 

     }
 

    }
 

   
 

    //3.发送请求
 

    ajaxReq.send();
 

}
 

</script>
 

</head>
 

<body>
 

   <input type="button" value="测试"  class="test" onclick="test()"/>
 

   <div class="view" id="myDiv">
 

   </div> 
 

</body>
 

</html>
 

 

TestAjaxServlet.java
 

 

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

 

        String value = "I am  ajax";
 

        PrintWriter printWriter = response.getWriter();
 

        printWriter.write(value);
 

        printWriter.flush();
 

        printWriter.close();
 

    }
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

‘
 

 

 

案例：模拟同步异步实现区别
 

什么是局部刷新？
 

使用超链接跳转刷新
 

对比
 

使用ajax进行局部刷新
 

什么是同步？
 

在TestAjaxServlet.java中添加线程睡眠代码，使得ajax响应流程延长
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

在JS代码中修改async参数为false，使其同步响应，并在ajax操作后，添加弹框语句。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

当同步响应时，必须等待ajax请求服务器，服务器响应结束后，再出现后续弹框（“111”）的内容。即会先等待3s,出现弹框（“ajax过来了”）,再出现弹框（“111”）。用户体验感较差。
 

而异步响应时，无需等待服务器响应结束，直接可出现弹框（“111”），执行后续流程。
 

 

 

  1. JQuery中的AJAX实现
 

（i）$.ajax()函数
 

语法说明：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

dataType类型：String,预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：
 

  1. "xml": 返回 XML 文档，可用 jQuery 处理。
  2. "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  4. "json": 返回 JSON 数据 。
  5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  6. "text": 返回纯文本字符串
 

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 

 

案例：
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"TestAjaxServlet",
 

        method:"GET",
 

        success:function(data){
 

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

        }
 

       
 

    });
 

})
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（ii）$get(url,params,fn,type) 
 

语法说明：
 

 
 
$(selector).get(url,data,success(response,status,xhr),dataType)
 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.get("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

 

（iii）post(url,params,fn,type) 
 

语法说明：
 

 
 
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
 

 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  type: 'POST',
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.post("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

  • Json
 

  1. Json概述
 

JSON 简介 (w3school.com.cn)
 

（1）简介：
 

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
 

JSON
 

采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python
 

等）。 这样就使得 JSON 成为理想的数据交换格式。
 

json 是一种轻量级的数据交换格式。
 

轻量级指的是跟 xml 做比较。
 

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

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（2）格式：
 

  1. 对象和Map 转换成 {key:value , key:value,...}
  2. 数组和集合转换成`[e1,e2,e3,...]`
  3.  JSON格式可以嵌套
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

  1. Json在前后端的格式转换
 

  1. Json在javascript中的使用
 

定义：
 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

var students=[
 

    {
 

         stuId:"1001",     
 

         stuName:"小丽",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1002",     
 

         stuName:"小双",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1003",     
 

         stuName:"小军",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    }
 

]
 

 

 

访问：
 

//访问json==alert()弹框  console.log控制台打印日志
 

alert("student1的数据类型是："+typeof(student1));
 

alert("students的数据类型是："+typeof(students));
 

console.log("student1.stuId:"+student1.stuId);
 

console.log("student1.stuName:"+student1.stuName);
 

console.log("student1.stuAge:"+student1.stuAge);
 

console.log("student1.score:"+student1.score[0]);
 

console.log("student1.score:"+student1.score[0].subject);
 

console.log("student1.score:"+student1.score[1].score);
 

console.log("students:"+students[1].stuId);
 

 

前端JS对象与JSON格式转换：
 

json 的存在有两种形式。 
 

一种是：对象的形式存在，我们叫它 json 对象。 
 

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

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 
 

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 
 

  1. JSON.stringify() 
 

把 json 对象转换成为 json 字符串 
 

  1. JSON.parse() 或 eval("("+jsonStr+")");
 

把 json 字符串转换成为 json 对象
 

 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(obj);
 

//将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

var obj3 = JSON.parse(jsonStr)；
 

说明：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
 

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
 

json字符串转化对象时加圆括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象，而不是作为语句(statement)来执行。
 

 

实例：
 

 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

//设置对象性别属性并赋值
 

student1.sex="男";
 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(student1);
 

//string
 

console.log(typeof(jsonStr));
 

console.log(jsonStr);
 

//将将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

//object
 

console.log(typeof(obj2));
 

console.log(obj2);
 

var obj3= JSON.parse(jsonStr);
 

//object
 

console.log(typeof(obj3));
 

console.log(obj3);
 

 

 

执行效果：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. Json在Java后端中的使用
 

Gson、FastJson、Jackson都是第三方序列化/反序列化 JSON格式的 Java库。JSON 是一种文本形式的数据交换格式，它比XML更轻量、比二进制容易阅读和编写，调式也更加方便。
 

FastJson慎用，有安全漏洞。
 

开源的Jackson：SpringBoot默认使用Jackson作为JSON数据格式处理的类库Google的Gson：Gson是Google为满足内部需求开发的JSON数据处理类库，其核心结构非常简单，toJson与fromJson两个转换函数实现对象与JSON数据的转换。
 

我们在本次学习中使用Gson。
 

  1. Json字符串与JavaBean对象的互相转化
 

 

  • 导入GSON.Jar
 

 

  • 掌握Gson主要方法
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为JavaBean对象
 

com.google.gson.Gson.fromJson(String json, Class<Student> classOfT)
 

  • 案例
 

public class JsonTest {
 

    public static void main(String[] args) {
 

        Student student = new Student("1001", "小花", 29);
 

        // 创建 Gson 对象实例
 

        Gson gson = new Gson();
 

        // toJson 方法可以把 java 对象转换成为 json 字符串
 

        String stuJsonString = gson.toJson(student);
 

        System.out.println(stuJsonString);
 

        // fromJson 把 json 字符串转换回 Java 对象
 

        // 第一个参数是 json 字符串
 

        // 第二个参数是转换回去的 Java 对象类型
 

        Student student1 = gson.fromJson(stuJsonString, Student.class);
 

        System.out.println(student1);
 

    }
 

}
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. JSON字符串与List、Map等集合框架互相转化：
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为List或Map对象
 

com.google.gson.Gson.fromJson(String json, Type typeOfT)
 

我们需要继承TypeToken类，调用其getType()方法
 

 

第一种方式：
 

新建类StudentListType.java,继承TypeToken类（使用泛型，确定类型）
 

public class StudentListType extends TypeToken<List<Student>> {
 

 

}
 

List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

 

第二种方式：使用匿名内部类：
 

List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

 

详细代码：
 

// List对象和json字符串的转化
 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println(studentsJsonStr);
 

        List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

        System.out.println(list2.toString());
 

 

        List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

        System.out.println(list3.toString());
 

        // Map对象和json字符串的转化
 

        Map<Integer, Student> map = new HashMap<>();
 

        map.put(1, new Student("1002", "小丽", 29));
 

        map.put(2, new Student("1003", "小文", 29));
 

        String mapStr = gson.toJson(map);
 

        System.out.println(mapStr);
 

        Map<Integer, Student> map2 = gson.fromJson(mapStr, new TypeToken<Map<Integer, Student>>() {
 

        }.getType());
 

        System.out.println(map2.get(1));
 

 

  1. 实例
 

 

前端：
 

 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<script  src="https://code.jquery.com/jquery-3.6.1.min.js" ></script> 
 

 

<script type="text/javascript">
 

$(function(){
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"JsonServlet",
 

        method:"GET",
 

        data:{
 

            key1:"猜猜我是谁",
 

            key2:"皮卡丘"
 

        },
 

        success:function(data){
 

            console.log(typeof(data));
 

            console.log(data);
 

        console.log(data[0].stuId+":"+data[0].stuName);
 

        },
 

        dataType:"json"
 

    });
 

})
 

});
 

</script>
 

</head>
 

<body>
 

 <input type="button" value="测试"  id="test"  />
 

</body>
 

</html>
 

 

后端：
 

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

        request.setCharacterEncoding("utf-8");
 

        String key1 = request.getParameter("key1");
 

        String key2 = request.getParameter("key2");
 

        System.out.println(key1 + ":" + key2);
 

 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

        Gson gson = new Gson();
 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println("要传给前端的json字符串：" + studentsJsonStr);
 

        // 将json格式字符串响应给ajax请求
 

        response.setContentType("application/json;charset=utf-8");
 

        response.setCharacterEncoding("utf-8");
 

        PrintWriter out = response.getWriter();
 

        out.println(studentsJsonStr);
 

        out.flush();
 

        out.close();
 

 

    }
 

服务器控制台输出：
 

猜猜我是谁:皮卡丘
 

要传给前端的json字符串：[{"stuId":"1002","stuName":"小丽","age":29},{"stuId":"1003","stuName":"小文","age":29},{"stuId":"1004","stuName":"小花","age":29}]
 

浏览器控制台输出：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

AJAX概述
 

 

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
 

ajax不是一种编程语言，而是使用JavaScript代码（浏览器通过js发送异步请求）实现前端和后端异步数据交互的技术。
 

Ajax 请求会将前端页面局部更新，浏览器地址栏不会发生变化
 

Ajax在不刷新前端网页的前提下实现和服务器的数据交互，大大提升了用户的体验感。
 

 

 

  1. AJAX异步交互的实现流程
 

  1. 同步和异步
 

 

同步：等待服务器响应后继续执行内容
 

            
 

异步：无需等待服务器响应，继续执行内容，服务器响应后则显示响应内容
 

 

  1. 异步交互场景
 

异步交互技术:
 

 

适用于网页中显示大量的数据，同时我们只想对一小部分数据进行更新(大部分数据是不更新)的场景。
 

局部刷新
 

  1. AJAX异步交互实现流程
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. AJAX代码实现
 

  1. AJAX原生代码实现
 

  1. 步骤
 

第一步：XHR创建对象
 

创建XMLHttpRequest 对象，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 

IE7+、FF、O、Safari、Chrome
 

 
 
variable=new XMLHttpRequest();
 

 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
 

 

 
 
variable=new ActiveXObject("Microsoft.XMLHTTP");
 

 

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
 

 
 
var xmlhttp;
 
 
if (window.XMLHttpRequest)
 
 
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 
 
  xmlhttp=new XMLHttpRequest();
 
 
  }
 
 
else
 
 
  {// code for IE6, IE5
 
 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 
  }
 
 
 

 

 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

 

第二步：向服务器发送请求
 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

 
方法
 		 
描述
 
 
open(method,url,async)
 		 
规定请求的类型、URL 以及是否异步处理请求。
 
    
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
 
send(string)
 		 
将请求发送到服务器。
 
    
  • string：仅用于 POST 请求
 

 

Async = true
 

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

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

Async = false
 

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 

 

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
 

请记住， async=false时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
 

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 
 
xmlhttp.send();
 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

 

onreadystatechange 事件
 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
 

每当 readyState 改变时，就会触发 onreadystatechange 事件。
 

readyState 属性存有 XMLHttpRequest 的状态信息。
 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 

 

 

 

 

第三步：获得服务器响应
 

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

 
属性
 		 
描述
 
 
responseText
 		 
获得字符串形式的响应数据。
 
 
responseXML
 		 
获得 XML 形式的响应数据。
 
 

 

 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

使用回调函数：回调函数是一种作为参数被传递到另一个函数的函数。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

  1. 具体代码实现
 

案例：点击按钮，动态刷新返回服务端文本
 

Index.html
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<style type="text/css">
 

.view{
 

width:200px;
 

height:200px;
 

background-color:red;
 

}
 

</style>
 

 

 

<script type="text/javascript">
 

function test(){
 

     //1、创建ajax请求对象
 

    if(window.XMLHttpRequest){
 

        ajaxReq = new XMLHttpRequest();
 

    }else{
 

        ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
 

    }
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //2、封装ajax请求数据（初始化）
 

    var method = "GET";
 

    var url = "TestAjaxServlet";
 

    var async = true;
 

    ajaxReq.open(method,url,async);
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
 

   
 

     ajaxReq.onreadystatechange  = function(){
 

     //获取服务器响应结果的两个条件：
 

     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
 

         document.getElementById("myDiv").innerHTML=ajaxReq.responseText;
 

     }
 

    }
 

   
 

    //3.发送请求
 

    ajaxReq.send();
 

}
 

</script>
 

</head>
 

<body>
 

   <input type="button" value="测试"  class="test" onclick="test()"/>
 

   <div class="view" id="myDiv">
 

   </div> 
 

</body>
 

</html>
 

 

TestAjaxServlet.java
 

 

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

 

        String value = "I am  ajax";
 

        PrintWriter printWriter = response.getWriter();
 

        printWriter.write(value);
 

        printWriter.flush();
 

        printWriter.close();
 

    }
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

‘
 

 

 

案例：模拟同步异步实现区别
 

什么是局部刷新？
 

使用超链接跳转刷新
 

对比
 

使用ajax进行局部刷新
 

什么是同步？
 

在TestAjaxServlet.java中添加线程睡眠代码，使得ajax响应流程延长
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

在JS代码中修改async参数为false，使其同步响应，并在ajax操作后，添加弹框语句。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

当同步响应时，必须等待ajax请求服务器，服务器响应结束后，再出现后续弹框（“111”）的内容。即会先等待3s,出现弹框（“ajax过来了”）,再出现弹框（“111”）。用户体验感较差。
 

而异步响应时，无需等待服务器响应结束，直接可出现弹框（“111”），执行后续流程。
 

 

 

  1. JQuery中的AJAX实现
 

（i）$.ajax()函数
 

语法说明：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

dataType类型：String,预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：
 

  1. "xml": 返回 XML 文档，可用 jQuery 处理。
  2. "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  4. "json": 返回 JSON 数据 。
  5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  6. "text": 返回纯文本字符串
 

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 

 

案例：
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"TestAjaxServlet",
 

        method:"GET",
 

        success:function(data){
 

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

        }
 

       
 

    });
 

})
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（ii）$get(url,params,fn,type) 
 

语法说明：
 

 
 
$(selector).get(url,data,success(response,status,xhr),dataType)
 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.get("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

 

（iii）post(url,params,fn,type) 
 

语法说明：
 

 
 
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
 

 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  type: 'POST',
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.post("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

  • Json
 

  1. Json概述
 

JSON 简介 (w3school.com.cn)
 

（1）简介：
 

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
 

JSON
 

采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python
 

等）。 这样就使得 JSON 成为理想的数据交换格式。
 

json 是一种轻量级的数据交换格式。
 

轻量级指的是跟 xml 做比较。
 

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

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（2）格式：
 

  1. 对象和Map 转换成 {key:value , key:value,...}
  2. 数组和集合转换成`[e1,e2,e3,...]`
  3.  JSON格式可以嵌套
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

  1. Json在前后端的格式转换
 

  1. Json在javascript中的使用
 

定义：
 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

var students=[
 

    {
 

         stuId:"1001",     
 

         stuName:"小丽",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1002",     
 

         stuName:"小双",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1003",     
 

         stuName:"小军",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    }
 

]
 

 

 

访问：
 

//访问json==alert()弹框  console.log控制台打印日志
 

alert("student1的数据类型是："+typeof(student1));
 

alert("students的数据类型是："+typeof(students));
 

console.log("student1.stuId:"+student1.stuId);
 

console.log("student1.stuName:"+student1.stuName);
 

console.log("student1.stuAge:"+student1.stuAge);
 

console.log("student1.score:"+student1.score[0]);
 

console.log("student1.score:"+student1.score[0].subject);
 

console.log("student1.score:"+student1.score[1].score);
 

console.log("students:"+students[1].stuId);
 

 

前端JS对象与JSON格式转换：
 

json 的存在有两种形式。 
 

一种是：对象的形式存在，我们叫它 json 对象。 
 

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

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 
 

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 
 

  1. JSON.stringify() 
 

把 json 对象转换成为 json 字符串 
 

  1. JSON.parse() 或 eval("("+jsonStr+")");
 

把 json 字符串转换成为 json 对象
 

 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(obj);
 

//将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

var obj3 = JSON.parse(jsonStr)；
 

说明：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
 

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
 

json字符串转化对象时加圆括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象，而不是作为语句(statement)来执行。
 

 

实例：
 

 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

//设置对象性别属性并赋值
 

student1.sex="男";
 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(student1);
 

//string
 

console.log(typeof(jsonStr));
 

console.log(jsonStr);
 

//将将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

//object
 

console.log(typeof(obj2));
 

console.log(obj2);
 

var obj3= JSON.parse(jsonStr);
 

//object
 

console.log(typeof(obj3));
 

console.log(obj3);
 

 

 

执行效果：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. Json在Java后端中的使用
 

Gson、FastJson、Jackson都是第三方序列化/反序列化 JSON格式的 Java库。JSON 是一种文本形式的数据交换格式，它比XML更轻量、比二进制容易阅读和编写，调式也更加方便。
 

FastJson慎用，有安全漏洞。
 

开源的Jackson：SpringBoot默认使用Jackson作为JSON数据格式处理的类库Google的Gson：Gson是Google为满足内部需求开发的JSON数据处理类库，其核心结构非常简单，toJson与fromJson两个转换函数实现对象与JSON数据的转换。
 

我们在本次学习中使用Gson。
 

  1. Json字符串与JavaBean对象的互相转化
 

 

  • 导入GSON.Jar
 

 

  • 掌握Gson主要方法
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为JavaBean对象
 

com.google.gson.Gson.fromJson(String json, Class<Student> classOfT)
 

  • 案例
 

public class JsonTest {
 

    public static void main(String[] args) {
 

        Student student = new Student("1001", "小花", 29);
 

        // 创建 Gson 对象实例
 

        Gson gson = new Gson();
 

        // toJson 方法可以把 java 对象转换成为 json 字符串
 

        String stuJsonString = gson.toJson(student);
 

        System.out.println(stuJsonString);
 

        // fromJson 把 json 字符串转换回 Java 对象
 

        // 第一个参数是 json 字符串
 

        // 第二个参数是转换回去的 Java 对象类型
 

        Student student1 = gson.fromJson(stuJsonString, Student.class);
 

        System.out.println(student1);
 

    }
 

}
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. JSON字符串与List、Map等集合框架互相转化：
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为List或Map对象
 

com.google.gson.Gson.fromJson(String json, Type typeOfT)
 

我们需要继承TypeToken类，调用其getType()方法
 

 

第一种方式：
 

新建类StudentListType.java,继承TypeToken类（使用泛型，确定类型）
 

public class StudentListType extends TypeToken<List<Student>> {
 

 

}
 

List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

 

第二种方式：使用匿名内部类：
 

List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

 

详细代码：
 

// List对象和json字符串的转化
 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println(studentsJsonStr);
 

        List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

        System.out.println(list2.toString());
 

 

        List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

        System.out.println(list3.toString());
 

        // Map对象和json字符串的转化
 

        Map<Integer, Student> map = new HashMap<>();
 

        map.put(1, new Student("1002", "小丽", 29));
 

        map.put(2, new Student("1003", "小文", 29));
 

        String mapStr = gson.toJson(map);
 

        System.out.println(mapStr);
 

        Map<Integer, Student> map2 = gson.fromJson(mapStr, new TypeToken<Map<Integer, Student>>() {
 

        }.getType());
 

        System.out.println(map2.get(1));
 

 

  1. 实例
 

 

前端：
 

 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<script  src="https://code.jquery.com/jquery-3.6.1.min.js" ></script> 
 

 

<script type="text/javascript">
 

$(function(){
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"JsonServlet",
 

        method:"GET",
 

        data:{
 

            key1:"猜猜我是谁",
 

            key2:"皮卡丘"
 

        },
 

        success:function(data){
 

            console.log(typeof(data));
 

            console.log(data);
 

        console.log(data[0].stuId+":"+data[0].stuName);
 

        },
 

        dataType:"json"
 

    });
 

})
 

});
 

</script>
 

</head>
 

<body>
 

 <input type="button" value="测试"  id="test"  />
 

</body>
 

</html>
 

 

后端：
 

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

        request.setCharacterEncoding("utf-8");
 

        String key1 = request.getParameter("key1");
 

        String key2 = request.getParameter("key2");
 

        System.out.println(key1 + ":" + key2);
 

 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

        Gson gson = new Gson();
 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println("要传给前端的json字符串：" + studentsJsonStr);
 

        // 将json格式字符串响应给ajax请求
 

        response.setContentType("application/json;charset=utf-8");
 

        response.setCharacterEncoding("utf-8");
 

        PrintWriter out = response.getWriter();
 

        out.println(studentsJsonStr);
 

        out.flush();
 

        out.close();
 

 

    }
 

服务器控制台输出：
 

猜猜我是谁:皮卡丘
 

要传给前端的json字符串：[{"stuId":"1002","stuName":"小丽","age":29},{"stuId":"1003","stuName":"小文","age":29},{"stuId":"1004","stuName":"小花","age":29}]
 

浏览器控制台输出：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

AJAX概述
 

 

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
 

ajax不是一种编程语言，而是使用JavaScript代码（浏览器通过js发送异步请求）实现前端和后端异步数据交互的技术。
 

Ajax 请求会将前端页面局部更新，浏览器地址栏不会发生变化
 

Ajax在不刷新前端网页的前提下实现和服务器的数据交互，大大提升了用户的体验感。
 

 

 

  1. AJAX异步交互的实现流程
 

  1. 同步和异步
 

 

同步：等待服务器响应后继续执行内容
 

            
 

异步：无需等待服务器响应，继续执行内容，服务器响应后则显示响应内容
 

 

  1. 异步交互场景
 

异步交互技术:
 

 

适用于网页中显示大量的数据，同时我们只想对一小部分数据进行更新(大部分数据是不更新)的场景。
 

局部刷新
 

  1. AJAX异步交互实现流程
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. AJAX代码实现
 

  1. AJAX原生代码实现
 

  1. 步骤
 

第一步：XHR创建对象
 

创建XMLHttpRequest 对象，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 

IE7+、FF、O、Safari、Chrome
 

 
 
variable=new XMLHttpRequest();
 

 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
 

 

 
 
variable=new ActiveXObject("Microsoft.XMLHTTP");
 

 

 

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
 

 
 
var xmlhttp;
 
 
if (window.XMLHttpRequest)
 
 
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 
 
  xmlhttp=new XMLHttpRequest();
 
 
  }
 
 
else
 
 
  {// code for IE6, IE5
 
 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 
 
  }
 
 
 

 

 

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

 

第二步：向服务器发送请求
 

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

 
方法
 		 
描述
 
 
open(method,url,async)
 		 
规定请求的类型、URL 以及是否异步处理请求。
 
    
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
 
send(string)
 		 
将请求发送到服务器。
 
    
  • string：仅用于 POST 请求
 

 

Async = true
 

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

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 
 
xmlhttp.open("GET","test1.txt",true);
 
 
xmlhttp.send();
 

 

 

Async = false
 

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 

 

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
 

请记住， async=false时JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
 

注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
 

 
 
xmlhttp.open("GET","test1.txt",false);
 
 
xmlhttp.send();
 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

 

onreadystatechange 事件
 

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
 

每当 readyState 改变时，就会触发 onreadystatechange 事件。
 

readyState 属性存有 XMLHttpRequest 的状态信息。
 

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
 

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 

 
 
xmlhttp.onreadystatechange=function()
 
 
  {
 
 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
 
 
    {
 
 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 
 
    }
 
 
  }
 

 

 

 

 

第三步：获得服务器响应
 

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

 
属性
 		 
描述
 
 
responseText
 		 
获得字符串形式的响应数据。
 
 
responseXML
 		 
获得 XML 形式的响应数据。
 
 

 

 
 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 

 

 

使用回调函数：回调函数是一种作为参数被传递到另一个函数的函数。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

  1. 具体代码实现
 

案例：点击按钮，动态刷新返回服务端文本
 

Index.html
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<style type="text/css">
 

.view{
 

width:200px;
 

height:200px;
 

background-color:red;
 

}
 

</style>
 

 

 

<script type="text/javascript">
 

function test(){
 

     //1、创建ajax请求对象
 

    if(window.XMLHttpRequest){
 

        ajaxReq = new XMLHttpRequest();
 

    }else{
 

        ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
 

    }
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //2、封装ajax请求数据（初始化）
 

    var method = "GET";
 

    var url = "TestAjaxServlet";
 

    var async = true;
 

    ajaxReq.open(method,url,async);
 

    console.log("---------"+ajaxReq.readyState);
 

   
 

    //4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
 

   
 

     ajaxReq.onreadystatechange  = function(){
 

     //获取服务器响应结果的两个条件：
 

     if (ajaxReq.readyState == 4 && ajaxReq.status == 200) {
 

         document.getElementById("myDiv").innerHTML=ajaxReq.responseText;
 

     }
 

    }
 

   
 

    //3.发送请求
 

    ajaxReq.send();
 

}
 

</script>
 

</head>
 

<body>
 

   <input type="button" value="测试"  class="test" onclick="test()"/>
 

   <div class="view" id="myDiv">
 

   </div> 
 

</body>
 

</html>
 

 

TestAjaxServlet.java
 

 

 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

 

        String value = "I am  ajax";
 

        PrintWriter printWriter = response.getWriter();
 

        printWriter.write(value);
 

        printWriter.flush();
 

        printWriter.close();
 

    }
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

‘
 

 

 

案例：模拟同步异步实现区别
 

什么是局部刷新？
 

使用超链接跳转刷新
 

对比
 

使用ajax进行局部刷新
 

什么是同步？
 

在TestAjaxServlet.java中添加线程睡眠代码，使得ajax响应流程延长
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

在JS代码中修改async参数为false，使其同步响应，并在ajax操作后，添加弹框语句。
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

当同步响应时，必须等待ajax请求服务器，服务器响应结束后，再出现后续弹框（“111”）的内容。即会先等待3s,出现弹框（“ajax过来了”）,再出现弹框（“111”）。用户体验感较差。
 

而异步响应时，无需等待服务器响应结束，直接可出现弹框（“111”），执行后续流程。
 

 

 

  1. JQuery中的AJAX实现
 

（i）$.ajax()函数
 

语法说明：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

dataType类型：String,预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：
 

  1. "xml": 返回 XML 文档，可用 jQuery 处理。
  2. "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  3. "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  4. "json": 返回 JSON 数据 。
  5. "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  6. "text": 返回纯文本字符串
 

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
 

 

案例：
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"TestAjaxServlet",
 

        method:"GET",
 

        success:function(data){
 

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

        }
 

       
 

    });
 

})
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（ii）$get(url,params,fn,type) 
 

语法说明：
 

 
 
$(selector).get(url,data,success(response,status,xhr),dataType)
 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.get("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

 

（iii）post(url,params,fn,type) 
 

语法说明：
 

 
 
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
 

 

 

该函数是简写的 Ajax 函数，等价于：
 

 
 
$.ajax({
 
 
  type: 'POST',
 
 
  url: url,
 
 
  data: data,
 
 
  success: success,
 
 
  dataType: dataType
 
 
});
 

 

 

案例：
 

$.post("TestAjaxServlet",{},function(data){$("#myDiv").html(data);},"text");
 

 

  • Json
 

  1. Json概述
 

JSON 简介 (w3school.com.cn)
 

（1）简介：
 

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
 

JSON
 

采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python
 

等）。 这样就使得 JSON 成为理想的数据交换格式。
 

json 是一种轻量级的数据交换格式。
 

轻量级指的是跟 xml 做比较。
 

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

 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

（2）格式：
 

  1. 对象和Map 转换成 {key:value , key:value,...}
  2. 数组和集合转换成`[e1,e2,e3,...]`
  3.  JSON格式可以嵌套
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

 

 

  1. Json在前后端的格式转换
 

  1. Json在javascript中的使用
 

定义：
 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

var students=[
 

    {
 

         stuId:"1001",     
 

         stuName:"小丽",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1002",     
 

         stuName:"小双",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    },
 

    {
 

         stuId:"1003",     
 

         stuName:"小军",
 

         stuAge:19,
 

         score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

         friends:["小文","小花","小草"]
 

    }
 

]
 

 

 

访问：
 

//访问json==alert()弹框  console.log控制台打印日志
 

alert("student1的数据类型是："+typeof(student1));
 

alert("students的数据类型是："+typeof(students));
 

console.log("student1.stuId:"+student1.stuId);
 

console.log("student1.stuName:"+student1.stuName);
 

console.log("student1.stuAge:"+student1.stuAge);
 

console.log("student1.score:"+student1.score[0]);
 

console.log("student1.score:"+student1.score[0].subject);
 

console.log("student1.score:"+student1.score[1].score);
 

console.log("students:"+students[1].stuId);
 

 

前端JS对象与JSON格式转换：
 

json 的存在有两种形式。 
 

一种是：对象的形式存在，我们叫它 json 对象。 
 

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

一般我们要操作 json 中的数据的时候，需要 json 对象的格式。 
 

一般我们要在客户端和服务器之间进行数据交换的时候，使用 json 字符串。 
 

  1. JSON.stringify() 
 

把 json 对象转换成为 json 字符串 
 

  1. JSON.parse() 或 eval("("+jsonStr+")");
 

把 json 字符串转换成为 json 对象
 

 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(obj);
 

//将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

var obj3 = JSON.parse(jsonStr)；
 

说明：eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
 

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
 

json字符串转化对象时加圆括号的目的是迫使 eval 函数在评估 JavaScript 代码的时候强制将括号内的表达式(expression)转换为对象，而不是作为语句(statement)来执行。
 

 

实例：
 

 

/*定义json对象  */
 

var student1={
 

  stuId:"1001",    
 

  stuName:"小丽",
 

  stuAge:19,
 

  score:[{"subject":"Java","score":80},{"subject":"MySQL","score":75},{"subject":"Python","score":90}],
 

  friends:["小文","小花","小草"]
 

};
 

 

//设置对象性别属性并赋值
 

student1.sex="男";
 

//将JS对象转换成json格式字符串
 

var jsonStr = JSON.stringify(student1);
 

//string
 

console.log(typeof(jsonStr));
 

console.log(jsonStr);
 

//将将JSON格式字符串转换成JS对象
 

var obj2 =  eval("("+jsonStr+")");
 

//object
 

console.log(typeof(obj2));
 

console.log(obj2);
 

var obj3= JSON.parse(jsonStr);
 

//object
 

console.log(typeof(obj3));
 

console.log(obj3);
 

 

 

执行效果：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. Json在Java后端中的使用
 

Gson、FastJson、Jackson都是第三方序列化/反序列化 JSON格式的 Java库。JSON 是一种文本形式的数据交换格式，它比XML更轻量、比二进制容易阅读和编写，调式也更加方便。
 

FastJson慎用，有安全漏洞。
 

开源的Jackson：SpringBoot默认使用Jackson作为JSON数据格式处理的类库Google的Gson：Gson是Google为满足内部需求开发的JSON数据处理类库，其核心结构非常简单，toJson与fromJson两个转换函数实现对象与JSON数据的转换。
 

我们在本次学习中使用Gson。
 

  1. Json字符串与JavaBean对象的互相转化
 

 

  • 导入GSON.Jar
 

 

  • 掌握Gson主要方法
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为JavaBean对象
 

com.google.gson.Gson.fromJson(String json, Class<Student> classOfT)
 

  • 案例
 

public class JsonTest {
 

    public static void main(String[] args) {
 

        Student student = new Student("1001", "小花", 29);
 

        // 创建 Gson 对象实例
 

        Gson gson = new Gson();
 

        // toJson 方法可以把 java 对象转换成为 json 字符串
 

        String stuJsonString = gson.toJson(student);
 

        System.out.println(stuJsonString);
 

        // fromJson 把 json 字符串转换回 Java 对象
 

        // 第一个参数是 json 字符串
 

        // 第二个参数是转换回去的 Java 对象类型
 

        Student student1 = gson.fromJson(stuJsonString, Student.class);
 

        System.out.println(student1);
 

    }
 

}
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消
 

  1. JSON字符串与List、Map等集合框架互相转化：
 

//将对象转换为json字符串
 

om.google.gson.Gson.toJson(Object src)
 

//将json字符串转换为List或Map对象
 

com.google.gson.Gson.fromJson(String json, Type typeOfT)
 

我们需要继承TypeToken类，调用其getType()方法
 

 

第一种方式：
 

新建类StudentListType.java,继承TypeToken类（使用泛型，确定类型）
 

public class StudentListType extends TypeToken<List<Student>> {
 

 

}
 

List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

 

第二种方式：使用匿名内部类：
 

List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

 

详细代码：
 

// List对象和json字符串的转化
 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println(studentsJsonStr);
 

        List<Student> list2 = gson.fromJson(studentsJsonStr, new TypeToken<List<Student>>() {
 

        }.getType());
 

        System.out.println(list2.toString());
 

 

        List<Student> list3 = gson.fromJson(studentsJsonStr, new StudentListType().getType());
 

        System.out.println(list3.toString());
 

        // Map对象和json字符串的转化
 

        Map<Integer, Student> map = new HashMap<>();
 

        map.put(1, new Student("1002", "小丽", 29));
 

        map.put(2, new Student("1003", "小文", 29));
 

        String mapStr = gson.toJson(map);
 

        System.out.println(mapStr);
 

        Map<Integer, Student> map2 = gson.fromJson(mapStr, new TypeToken<Map<Integer, Student>>() {
 

        }.getType());
 

        System.out.println(map2.get(1));
 

 

  1. 实例
 

 

前端：
 

 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="UTF-8">
 

<title>Insert title here</title>
 

<script  src="https://code.jquery.com/jquery-3.6.1.min.js" ></script> 
 

 

<script type="text/javascript">
 

$(function(){
 

$("#test").click(function(){
 

    $.ajax({
 

        url:"JsonServlet",
 

        method:"GET",
 

        data:{
 

            key1:"猜猜我是谁",
 

            key2:"皮卡丘"
 

        },
 

        success:function(data){
 

            console.log(typeof(data));
 

            console.log(data);
 

        console.log(data[0].stuId+":"+data[0].stuName);
 

        },
 

        dataType:"json"
 

    });
 

})
 

});
 

</script>
 

</head>
 

<body>
 

 <input type="button" value="测试"  id="test"  />
 

</body>
 

</html>
 

 

后端：
 

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 

            throws ServletException, IOException {
 

        request.setCharacterEncoding("utf-8");
 

        String key1 = request.getParameter("key1");
 

        String key2 = request.getParameter("key2");
 

        System.out.println(key1 + ":" + key2);
 

 

        List<Student> list = new ArrayList<Student>();
 

        list.add(new Student("1002", "小丽", 29));
 

        list.add(new Student("1003", "小文", 29));
 

        list.add(new Student("1004", "小花", 29));
 

        Gson gson = new Gson();
 

        String studentsJsonStr = gson.toJson(list);
 

        System.out.println("要传给前端的json字符串：" + studentsJsonStr);
 

        // 将json格式字符串响应给ajax请求
 

        response.setContentType("application/json;charset=utf-8");
 

        response.setCharacterEncoding("utf-8");
 

        PrintWriter out = response.getWriter();
 

        out.println(studentsJsonStr);
 

        out.flush();
 

        out.close();
 

 

    }
 

服务器控制台输出：
 

猜猜我是谁:皮卡丘
 

要传给前端的json字符串：[{"stuId":"1002","stuName":"小丽","age":29},{"stuId":"1003","stuName":"小文","age":29},{"stuId":"1004","stuName":"小花","age":29}]
 

浏览器控制台输出：
 

正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消

                

        

        

    

  


    

      

        

            

              
                
                  不会写程序的菜鸟
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
js中的定义的XMLHttpRequest对象的onreadystatechange函数放在其send函数后面为什么不会执行其回调函数

				
			

			

				

					weixin_43990363的博客
				

				

					10-29
					
					1350
					
				

			

		

		

			
				
js中的定义的onreadystatechange函数放在send函数后面为什么不会执行其回调函数

自己在写项目的时候遇到了onreadtstatechange函数放在send函数的后面导致不执行的情况，在网上搜了一下，发现都说的不是很详细，就自己分析了一下并发现了问题所在，写个博客总结一下



首先我们对于onreadystatechange函数要明白以下几点

onreadystatech...

			
		

	



                

            
              



	

		

			

				
					
ajax 兼容问题、send的位置、Status Code状态码

				
			

			

				

					banbiante5717的博客
				

				

					12-07
					
					213
					
				

			

		

		

			
				
XMLHttpRequest在低版本IE下（除IE6），里面的事件和属性都有不同。比如 xhr.onload = function( ){ } 事件只有高版本才能使用。
但是所有版本都支持：xhr.onreadystatechange = function( ){ } ：能够监听到请求的步骤。
onreadystatechange 能够监听到五步，每步都有对应的数字0-4，但是第0步...

			
		

	



              


  
              

                


	

		

			

				
					
Ajax详解

				
			

			

				

					AD8XX的博客
				

				

					03-29
					
					234
					
				

			

		

		

			
				
ajax的介绍
全称  Asynchronous Javascript And XML（ 异步的js和xml）
ajax就是在不刷新页面的情况下发送http请求，将服务器返回的数据加载出来，应用于局部刷新，表单验证等等，ajax可同步可异步
同步：一个代码执行的时候，阻塞其他代码执行（先吃饭再上厕所）
异步：一个代码执行的时候，不影响其他代码执行（边吃饭边看电视）
数据加载方案：先执行同步，异步先...

			
		

	





	

		

			

				
					
xmlhttp的onreadystatechange为什么在open和send前面

				
			

			

				

					qq_32888087的博客
				

				

					06-20
					
					1289
					
				

			

		

		

			
				
问题来源

最近在学习ajax请求，读到W3school官方文档对于  发送请求，和处理状态改变函数时，每次都把onreadystatechange 写在open()和send()前面，对此很疑惑！！如下图



链接：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

解释


open()只是初始化，做好准备发送，
s...

			
		

	



		

			
		



	

		

			

				
					
Ajax与JSON

				
			

			

				

					凌北辰的博客
				

				

					12-30
					
					541
					
				

			

		

		

			
				
Ajax与JSON
一、Ajax简介
​	Asynchronous Javascript And Xml[异步javascript和xml]，在传统的Web开发中,与服务器进行通信主要是通过同步请求的方式(即刷新页面)来实现,如果同步请求的次数过于频繁,就会产生大量无用、重复的数据占用带宽。
Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件,在不需要刷新页面的情况,与服务器保持异步通信和联系,服务器根据需要进行最小化响应,而不是完整页面的重复发送。
​	同步：浏览器发送一个请求到服

			
		

	





	

		

			

				
					
JS JSON Ajax

				
			

			

				

					Evie的博客
				

				

					03-09
					
					718
					
				

			

		

		

			
				
文章目录HTML系统结构基本概念Tag常见页面错误JavaScript 简单认识JS 概述JS 使用JS变量JS 数据类型JS条件语句JS 操作符JS 循环语句JS 函数JS 弹出框JS 事件JSON 简单认识Ajax 简单认识前后端分离XML 概述
HTML
系统结构
B/S 架构：Browser / Server，浏览器端/服务器端的交互形式。


优缺点：
升级方便，维护成本低（只需要升级和维护服务器端代码）
速度慢，体验差，不美观


支持的语言：
Browser：HTML、CSS、JavaScri

			
		

	





	

		

			

				
					
ajax 返回类型为json,ajax返回数据类型为JSON数据的处理

				
			

			

				

					weixin_42467573的博客
				

				

					08-06
					
					907
					
				

			

		

		

			
				
JSON数据处理：1.编码格式必须为utf82.echo json_encode($db->GuanQuery($sql));  返回的是关联数组。json_encode返回的是json数据。3.大小写一定要区分，否则可能会查不到数据，报错。无标题文档$.ajax({url:"jsonchuli.php",dataType:"JSON",success: function(data){va...

			
		

	





	

		

			

				
					
asp-ajax-json.zip_asp ajax json

				
			

			

				

					09-23
				

			

		

		

			
				
标题中的"asp-ajax-json.zip_asp ajax json"表明这是一个关于使用ASP（Active Server Pages）技术，结合AJAX（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）的数据传输格式来实现网页无...

			
		

	





	

		

			

				
					
ajax+json+ashx实现列表页.rar

				
			

			

				

					03-17
				

			

		

		

			
				
标题 "ajax+json+ashx实现列表页.rar" 暗示了这是一个关于使用AJAX、JSON和ASHX处理在Web应用中动态加载列表页的示例项目。在这个项目中，开发者可能通过AJAX技术实现了无刷新更新列表，利用JSON进行数据传输，而...

			
		

	





	

		

			

				
					
ajax+json+ashx实现界面漂亮的搜索功能.rar

				
			

			

				

					03-20
				

			

		

		

			
				
标题 "ajax+json+ashx实现界面漂亮的搜索功能.rar" 描述的是一个使用Ajax技术、JSON数据格式以及ASP.NET中的ASHX（HTTP Handler）来构建的高效、美观的搜索功能。这一实现方式允许用户在不刷新整个页面的情况下，...

			
		

	





	

		

			

				
					
maven+ajax+json

				
			

			

				

					08-05
				

			

		

		

			
				
【标题】"maven+ajax+json" 描述了在软件开发中，使用Maven构建项目，通过Ajax技术处理JSON数据的方式。这是一个典型的前后端交互场景，涉及到的技术栈包括Maven（项目管理工具）、Ajax（异步JavaScript和XML）以及...

			
		

	





	

		

			

				
					
flgl.rar_ajax json jquery_jquery json

				
			

			

				

					09-19
				

			

		

		

			
				
标题“flgl.rar_ajax json jquery_jquery json”和描述中提到的主题主要集中在使用Ajax、JSON以及jQuery技术在前端实现与后端数据交互的过程。这里，我们详细探讨这些关键概念及其在实际开发中的应用。  首先，**...

			
		

	





	

		

			

				
					
axios平替！用浏览器自带的fetch处理AJAX（兼容表单/JSON/文件上传）

				
			

			

				

					集成显卡的开源主页 https://github.com/0604hx
				

				

					11-11
					
					306
					
				

			

		

		

			
				
fetch 函数是 JavaScript 中用于发送网络请求的内置 API，可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求（如 GET、POST 等），并返回一个 Promise，从而简化异步操作。

			
		

	





	

		

			

				
					
spark的学习-06

				
			

			

				

					qq_62984376的博客
				

				

					11-11
					
					883
					
				

			

		

		

			
				
方式一：给定读取数据源的类型和地址方式二：直接调用对应数据源类型的方法特殊参数：option，用于指定读取时的一些配置选项。

			
		

	





	

		

			

				
					
Ajax 与 Vue 框架应用点——随笔谈

				
			

			

				

					因为热爱，所以坚持。
				

				

					11-13
					
					969
					
				

			

		

		

			
				
随笔记录，关于 Ajax 和 Vue 技术的意义

			
		

	





	

		

			

				
					
日志：中文 URI 参数乱码之 encodeURI、encodeURIComponent、escape 作为 Ajax 中文参数编码给 ASP 的记录

					
最新发布

				
			

			

				

					编程路
				

				

					11-14
					
					180
					
				

			

		

		

			
				
对于 ASP 来说，最适配的 URI 中文参数传递转换应该还是推荐 Unicode 编码，不和浏览器默认转换 UTF-8 扯皮，扯不清楚，于是自己写了个简单的 VBS 版 unescape

			
		

	





	

		

			

				
					
AJAX学习（24.11.1-24.11.14）(包含HTTP协议）

				
			

			

				

					2401_84827689的博客
				

				

					11-14
					
					583
					
				

			

		

		

			
				
1.通信概念：信息的传递和交换；三要素：         =》主体（服务器和客户端）​        =》内容​ =》方式协议：互联网的通信协议是网页内容的传输协议。（网页内容又叫超文本）HTTP协议：超文本传输协议（HyperText Transfer Protocol）3.how。

			
		

	





	

		

			

				
					
微信小程序——01开发前的准备和开发工具

				
			

			

				

					总裁余（余登武）博客
				

				

					11-10
					
					213
					
				

			

		

		

			
				
微信小程序——01开发前的准备和开发工具

			
		

	





	

		

			

				
					
Java进阶：深入理解Filter、Listener、Ajax和Json

				
			

			

				

					
				

			

		

		

			
				
此外，本资源可能包含了一个标题为“Java进阶-Filter & Listener & Ajax（十五）”的文件，这表明资源可能是一个系列教程中的第十五章节，涵盖了以上所述知识点，并可能提供了一些实践案例、练习题或者详细的代码...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值