6.1

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

AJAX如何工作

在这里插入图片描述
AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

XMLHttpRequest 是AJAX的基础
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

<body>
    <!--
        原生Ajax的实现流程：
            1.得到XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
            2. 打开一个请求
                xhr.open();
                //形参method表示的是请求方式，通常是get或post
                //第二个参数url是访问的地址，
                //async为是否是异步。true表示为异步，false表示同步。
            3.发送请求
            xhr.send(params);
                params：需要传递给后台的参数。POST请求的时候用
                    如果是GET请求，设置为null。(GET请求的参数设置在url后面)
                    如果是POST请求，无参数设置为null，有参数则设置参数
            4. 接收响应
            xhr.status 响应状态  200为响应成功，404资源未找到，500服务器异常
            xhr.reponseText 对应响应结果
        post请求需要服务器      

        xhr.readState值。0表示还没打开请求，1表示打开请求了但还没有发送，当去发送的时候，后台会接受2 3 4 ，2是接受请求但还没有处理，3是接受请求但没有处理完，4是接受请求并且已经处理完了。
        由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果。
        监听状态 xhr.onreadystatechange = function(){

        }
        只要有值的变化，就会调用这个函数
    -->
    <script>
         //得到XMLHttpReques对象
        function test01(){
            var xhr = new XMLHttpRequest();
            /*xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
            }*/
            //打开请求
            xhr.open("get","./data.json",false);//同步请求
            //写成data.json会报错
            //发送请求
            xhr.send(null);
        
            if (xhr.status == 200){
                console.log(xhr.responseText);
            }else{
                console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
            }
            console.log("异步请求。。");
        }
		//test01();
		
         function test02(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
            }
            //打开请求
            xhr.open("get","./data.json",true);//异步请求
			//异步的话信息是读不出来的
            //写成"data.json"会报错
            //发送请求
            xhr.send(null);

            if (xhr.status == 200){
                console.log(xhr.responseText);
            }else{
                console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
            }
            console.log("异步请求。。");
        }
        test02();
    </script>
</body>

Jquery Ajax No.1

6.1

AJAX如何工作