AJAX基础 - 爱码网

AJAX（Asynchronous Javascript and XML） Asynchronous 异步是一套API核心提供的类型：XMLHttpRequest

AJAJ（Asynchronous Javascript and JSON）

浏览器提供的一套API，可以通过JavaScript调用，实现通过代码控制情请求与响应，实现网络编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <script>
        //初始化，请求代理对象
        var xhr = new XMLHttpRequest();
        // console.log(xhr.readyState);
        
        //方法已调用，建立一个与服务端 例（80） 端口的连接 
        xhr.open('GET','AJAX.PHP');
        // console.log(xhr.readyState);
        //开始请求
        xhr.send();
        xhr.addEventListener('readystatechange', function(){
            // if(this.readyState != 4) return;
            // console.log(this.responseText);
            console.log(xhr.readyState);
            switch (this.readyState){
                case 2:
                    // console.log(this.readyState);
                    //已经接收到了响应报文的响应头
                    console.log(this.getAllResponseHeaders());
                    // date: Tue, 12 Mar 2019 03:49:48 GMT
                    // server: Apache/2.4.38 (Win64) OpenSSL/1.1.1a PHP/7.3.2
                    // connection: Keep-Alive
                    // x-powered-by: PHP/7.3.2
                    // content-length: 4
                    // keep-alive: timeout=5, max=99
                    // content-type: text/html; charset=UTF-8
                    console.log(this.getResponseHeader('server'));
                    console.log(this.responseText);
                    break;
                case 3:
                    // 正在下载响应的响应体,有可能为空，也有可能不完整
                    //在这里处理响应体不保险，（不可靠）
                    console.log(this.responseText);//响应体
                    break;
                case 4:
                    //一切OK,（整个响应报文已经完整下载下来了）
                    console.log(this.readyState);//响应状态码
                    break;   
            }
        })
    </script>
</body>
</html>

AJAX基础

.oreadystatechange这个事件并不是只在响应时触发，状态改变就触发

==========================================================================================

<script>
        
        // var xhr = new XMLHttpRequest();
        // xhr.open('GET','/AJAX.php');
        // xhr.send(null);
        // //onload 是HTML5中提供的XMLHttpRequest v2.0定义的
        // xhr.onload =function(){
        //     console.log(this.readyState);//4
        //     console.log(this.responseText);//响应体
        // }
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST','AJAX.php');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urkencoded');
        xhr.send('k1=v1&k2=v2');

        // xhr.setRequestHeader('Content-Type','application/json');
        // xhr.send('{"k1":"v1","k2":"v2"}');


</script>