day31_JSON _AJAX
json&ajax
回顾
1. jq概述
是一款基于js的轻量级框架
2. jq基础语法
html中引入jq
jq与js的不同
js——》jq
$(js对象)
jq--》js
jq对象[索引]
页面加载事件
js：只能定义一次
jq：可以定义多次
3. jq选择器
基本：标签、class、id
层级：后代、并集、父子
属性：input[属性名="属性值"][]
过滤选择器：
:first
:last
:even
:odd
:eq(index)
jq遍历
jq对象.each(function(index,element){})
4. jq的dom操作
操作内容：text()、html()
操作属性：attr()、val()、prop()
操作样式：
1）jq对象.css();
2）jq对象.addClass() | jq对象.removeClass()
操作元素（标签）
$(标签)
jq对象.prepend(孩子)
jq对象.append(孩子)
jq对象.empty()
jq对象.remove()
5. jq事件
jq对象.click(function(){})
6. 综合案例
今日内容
1. json【今天掌握】
2. ajax【web、项目一、项目二】
JSON
JSON概述
java对象表示形式
User user = new User();
user.setUsername("xxx");
user.setAge(23);
JavaScript对象表示形式
let user= {"username":"xxx", "age":23, "sex": "男"};
JSON是对数据通用格式的载体, 比 XML 更快捷高效和更易于解析. 通过http协议传输数据格式都为字符串
JSON, XML的作用是作为数据的载体, 在网络中传输
JSON基础语法
JSON 语法规则
数据:{属性:值,属性:值}
键值:键值之间是冒号,属性值与属性值之间是逗号
对象:用{}表示
数组:用[]表示
JSON对象使用中常见的具体形式
对象类型
格式 {属性:值,属性:值}数组/集合类型
格式 [值1,值2,值3]
- 混合类型
对象中属性的值是数组
{属性:[值1,值2,值3],属性:[值1,值2,值3]}
数组中的值是对象
[{属性:值,属性:值},{属性:值,属性:值}]
JSON格式转换
JSON对象与字符串转换的相关函数
1. JSON.stringify(object) 把对象转为字符串
2. JSON.parse(string) 把字符串转为对象
AJAX
AJAX概述
无需加载整个页面的情况下, 可以加载部分内容, 提高体验. 如 百度搜索框提示, 如京东首页下拉会出现更多图片
应用场景
- 搜索框提示
- 表单数据验证
- 无刷新分页
JS原生AJAX[原生方式开发中不用]
java -jar ajax_server.jar 这个命令是来运行jar包的
1) 运行一个java的服务器
1586572071555
2) 测试一下服务器
1586572166420
http://localhost:8080/check?username=123
3) 案例
1586572360849
4) 代码了解
-
代码步骤
1. 创建ajax对象 let xhr = new XMLHttpRequest(); 2. 告诉ajax的请求方式和请求地址 xhr. open (请求方式, 请求地址); 3. 通过ajax发送请求 xhr. send(); 4. 获取服务器返回的数据 xhr. onload = function(){ xhr.responseText; }
当服务器返回结果时, 会出发ajax的一个时间, 就是 xhr.onload事件
01-js的原生ajax
JQuery的Ajax的插件[重要]
相当于是JQuery 对原生ajax的代码进行了封装,封装成了一个函数
ajax函数(最基本的)
- 语法:
$.ajax({json对象格式})
- 参数:
url: 请求地址
type: 请求方式 (get: 不安全有限制大小, post: 安全无限制大小)
data: 请求参数
success: 请求成功时会执行的回调函数
error: 请求失败时, 会执行的回调函数
dataType: 预期服务器返回的数据类型 如 dataType:"json", ajax会帮助把标准json字符串转为json对象
- ajax默认是异步的, 也可以自己设置为同步的, 这种不推荐
- 代码演示
02-jq的ajax函数
get函数(ajax的get方式的简化)
- 语法:
$.get(url, callback) 这里的url 需要拼接请求参数
-
参数
url: 请求地址
callback: 请求成功的回调函数
-
代码演示
#### post函数(ajax的post简化形式)
- 语法
$.post(url, data, success)
- 参数
url: 请求地址
data: 请求的参数
success: 请求成功的回调函数
- 代码演示
```html
同步和异步
使用ajax发送的是异步请求
同步: 客户端发送请求后, 必须等待服务器的响应, 在等待期间客户端无法做任何事情
异步: 客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。
同步和异步区别
05-同步和异步
搜索案例
- 服务器地址
http://localhost:8080/search?keyword=j
- 代码实现
传智搜索
老师下午总结
1. JSON对象（重点）
* 基本格式：
{name:value, name:value}
* Json数组：
[
{name:value, name:value},
{name:value, name:value},
{name:value, name:value}
]
* 复杂对象：
{
name:value,
list:[{name:value},{name:value}],
user:{name:value}
}
* JSON对象与字符串转换
JSON.stringify(object) 把json对象转为字符串
JSON.parse(string) 把字符串转为json对象
for in 和 for of的区别
for in为索引for,遍历到的是数组或字符串的索引，可以遍历json对象，得到json对象的所有key，即属性名。
for of为增强for，遍历到的是数组的元素值或者字符串的每个字符，不能用于遍历json对象。
遍历字符串：
let str = "java";
//索引for，遍历得到的是数组或字符串的索引
for (let index in str) {
console.log(index); //0 1 2 3
}
//增强for， 遍历得到的是数组的元素值，或者字符串的字符
for (let s of str) {
console.log(s); // j a v a
}
遍历json对象：
let data = {"name":"张三","age":18,"sex":"男"};
//索引for，可以遍历json对象，拿到对象的所有属性名
for (let key in data) {
console.log(key); //得到所有属性名 name age sex
console.log(key+"====="+data[key]);
}
//for of无法遍历json数组
2. 原生Ajax（扩展了解）
XMLHttpRequest对象
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象作用：
- 在不重新加载页面的情况下更新网页。
- 在页面已加载后从服务器请求数据。
- 在页面已加载后从服务器接收数据。
- 在后台向服务器发送数据。
创建XMLHttpRequest对象:
let xmlHttp = new XMLHttpRequest();
XMLHttpRequest方法
1. 打开与服务器的连接:
open(method,url,async)
参数说明：
method: 表示请求方式，GET或POST。
url: 服务器的访问地址,或者资源的访问路径。
async : 是否执行异步请求，true为异步，false为同步。
举例：
xmlHttp.open("GET","data.txt",true);
2. 将请求送往服务器 :
send()
XMLHttpRequest事件
onreadystatechange事件：
当请求对象的准备状态发生改变时，会触发onreadystatechange事件。
发送请求给服务器，这个状态就会发生变化。
服务器响应回来，这个状态也会发生变化
XMLHttpRequest属性
readyState属性
readyState表示请求与服务器之间的状态信息。
每当readyState改变时，onreadystatechange事件就会被触发。
readyState属性可能的值：
| 状态 | 描述 |
|---|---|
| 0 | 请求未初始化（在调用 open() 之前） |
| 1 | 请求已提出（调用 send() 之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
status属性
status表示服务器响应结果状态码，常见有以下几个状态：
200 : 表示响应正确，服务器成功返回。
404 : 服务器找不到请求的资源。(通常是url地址错误)
500 : 服务器异常，无法完成请求。（通常是服务端代码报错）
responseText属性
通过responseText属性来取回由服务器返回的数据，数据为文本格式。
//1.创建对象
let xmlHttp = new XMLHttpRequest();
//2.GET方法，异步方式，打开请求
xmlHttp.open("GET","data.txt",true);
//3.发送请求
xmlHttp.send();
//4.监听请求状态改变事件，判断响应是否已完成
xmlHttp.onreadystatechange = function(){
//请求完成，并成功响应
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
//5.从服务器取出响应数据
let data = xmlHttp.responseText;
console.log(data);
}
};
原生GET方式
原生POST方式
3. Jquery的Ajax（重点）
$.ajax({json格式参数});
参数：
url: 请求地址
type：请求方式 ，常用的get和post
data：请求参数
dataType：返回的数据类型，常用的有text、json
success：请求成功时，执行的回调函数
error：请求失败时，执行的回调函数
$.get(url,success);
参数：
url:请求地址，一般包含请求参数的拼接
success：请求成功时的回调函数
$.post(url,data,success);
参数：
url：请求地址
data：请求参数
success：请求成功时的回调函数
扩展案例
省市联动