XMLHttpRequest的基本使用

本文详细介绍了XMLHttpRequest(XHR)对象在JavaScript中的使用,包括如何发起GET和POST请求。通过创建XHR对象,调用open和send方法,以及监听readyState和status属性,可以获取服务器数据。示例代码演示了GET请求如何携带参数以及POST请求如何发送数据。
摘要由CSDN通过智能技术生成

什么是XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_16,color_FFFFFF,t_70,g_se,x_16

 

使用xhr发起GET请求

步骤:

  1. 创建xhr对象
  2. 调用xhr.open()函数
  3. 调用xhr.send()函数
  4. 监听xhr.onreadystatechange事件

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        // 创建XHR对象
        var xhr = new XMLHttpRequest();
        // 调用open函数 指定 请求方式 与 URL地址
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
        // 调用send函数
        xhr.send();
        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            //监听xhr对象的请求状态readyState 与服务器响应的状态status
            if (xhr.readyState === 4 && xhr.status === 200) {
                //打印服务器响应回来的数据
                console.log(xhr);
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

</html>

 

了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性用来表示当前Ajax请求所处的状态,每个Ajax请求必然处于一下状态中的一个

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16

 

使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可

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

这种在URL地址后面拼接的参数,叫做查询字符串

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr);
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

</html>

 

使用xhr发起POST请求

步骤:

  1. 创建xhr对象
  2. 调用xhr.open()函数
  3. 设置Content-Type属性(固定写法)
  4. 调用xhr.send()函数,同时指定要发送的数据
  5. 监听xhr.onreadystatechange事件

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        //创建xhr对象
        var xhr = new XMLHttpRequest();
        //调用open()
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
        //设置Content-Type属性(固定写法)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //调用send()函数,同时将数据以查询字符串的形式,提交给服务器
        xhr.send('bookname=你好你好&author=施耐庵&publisher=天津图书出版社');
        //监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

</html>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值