AJAX 基本结构

本文深入探讨了AJAX的工作原理,包括如何通过XMLHttpRequest对象实现与服务器的异步交互,详细解释了请求的构建、配置、发送及状态监听过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AJAX结构</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest(); // 1、 构建一个XMLHttpRequest实例对象
        xhr.onreadystatechange = function () {  // 4、 使用事件监听状态是否成功
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                console.log(JSON.parse(xhr.responseText))
            }
        }
        xhr.open(type, url, true);  // 2、 配置请求  
        xhr.send();  // 3、 发送
    </script>
</body>
</html>

一、构建一个XMLHttpRequest 实例对象,得到 xhr 对象

var xhr = new XMLHttpRequest();

二、配置请求、连接后台

xhr.open(type, url, true);

type:请求方式 ;分为 GET 和 POST 请求 (可根据需求使用其中一个,详细可参考它们之间的区别);

url:   接口的地址;(这个是有后台提供)

           这里需要注意的是get方式传值:在URL路径后加 ? 和数据 (如:a=1&b=2); post方式传值:不在路径URL上写数据而在                   send() 上发送数据  xhr.send( "username=" + name );使用send传输数据,需要先设置编码方式:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

true:异步(一起做)异步执行一般都有一个回调函数或监听函数,当异步完成之后执行;

false:同步(一件一件的做);

三、发送数据

xhr.send();

四、使用事件监听状态是否成功

xhr.onreadystatechange = function () { 
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                console.log(JSON.parse(xhr.responseText))
            }
}

把onreadystatechange放在open之前可以多监听一个状态 1 的状态;

readystate 请求状态 : 0 请求为初始化; 1 服务连接已建立; 2  请求已接收; 3 请求处理中;  4 请求已完成,且响应已结束;

                       所以为什么会在监听这里进行判断  xhr.readyState == 4

status  HTTP 状态码: 1xx  消息 ;  2xx  成功 (200);   3xx 缓存 ; 4xx   客户端错误,404请求失败 请求所希望得到的资源未被在服务器上发现;  5xx  服务器错误  

                       所以也会在监听这里进行判断  xhr.status == 200; 是否成功

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值