深入浅出解析AJAX

春雨的雕刻时光

2020-03-05

AJAX完全依赖于XMLHttpRequest对象

GET请求

// 创建xhr对象
        var xhr = new XMLHttpRequest();
        // 监听xhr对象
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    console.log(xhr.responseText);
                }
            }
        }
        
        xhr.open("get", URL)
        xhr.send(null)

这里监听要写在send之前，先监听后向服务器发起请求，相反如果请求发出在监听则本末倒置，即便在开发上并无区别。

xhr对象一旦开始open，就有了readyState属性，readyState属性一旦发生改变，就能够触发onreadystatechange事件，所以要先监听，这也是所有轮子的标准模板。

在open时http请求并没有发出，直到send后才会发出。

readyState 状态

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

我们只会关心就绪状态为4时

浏览器执行到Ajax代码，发出了一个HTTP请求，欲请求服务器上的数据服务器的此时开始I/O，所谓的I/O就是磁盘读取，需要花一些时间，所以不会立即产生下行HTTP报文。

由于Ajax是异步的，所以本地的JavaScript程序不会停止运行，页面不会假死，不会傻等下行HTTP报文的出现。后面的JavaScript语句将继续运行。进程不阻塞。

服务器I/O结束，将下行HTTP报文发送到本地。

如果时post请求必须手动设置请求头，模拟form表单提交

xhr.open("post", URL)
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("name=" + encodeURIComponent("夏彬"))

这里尽量将中文转译，防止服务器错乱，后台程序语言，都能够自动处理转译。

每个XMLHttpRequest对象只能监听一条HTTP请求，直到这条请求结束，才能发起下一条，强行发起上一条请求会被注销。

因为同源策略所以XMLHttpRequest对象是不能跨域的，我们可以使用JSONP来跨域，JSON+Padding，用一种逆思维来跨域

fun({
    "result" : [
        {
            "name" : "小明",
            "age" : 12,
            "sex" : "男"
        },
        {
            "name" : "小红",
            "age" : 13,
            "sex" : "女"
        },
        {
            "name" : "小绿",
            "age" : 16,
            "sex" : "女"
        }
    ]
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fun(data) {
            console.log(data)
        }
    </script>
    <script src="jsonp.txt"></script>
</body>

</html>

我们可以将JSONP封装为轮子以达到正向编程的目的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        jsonp(‘jsonp.txt‘, "name=xiabin", "fun", function(data) {
            console.log(data)
        })

        function jsonp(URL, queryString, callbackName, callback) {
            // 将JSONP定义函数绑定到window上
            window[callbackName] = callback;
            var dom = document.createElement(‘script‘);
            dom.src = queryString ? URL + "?m=" + Math.random() + "&" + queryString : URL + "?m=" + Math.random();
            document.body.appendChild(dom)
            document.body.removeChild(dom);
        }
    </script>
</body>

</html>

当然如果一些数据不同源，且返回的不是JSONP数据，那么我们仍然可以使用服务器语言进行偷数据，现在很多网站都防偷。。。

例如：PHP中

<?php
    header("Content-Type:text/json;charset=gb2312");
    $phone = $_GET["phone"];
    $a = file_get_contents("http://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=".$phone);
    print_r($a);
?>

ajax