使用Xhr 发起GET数据请求

思路:

1.创建xhr

2.调用open

3.调用send()

4.监听 onreadystatechange

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <script>
        //创建xhr
        var xhr = new XMLHttpRequest()
        //调用open 函数
        xhr.open("GET", 'http://www.liulongbin.top:3006/api/getbooks')
        //调用send 函数
        xhr.send()
        //监听onreadystatechenge
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText)
            }
        }
    </script>
</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`$get` 和 `$ajax` 是 jQuery 提供的两个方法,用于发起 AJAX 请求。而 XHR 是原生的 JavaScript 对象,用于在浏览器中进行异步数据交换。 `$get` 是 jQuery 中的简化版 AJAX GET 请求方法,用于从服务器获取数据。以下是使用 `$get` 发起 GET 请求的示例: ```javascript $.get('/api/data', function(response) { console.log(response); }); ``` `$ajax` 是 jQuery 提供的更灵活和全面的 AJAX 请求方法,可以用于各种类型的请求(GET、POST、PUT 等)。以下是使用 `$ajax` 发起 GET 请求的示例: ```javascript $.ajax({ url: '/api/data', method: 'GET', success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); ``` 通过指定不同的属性(如 `url`、`method`、`success`、`error` 等),可以对请求进行更精确的控制。 与此相比,XHR 是原生 JavaScript 提供的对象,用于发送和接收 HTTP 请求。以下是使用 XHR 发起 GET 请求的示例(与之前给出的示例相同): ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); console.log(response); } }; xhr.send(); ``` XHR 提供了更底层的控制和更多的事件处理选项,但相对而言,使用 `$get` 和 `$ajax` 方法更简洁和易于使用。同时,jQuery 的 AJAX 方法还提供了更多的功能和兼容性处理,例如处理跨域请求、自动解析 JSON 等。 需要注意的是,`$get` 和 `$ajax` 方法需要引入 jQuery 库,而 XHR 是原生 JavaScript 的一部分,无需额外引入。选择使用哪个方法取决于你的需求和项目的环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值