使用Ajax发送http请求（get&post请求）

最新推荐文章于 2023-09-03 03:56:47 发布

weubiwube

最新推荐文章于 2023-09-03 03:56:47 发布

阅读量567

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/weubiwube/article/details/111463161

版权

使用Ajax发送http请求（get&post请求）

同步和异步的概念：
同步：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

1.同步：必须等待前面的任务完成，才能继续后面的任务。
2.异步：不受当前任务的影响。

流程比较：普通B/S模式（同步）AJAX技术（异步）
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

举例：
同步：打电话
异步：发消息聊天

Ajax 的概念：
Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤：
（1）创建异步对象。即 XMLHttpRequest 对象。
（2）设置请求的参数。包括：请求的方法、请求的url。
（3）发送请求。
（4）注册事件。 onreadystatechange事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）获取返回的数据。

Ajax 请求：
1.get 请求举例：
（1）index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>

<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btnAjax').onclick = function () {
        // 发送ajax 请求 需要 五步

        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);

                // 修改页面的显示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>

（2）02-ajax.php：

<?php
echo 'smyhvae';
?>

效果图：
在这里插入图片描述

weubiwube

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax发送http请求（get&post请求）

使用Ajax发送http请求（get&post请求）同步和异步的概念：同步：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。1.同步：必须等待前面的任务完成，才能继续后面的任务。2.异步：不受当前任务的影响。流程比较：普通B/S模式（同步）AJAX技术（异步）同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处
复制链接

扫一扫