XMLHttpRequest续

最新推荐文章于 2024-08-08 10:15:42 发布

hcoke

最新推荐文章于 2024-08-08 10:15:42 发布

阅读量169

点赞数

分类专栏： ajax 文章标签： JavaScript ajax

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

版权

ajax 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用XHR发起post请求：

步骤：

1.创建XHR对象

var xhr = new XMLHttpRequest()

2.调用xhr.open函数

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

3.设置content-type属性（固定写法）

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

4.调用xhr.send()函数,同时指定要发送的数据将数据以查询字符串的形式提交给服务器。

xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

5.监听xhr.onreadystatechangge事件

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>
    <script src="../lib/jquery.js"></script>
</head>
<body>
    <script>
        //1.创建xhr对象
        var xhr = new XMLHttpRequest()
        //2.调用open函数
        xhr.open('post','http://www.liulongbin.top:3006/api/addbook')
        //3.设置content-type属性
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        //4.调用send函数
        xhr.send('bookname=唐僧西游传&author=史耐安&publisher=南安图书出版社')
        //5.监听 onreadystatechange事件
        xhr.onreadystatechange = function() {
        //注意这里的status与打印出来的status不是同一个status   这里的是http请求状态的一部分  而打印出来的那个status是数据的一部分
            if(xhr.readyState === 4 && xhr.status === 200) {
                //获取服务器相应的数据
            console.log(xhr.responseText)
        }
    }
    </script>
</body>
</html>