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()

    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()

  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}
  

原文地址：https://blog.csdn.net/chaosweet/article/details/143018818

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！