JavaScript中的ajax

2021/10/25 9:09:55

编程Tag： javascript ajax 请求 var console xhr log

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript中的ajax

JavaScript中的ajax

1、如何创建一个ajax请求

2、ajax中的IE缓存问题

3、网络请求超时与网络异常

4、ajax解决重复请求问题

5、跨域

5.1、同源策略

5.2、如何解决跨域问题

5.2.1 jsonp的方式

5.2.2 设置CORS，跨域资源共享

5.2.3 使用代理服务器

相关编程文章