JavaScript中的ajax
2021/10/25 9:09:55
本文主要是介绍JavaScript中的ajax,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JavaScript中的ajax
1、如何创建一个ajax请求
var xhr = new XMLHttpRequest() xhr.responseType='json' // 指定数据发送格式以及数据发送地址 xhr.open('get','http://127.0.0.1/test') // 设置返回的数据格式 xhr.responseType = 'json' //设置预定义好的响应头 xhr.setRequestHeader('Content-Type',"xxxxx") //设置自定义响应头 xhr.setRequestHeader('name','test') // 向服务器发送数据,只能是post请求往里面发,内容为字符串 xhr.send() // 监听xhr的状态码的改变,然后进行一些操作 xhr.onstatereadychange = function() { console.log(xhr.status) // 状态码 console.log(xhr.statusText) // 状态描述 console.log(xhr.getAllResponseHeader) // 获取所有的响应头信息 console.log(xhr.response) // 返回响应 }
2、ajax中的IE缓存问题
2.1、问题描述
当我们请求服务器时,服务器端的数据返回到浏览器中,当服务器中的内容发生改变时,浏览器依然使用上一次保存的数据
2.2、解决办法
// 将url地址增加一个参数,使得每一次访问的地址都不同 var url = 'http://127.0.0.1/test?t='+Data.now()
3、网络请求超时与网络异常
var xhr = new XMLHttpRequest() // 超时设置,设置延时时间,以毫秒为单位 xhr.timeout = 2000
手动取消网络请求
var xhr = new XMLHttpRequest() // 取消网络请求 xhr.abort()
4、ajax解决重复请求问题
4.1、问题描述
有的时候用户会疯狂点击一个按钮,导致会发送多个请求
4.2、解决办法
用一个变量标志着ajax是否正在发送,下面是一个代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax重复请求问题</title> </head> <body> <button id="myButton">发送请求</button> </body> <script> var myButton = document.getElementById('myButton') var isSend = false myButton.click = function() { if (isSend) { xhr.abort() } var xhr = new XMLHttpRequest() xhr.open('get','http://127.0.0.1/queryAllBillWay') xhr.send() xhr.onreadystatechange = function() { isSend = true if (xhr.readyState === 4) { console.log(xhr.response) } } } </script> </html>
5、跨域
5.1、同源策略
1、同源策略最早是Netscape公司提出的,浏览器的一种安全策略。 2、同源:协议、域名、端口号必须完全相同 3、违背以上的规则就是跨域
5.2、如何解决跨域问题
5.2.1 jsonp的方式
就是使用script标签访问服务器,让后端返回一段js代码给浏览器运行,从而获得数据
5.2.2 设置CORS,跨域资源共享
在服务器端设置一个响应头 响应头,例如:Access-Control-Allow-Origin
5.2.3 使用代理服务器
例如nginx,vue中的proxy
这篇关于JavaScript中的ajax的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南