XMLHttpRequest

最新推荐文章于 2024-05-26 16:05:19 发布

hcoke

最新推荐文章于 2024-05-26 16:05:19 发布

阅读量760

点赞数

分类专栏： ajax 文章标签： ajax 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/124249459

版权

ajax 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

XMLHttpRequest，是浏览器提供的JavaScript对象，通过它可以请求服务器上的数据资源。之前所学的Jquery中的ajax函数，就是基于xhr对象封装出来的。

利用xhr发起get请求：

1.创建xhr对象。

var xhr = new XMLHttpRequest()

2.调用open函数，指定请求方式与url地址

xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')

3.调用send函数，发起ajax请求

xhr.send()

4.监听 onreadystatechange事件

xhr.onreadystatechange = function() {
    //监听xhr对象的请求状态  readyState  与服务器的相应状态 status
    if(xhr.readyState === 4 && xhr.status === 200) {
        //打印服务器相应回来的数据
        console.log(xhr.responseText)
    }
    
}

例子：

<!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>
</head>
<body>
    
</body>
<script>
    //1.创建xhr对象
    var xhr = new XMLHttpRequest()
    //2.调用open函数
    xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
    //3.调用send函数
    xhr.send()
    //4.监听 onreadystatechange事件
    xhr.onreadystatechange = function() {
        //注意这里的status与打印出来的status不是同一个status   这里的是http请求状态的一部分  而打印出来的那个status是数据的一部分
        if(xhr.readyState === 4 && xhr.status === 200) {
            //获取服务器相应的数据
            console.log(xhr.responseText)
        }
    }
</script>
</html>

xhr对象的onreadystate属性：

XMLHttpRequest对象的readystate属性，用来表示当前ajax请求所处的状态，每个ajax请求必然处于以下状态中的一个：

值	状态	描述
0	UNSET	HttpRequest对象已经被创建，但尚未调用open方法
1	OPENED	open方法已经被调用
2	HEADERS_RECEIVED	send方法已经被调用，响应头也已经被接收
3	LOADING	数据接收中，此时response已经包含有部分数据
4	DONE	Ajax请求完成，意味着数据传输已经彻底完成或失败

使用XHR对象发起带参数的get请求：

使用XHR对象发起带参数的get请求时，只需要在调用xhr.open期间，为url地址指定参数即可:

    xhr.open('get','http://www.liulongbin.top:3006/api/getbooks?id=1')

这种在url地址后面拼接的参数，叫做查询字符串。

什么叫查询字符串：

查询字符串是指在url末尾添加上用于向服务器发送信息的字符串(变量)。

格式：将英文的?放在url的末尾，再加上参数=值。想多加几个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到url中。

比如带两个参数：

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

get请求携带参数的本质：

无论使用$.get 还是$.ajax 又或者直接使用xhr对象直接发起get请求，当需要携带参数的时候，本质上都是直接将参数以字符串的形式，追加到url地址的后面，发送到服务器的。

$.get('url',{name: 'zs', age: 20}, function(){})  //等价于
$.get('url?name=zs&age=20', function(){})

$.ajax({method: 'get', url: 'url', data:{name: 'zs', age: 20}, success: function(){
 
}})
//等价于
$.ajax({method: 'get', url: 'url?name=zs&age=20',  success: function(){
 
}})

发起带参数的get请求：

<!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>
</head>
<body>
    <script>
        //1.创建xhr对象
        var xhr = new XMLHttpRequest()
        //2.调用open函数
        xhr.open('get','http://www.liulongbin.top:3006/api/getbooks?id=2338')
        //3.调用send函数
        xhr.send()
        //4.监听 onreadystatechange事件
        xhr.onreadystatechange = function() {
        //注意这里的status与打印出来的status不是同一个status   这里的是http请求状态的一部分  而打印出来的那个status是数据的一部分
            if(xhr.readyState === 4 && xhr.status === 200) {
                //获取服务器相应的数据
             console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>

hcoke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
XMLHttpRequest

XMLHttpRequest，是浏览器提供的JavaScript对象，通过它可以请求服务器上的数据资源。之前所学的Jquery中的ajax函数，就是基于xhr对象封装出来的。利用xhr发起get请求：1.创建xhr对象。var xhr = new XMLHttpRequest()2.调用open函数，指定请求方式与url地址xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')3.调用send函数
复制链接

扫一扫