search

博客列表 >json/Ajax异步请求

json/Ajax异步请求

心
心原创
2021年01月09日 21:50:45646浏览

数组常用方法

-他们时仅在一端进行增删的数组

  • 栈方法：后进先出
  • 队：先进先出
  • push 写进 pop()在数组的尾部进行增删
  • unshift() shift()在数组的头部进行增删
  • join(): 指定分割符返回字符串 与split()相反
  • concat() 数组合并
  • slice() 返回数组中的部分成员 创建数组副本
  • splice(开始索引，删除的数量，插入的数据。。) 数组的增删改，它的本职工作时删除元素
  • 排序 sort()
  • map()
  • 过滤 filter()
  • reduce(callback(perv,curr),0)
  1. <script>
  2. //使用 push() pop()
  3.     let arr = []
  4.     console.log(arr.push(1,2,3))
  5.     console.log(arr);
  6.     console.log(arr.pop())
  7. //使用unshift() shift()
  8.     console.log(arr)
  9.     console.log(arr.unshift(1,2,3))
  10.     console.log(arr)
  11.     console.log(arr.shift())
  12.     console.log(arr.shift())
  13.     console.log(arr.shift())
  14.     // push()+shift() 模拟队列：尾部进入，头部出去
  15.     console.log(arr)
  16.     console.log(arr.push(1,2,3))
  17.     console.log(arr)
  18.     console.log(arr.shift())
  19.     console.log(arr.shift())
  20.     console.log(arr.shift())
  21.     // pop()+unshift() 模拟队列，头部进入，尾部出去
  22.     console.log(arr)
  23.     console.log(arr,unshift(1,2,3))
  24.     console.log(arr)
  25.     console.log(arr.pop())
  26.     console.log(arr.pop())
  27.     console.log(arr.pop())
  28.     //join()
  29.     arr = ['电脑','手机','相册']
  30.     let res = arr.join('---')
  31.     console.log(res)
  32.     let str = 'hello'    console.log(str[0],str[1].str[2].str[3].str[4])
  33.     //concat()数组合并
  34.     console,log('hello'.concat(php.cn))
  35.     console.log([1,2,3].concat([4,5],[6,7]))
  36.     // slice() 返回数组中的部分成员
  37.     arr = [1,2,3,4,5]
  38.     res = arr.slice(0)
  39.     console.log(res)
  40.     res[1] = 888
  41.     console.log(arr)
  42.     //取最后两个
  43.     console.log(arr.slice(3))
  44.     console.log(arr.slice(-2))
  45.     //splice() 数组的增删改吗，它的本职工作时删除元素
  46.     arr = [1,2,3,4,5]
  47.     res = arr.splice(2)
  48.     //返回被删除的元素
  49.     console.log(res)
  50.     // 当前数组中仅有1，2
  51.     console.log(arr)
  52.     //更新操作
  53.     arr = [1,2,3,4,5]
  54.     res = arr.splice(1,2,88,99)
  55.     console.log(res)
  56.     console.log(arr)
  57.     // 添加
  58.     arr = [1,2,3,4,5]
  59.     //将第二个人参数设置为0，这样就不会有元素被删除
  60.     res = arr.splice(1,0,...[88,99])
  61.     console.log(res)
  62.     console.log(arr)
  63.     // 排序
  64.     arr = ['p','b','c']
  65.     console.log(arr)
  66.     // 默认按字母表顺序
  67.     arr.sort()
  68.     console.log(arr)
  69.     //arr.sort()
  70.     arr.sort((a,b)=>a-b)
  71.     console.log(arr)
  72.     // 遍历 map
  73.     console.log(arr)
  74.     //没有返回值
  75.     arr.forEach(item=>console.log(item))
  76.     //map 对数组每个成员都调用回调进行处理并返回这个数值
  77.     res = arr.map(item=>item)
  78.     console.log(res)
  79.     //过滤
  80.     arr = [1,2,3,4,5]
  81.     res = arr.filter(item => item % 2)
  82.     console.log(res)
  83.     //归并 reduce()
  84.     reduce(callback(prev,curr))
  85.     arr = [1,2,3,4,5]
  86.     res = arr.reduce((prev,curr)=>{
  87.         //console.log(prev,curr)
  88.         return prev + curr
  89.     })
  90. </script>

json

1.JSON 是什么

  • JSON:独立与任何编程语言，几乎所有编程语言都提供访问JSON 数据 API 接口
  • JSON 是一种语法，用来序列化其他语言创建的数据类型
  • JSON 仅支持6种数据类型，对象，数组，数值，字符串，布尔值，null
  • JSON 只是借用了 JS 中的一些数据表示语法，与JS并无关系

2. JSON 数据类型

序号 类型 描述
1 简单值 数值，字符串，布尔，null
2 复合值 对象，数组 
  1. 注意:不支持undefined (因为除JS外，其他语言中没有这个东西)

3. JS 解析JSON 的 API

序号 方法 描述
1 JSON.stringify() 将JS对象,序列化JSON字符串
2 JSON.parse() 将JSON 字符串，解析为JSON 对象 
  1. <script>
  2. //JSON : stringify(data,replacer,space):将js数据转为JSON
  4. console.log(JSON.stringify(3.13),typeof JSON.stringify(3.14))
  5. //字符串 必须加引号
  6. console.log(JSON.stringify("php.cn"),typeof JSON.stringify("php.cn"))
  7. //true 不用加引号
  8. console.log(JSON.stringify(true),typeof JSON.stringify(true))
  9. //null 不用加引号
  10. console.log(JSON.stringify(null),typeof JSON.stringify(null))
  11. // object
  12. //JSON 对象的属性必须加双引号，字符串也必须加引号
  13. console.log(JSON.stringify({x:'a',y:'b'}))
  14. //arrat
  15. console.log(JSON.stringify([1,2,3]),typeof JSON.stringify([1,2,3]))
  16. //JSON 其实不是数据类型，只是一个具有特殊格式的字符串而已
  18. /*会对json 格式字符串的特殊操作，主要通过后面二个参数
  19. 第二个参数支持 数组 和函数*/
  21. //数组
  22. console.log(JSON.stringify({a:1,b:2,c:3}))
  23. console.log(JSON.stringify({a:1,b:2,c:3},['a','b']))
  25. //函数
  26. console.log(JSON.stringify({a:1,b:2,c:3},(k,v)=>{
  27.     // 将需要过滤掉的数据直接返回undefined
  28.     if(v<2) return undefined
  29.     return v
  30. }))
  31. // 第三个参数，用来格式化输出的json字符串
  32. console.log(JSON.stringify({a:1,b:2,c:3},null,2))
  33. console.log(JSON.stringify({a:1,b:2,c:3},null,***))
  35. //JSON.parse(str,reviver),将JSON转为JS对象
  36. let obj = JSON.parse(`{"a":1,"b":2,"c":3}`)
  37. console.log(obj,typeof obj)
  38. console.log(obj.a,obj.b,obj.c)\
  39. //第二个参数可以对JSON的数据进行处理后再返回
  40. obj = JSON.parse(`{"a":1,"b":2,"c":3}`,(k,v)=>{
  41.     //JSON 对象是由内向外解释
  42.     if(k==="") return v
  43.     return v*2
  44. })
  45. console.log(obj)
  46. </script>

Ajax 异步请求

特别提示：异步请求不要使用live server 插件，必须创建一个本地服务器

1. 同步与异步

  • 以前前端请求，后端响应为例
    • 同步：前端发请求，必须等到后端响应完成，才允许发送另一个请求
    • 异步：前端发请求后不等待后端响应结果继续执行，后端响应完成通过事件通知前端处理

2. XMLHttpRequest 对象

XMLHttpRequest 是浏览器对象，而非JS内置对象

2.1 xhr 请求步骤

  1. 创建 xhr 对象：const xhr = new XMLHttpRequest()
  2. 配置 xhr 参数：xhr.open(type,url)
  3. 处理 xhr 响应 xhr.onload = (…) => {…}
  4. 发送 xhr 请求：xhr.send(…)

2.2 xhr 对象常用属性

序号 方法 描述
1 responseTyep 设置响应类型
2 response 响应正文

2.3 xhr 对象常用方法

序号 方法 描述
1 open(type,url) 配置请求参数
2 send(data/null) 发送请求

2.4 xhr 对象常用事件

序号 事件 描述
1 load() 请求成功
2 error 请求失败

手册地址
https://developer.mozilla.org/zh-CN/docs/Web/API/xmlhttprequest

3. FormData 对象

FormData表单数据构造器

序号 方法 描述
1 append(name,value) 请求成功
2 delete(name) 请求失败

参考地址
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

4. get / post 区别

  • get 是url 传参，post 是request body 请求体传参
  • get 回退无影响，post 回退会重复提交
  • get 生成的 url 可做书签，post 不可以
  • get 只能对 url 进行编码，post 支持多种编码
  • get 请求参数会保留再历史记录中，post 参数不保留
  • get 参数长度首先，post 无限制
  • get 只接受 ascii 码字符，post 无限制
  • get post 底层实现是一致的，都是基于 http 协议
  • get 也可以带上 request body, post 也可以带上 url 参数
  • get 产生一个 tcp 数据包，post 产生二个 tcp 数据包
  • get 产生一个请求，post 产生二个请求
  • get 请求，浏览器将 header,data 一起发出，服务器响应 200 成功
  • post 请求，浏览器先发出 header,得到响应 100 continue，再发出data,得到响应 200
  • 并非所有浏览器的post 都产生二次 http 请求，Firefox 就产生一次

5. 跨域

  • CORS ： 跨域资源共享
  • 跨域请求可以是get,也可以是post ,只不过get 居多
  • cors-post 时，需要再服务器端进行头部设置
  • jsonp 只能时 get
  1. <script>
  2. // get 请求
  3.     const btn = document.querySelector('button')
  5.     btn.onclick = () => {
  6.         // 1. 创建 xhr 对象
  7.         const xhr = new XMLHttpRequest()
  8.         // 2. 配置xhr 参数
  9.         xhr.open('get', 'php/text1.php?id=2')
  10.         xhr.responseType = 'json'
  11.         //  3.处理xhr 响应
  12.         //成功
  13.         xhr.onload = () => {
  14.             console.log(xhr.response)
  15.             //dom:将响应结果渲染到页面
  16.             let user = `${xhr.response.name}(${xhr.response.email})`
  17.             document.querySelector('p').innerHTML = user
  18.         }
  19.         xhr.onerror = () => console.log('Error');
  20.         // 4. 发送 xhr 请求
  21.         xhr.send(null)
  22.     }
  23. </script>

get 请求

  1. // post 请求
  3.   <form action="" method="POST" id="login">
  4.         <label class="title">用户登录</label>
  5.         <label for="email">邮箱:</label>
  6.         <input type="email" name="email" id='email'>
  7.         <label for="password">密码:</label>
  8.         <input type="password" name="password" id='password'>
  9.         <button>提交</button>
  10.         <span class="tips"></span>
  11.     </form>
  12. </body>
  14. <script>
  15.     const form = document.querySelector('#login')
  16.     const btn = document.querySelector('button')
  17.     const tips = document.querySelector('.tips')
  19.     btn.onclick = () => {
  20.         // ev.preventDefault()
  21.         //创建 xhr 对象
  22.         const xhr = new XMLHttpRequest()
  23.         // 配置 xhr 参数
  24.         xhr.open('post', 'php/text2.php')
  25.         // 处理 xhr 响应
  26.         xhr.onload = () => (tips.innerHTML = xhr.response)
  27.         // 发送 xhr 请求
  28.         xhr.send(new FormData(form))
  29.     }
  30. </script>

post

cors ：跨域资源共享

  • 同源策略：为请求安全，浏览器禁止通过脚本发起一个跨域的请求
  • 只允许通过脚本发起基于同源的请求
  • 同源指：协议相同，域名/主机名相同，端口相同
上一条：JavaScript 急速入门之槅门窥视下一条：JS中常用的数组函数JSON函数和跨域问题解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多