人生海海,山山而川,不过尔尔;空空而来,苦苦而过,了了而去
文章目录
- 原生ajax
- 使用FormData的细节问题
- 数据的载体
ajax_3">原生ajax
- 执行顺序
- 创建xhr对象
var xhr = new XMLHttpRequest()
- 调用
xhr.open('请求方式', url)函数
,设置请求方式和接口地址 - 调用
xhr.send函数
,用于发送请求 - 监听
xhr.onreadystatechange事件
,获取接口返回的结果
- 创建xhr对象
- 关于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()
对中文进行编码处理
- url中不要出现中文,如查询字符串中有英文,我们最好使用js函数
- XMLHttpRequest Level 2新特性
xhr.onload
:在完成ajax请求完毕的时候会触发xhr.reponse
:可以接收任何类型的结果
- xhr配合ForData使用
- 获取表单数据
- 找到表单的dom对象
- 实例化FormData,参数是前面得到的dom对象
- ajax提交到接口
- 指定POST方式提交到指定的接口
- 不要写setquestHeader
- 数据当做send的参数直接使用即可
- 获取表单数据
使用FormData的细节问题
- 注意事项
- 表单各项(input/select/textarea)必须有name属性,因为FormData就是根据name属性来收集数据的
- 找form表单的时候一定要用dom对象
- 发送ajax请求的时候必须使用POST方式
- 接口必须使用指定的接口
- API
get('username')
:判断FormData对象中的username的值has('username')
:判断FormData对象中是否有usernameappend('time',Data now())
:向FormData对象中追加一条数据
数据的载体
- JSON (JavaScript Object Notation )
- 作用:json是一种超轻量级的数据交换格式 (实际上是JavaScript的子集)
- 注意事项
- 属性名必须要用双引号包裹
- 字符串类型的值必须用双引号包裹
- json中不能写注释
- json的最外层必须是对象或数组格式
- 不能使用undefined或函数作为json的值
- 序列化:即把js对象转成json格式的字符串的过程,使用方法为
JSON.stringify()
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,因为最大值为103.如果是一些转义字符,比如'\t',表示回车,那么它每行一个回车4.如果仅仅是字符串,就在每行输出值的时候就把这些字符串附加上去,最大长度也是10个字符
- 反序列化:即把json格式的字符串转成js对象的过程,使用方法为
JSON.parse()
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}