十七、AJAX & JSON

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX技术不需要刷新页面的情况下，就可以产生局部刷新的效果

最初AJAX技术操作的是XML标签，现在绝大多数情况下操作的是JSON格式的字符串

1. json格式数据

// json对象

// 注意：对象的属性名，必须要双引号引起来

let obj = {

"name": "张三",

"age": 20,

"gender": "男"

}

// json数组

let arr = [

{

"name": "张三",

"age": 20,

"gender": "男"

{

"name": "李四",

"age": 22,

"gender": "女"

}

]

2. AJAX对象

// 01.创建xhr对象 (原生ajax对象)

let xhr = new XMLHttpRequest()

// 02.初始化请求（GET请求，POST请求）

// 第一个参数是请求方式：比如GET，第二个参数是请求地址：比如192.168.11.12:81/Server/List

xhr.open('GET','./data/koubei.json')

// 03.发送请求

xhr.send()

// 04.监听读取状态改变事件

xhr.onreadystatechange = function(){

// 请求已经完成

if(xhr.readyState===4){

// 请求状态为成功

if(xhr.status === 200){

// xhr.responseText 返回响应体，它是一个json格式的字符串

// 我们需要将该字符串转为js对象

let data = JSON.parse(xhr.responseText)

}

readyState 是读取状态：

0: 请求未发送

1：服务器连接已建立（请求已经发送）

2：请求已接收（服务器已经接收到该请求）

3：请求处理中（服务器正则准备你要的数据）

4：请求已完成，且响应已就绪

status 是响应的状态码：

200：成功

404：请求资源错误

500：服务器端错误

将对象里面的数据，转为json字符串 => JSON.stringify(对象)

将对象里面的数据，转为url字符串，可以写一个方法进行转换

//对象转字符串

getStrByObj: function (obj, split = "-") {

return Object.keys(obj).map((key) => [key, obj[key]].join("=")).join(split)

studentNo=12345&loginPwd=123123&studentName=周杰伦

设置请求头（post请求设置，get请求可以忽略）：

1.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

（表示头文件为url字符串）

2.xhr.setRequestHeader('Content-Type','application/json')

（表示头文件为json字符串）

Ajax

高校信息管理系统

账号:

密码:

高校信息管理系统

查询学生

查询课程

查询学生

姓名(支持模糊查询):

性别

全部

男

女

学号	姓名	性别	年级	电话	地址	生日	邮箱	操作

添加学生

学号:	该学号已存在
密码:
姓名:
性别:	男女
年级:
电话:
地址:
生日:
邮箱:
身份证:

2021-12-19

十七、AJAX & JSON

1. json格式数据

2. AJAX对象

高校信息管理系统

查询学生

添加学生

你可能感兴趣的:(2021-12-19)