Ajax：原生ajax、使用FormData的细节问题，数据的载体

人生海海，山山而川，不过尔尔；空空而来，苦苦而过，了了而去

文章目录

原生ajax

执行顺序
1. 创建xhr对象 var xhr = new XMLHttpRequest()
2. 调用xhr.open('请求方式', url)函数，设置请求方式和接口地址
3. 调用xhr.send函数，用于发送请求
4. 监听xhr.onreadystatechange事件，获取接口返回的结果
关于readyState属性
- readyState的值有5个，分别是0-4，该属性表示ajax请求过程中的5个不同的状态
- 我们关心的是xhr.readyState===4的时候，因为这个时候浏览器端可以准确的完整的接收到服务器返回的数据
带参数的GET请求
- xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=3') 多个参数用&符号隔开
POST请求
- 参数位置不同，POST请求时提交的数据要当做 xhr.send() 的参数
- open和send方法之间，需要指定header头
编码中文
- url中不要出现中文，如查询字符串中有英文，我们最好使用js函数encodeURL()对中文进行编码处理
XMLHttpRequest Level 2新特性
- xhr.onload：在完成ajax请求完毕的时候会触发
- xhr.reponse：可以接收任何类型的结果
xhr配合ForData使用
1. 获取表单数据
  - 找到表单的dom对象
  - 实例化FormData，参数是前面得到的dom对象
2. ajax提交到接口
  - 指定POST方式提交到指定的接口
  - 不要写setquestHeader
  - 数据当做send的参数直接使用即可

使用FormData的细节问题

注意事项
- 表单各项（input/select/textarea）必须有name属性，因为FormData就是根据name属性来收集数据的
- 找form表单的时候一定要用dom对象
- 发送ajax请求的时候必须使用POST方式
- 接口必须使用指定的接口
API
- get('username')：判断FormData对象中的username的值
- has('username')：判断FormData对象中是否有username
- append('time',Data now())：向FormData对象中追加一条数据

数据的载体

JSON (JavaScript Object Notation )

作用：json是一种超轻量级的数据交换格式 (实际上是JavaScript的子集)
注意事项
- 属性名必须要用双引号包裹
- 字符串类型的值必须用双引号包裹
- json中不能写注释
- json的最外层必须是对象或数组格式
- 不能使用undefined或函数作为json的值

序列化：即把js对象转成json格式的字符串的过程，使用方法为 JSON.stringify()

javascript 复制代码

var xiaoming = {
  name: '小明',
  age: 12,
 	gender: true,
  height: 165,
  grade: null,
  'middle-school': 'Middle School',
  skills: ['Javascript', 'Java', 'Python', 'Lisp']
}
var res = JSON.stringify(xiaoming)
console.log(res)
// 运行结果: {"name":"小明","age":12,"gender":true,"height":1.65,"grade":null,"middle-school":"Middle School","skills":["Javascript","Java","Python","Lisp"]}
// 如果要输出好看一些的话, 可以加上参数，按缩进输出 JSON.stringify(xiaoming, null, ' ')
// 运行结果：{
              "name": "小明",
              "age": 14,
              "gender": true,
              "height": 1.65,
              "grade": null,
              "middle-school": "Middle School",
              "skills": [
                "JavaScript",
                "Java",
                "Python",
                "Lisp"
              ]
            }
// 第二个参数用于控制如何筛选对象的赋值，如果只想输出指定的属性，可以传入Array：JSON.stringify(xiaoming, ['name', 'skills'], ' ')
// 运行结果：  {
              "name": "小明",
              "skills": [
                "JavaScript",
                "Java",
                "Python",
                "Lisp"
              ]
            }
// 其中第三个参数
	1.如果省略的话显示出来的值就没有分隔符，直接输出来
	2.如果是一个数字的话定义的是缩进几个字符，如果大于10，则默认为10，因为最大值为10
	3.如果是一些转义字符，比如'\t'，表示回车，那么它每行一个回车
	4.如果仅仅是字符串，就在每行输出值的时候就把这些字符串附加上去，最大长度也是10个字符

反序列化：即把json格式的字符串转成js对象的过程，使用方法为 JSON.parse()

javascript 复制代码

var res = JSON.parse('[1,2,3,true]')
console.log(res) // [1,2,3,true]
var res = JSON.parse('{"name": "小明", "age": 14}')
console.log(res) // {name: '小明', age:14}
var res = JSON.parse('true')
console.log(res) // true
var res = JSON.parse('123.45')
console.log(res) // 123.45
// 还可以接收一个函数,用来转换解析出的属性
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
  if (key === 'name') {
    return value + '同学'
  }
  return value
})
console.log(JSON.stringify(obj)) // {"name":"小明同学","age":14}