ajax详解

最新推荐文章于 2024-11-16 21:54:37 发布

凡尘堕世

最新推荐文章于 2024-11-16 21:54:37 发布

阅读量207

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_46073353/article/details/117922009

版权

什么是ajax

ajax 全名 async javascript and XML
AJAX 不是新的编程语言，而是是综合HTTP异步通信、js、xml、以及JSON等多种网络技术的一种编程模式。

AJAX优缺点

优点

页面局部刷新
可以充分利用客服端的闲置的处理能力，减轻服务器和网络传输的负担

缺点

破坏浏览器的机制，历史记录机制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.必须基于xhr对象，创建xhr对象
        var xhr = null;
        // xhr = new XMLHttpRequest();//w3c规范以后
        // xhr = new ActiveXObject("Microsoft.XMLHTTP")//IE5以下
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.绑定监听事件
        console.log("状态码：" + xhr.readyState)
        xhr.onreadystatechange = function(){
            console.log("xhr的状态码发生改变")
            console.log(xhr.statusText);
            console.log("状态码：" + xhr.readyState)//状态码 0 - 4
            // console.log(xhr.responseText) //服务端给我响应的数据
            console.log("响应码:" + xhr.status)//响应码 200
            if(xhr.readyState == 4 && xhr.status == 200){
                // 请求发生完成并且响应不成功
                console.log(xhr.responseText)
            }
            // readyState
            // 0 没有建立连接
            // 1 建立连接
            // 2
            // 3
            // 4 请求发送完成并且响应数据

            // status
            // 1xx 信息类错误
            // 2xx 成功 200  
            // 3xx 重定向  304
            // 4xx 客户端错误 404
            // 5xx 服务端错误
        }
        // 3.建立连接
        // xhr.open(method,url,boolean)
        xhr.open("GET","02.php",true); //0-1
        // 4.发送请求
        xhr.send()

        
    </script>
</body>
</html>