ajax和JSON

ajax

1.ajax

ajax: 异步Javascript和XML

发送请求以及异步的方式, 传递的传输形式: xml(早期), json(现在流行)

后台响应学生信息的数据给前端:

java: Student类: id属性,name属性, sex属性,age属性…

跨语言数据传输:

“1,张三,男,18” --> 数据

直接传输

问题:

1. 每个数据的含义不清楚,
2. 发送数据, 手动把对象转换为字符串, 获取数据: 解析字符串

xml格式: 自定义标签

"<student id='1' name='张三' age='18' sex='男' ></student>"

​ 优点: 每个数据的含义清晰

缺点:

发送数据, 手动把对象转换为xml 获取数据: 解析xml 前端: dom解析

json格式

{"id":1,"name":"张三","age":18,"sex":"男"}

优点: 每个数据的含义清晰, 对前端友好: 前端不需要解析, 变成一个js对象

缺点:

发送数据, 手动把对象转换为json格式的字符串

AJax的两大特点:

• 异步通信
• 局部刷新

2.异步通信, 同步通信

3.原生的javascript写ajax 了解

1. 代码量大
2. 浏览器兼容性问题

Ajax核心对象: XMLHttpRequest (xhr)

4.JQuery 的Ajax

1 $.ajax()

参数:

​ data : String /Object: 请求参数,客户端发送给服务器的数据

​ dataType: String 服务器响应的数据类型

“xml”: 返回 XML 文档，可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘’‘注意：’''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式 解决跨域

“text”: 返回纯文本字符串

success(data, textStatus, jqXHR) function 成功之后的回调函数:

data: 参数名: 接收服务器给ajax请求的响应的数据 , 任意取

error: function, 服务器响应的失败的回调函数

type: String 提交方式 (默认: “GET”) 请求方式 (“POST” 或 “GET”)，

url: String 请求的url地址

Ajax请求,要求后台响应数据, 不能重定向转发页面, 通过响应对象的响应输出流写出数据

JSON 与转换

1.JSON

 //创建对象 js对象
var stu = { id: 1, name: "张三"} 
 //构造方法
 function Person(name,id){
     this.name = name;
     this.id = id;
 }
//构造函数方式
var p1 = new Person('李四',1);
//json字符串
var json = '{ "id": 1, "name": "张三"}';

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKDgh1Yv-1667219811792)(笔记.assets/image-20221027091206392.png)]

JSON语法格式:

1. 数据以key/value对存储, key:value
2. 数据与数据之间使用逗号分割: k1:v1,k2:v2
3. 使用 {} 表示一个对象 {"id":1,"name":"张三"}
4. 使用[] 表示一个数组 {"id":1,"name":"张三","loves":["read","music"]}

stus:[{"id":1,"name":"张三"},{"id":2,"name":"李四",sex:null}]

注意:

1. key一定使用双引号引起
2. 如果value是字符串,一定使用双引号引起

JSON值：

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在方括号中 []）
• 对象（在花括号中 {}）
• null

2.ES5语法中 JSON类

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

JSON.stringify(js对象): 把js对象转换为JSON格式字符串

JQuery中:

$.parseJSON(json字符串): 把json字符串转换为js对象, 该方法在jquery3.0 以后的版本删除

3.java对象与json的转换

借助第三方的jar: fastJson, jackson, json-lib…

课件: fastJson: 阿里巴巴的

核心类: JSON

核心方法:

把json字符串转换为java对象: parseObject()

把对象数组形式json字符串转换为java的List集合: parseArray()

把java对象转换为json字符串: toJSONString()