day23 Ajax（同步异步、ajax编写步骤）

目录

1.AJAX的概念及优势

2.同步与异步

3.ajax的编写步骤

---

1.AJAX的概念及优势

* 什么是AJAX
    * AJAX（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），中文名：阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
    * AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
    * 前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

* 为什么要使用AJAX
    * 更自然、流畅的用户体验，对用户的操作即时响应
    * 在不中断用户操作的情况下与Web服务器进行通信
    * 更灵敏的响应用户访问，实现近似于桌面应用程序的交互效果
    * 通过局部更新页面降低网络流量，提高网络的使用效率

自己语言总结：

Ajax是可以加载部分页面的技术，不用加载整个页面，就可以节省网络流量，提高效率。对用户操作可以做出即时响应。

2.同步与异步

同步：代码按照顺序一步一步执行，遇到需要消耗等待时间的代码块，会阻塞代码执行

异步：遇到需要消耗事件的代码块，非阻塞程序执行，先去执行后续代码

异步代码：和消耗等待时间有关

a.定时器

b.事件体

c.发送请求和接受响应

注意：当同步代码与异步代码同时存在时，同步代码优先执行，与书写顺序无关

具体来说，异步运行机制如下：
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

3.ajax的编写步骤

1.创建XMLHttpRequest对象

let request=new XMLHttpRequest();

2.设置请求参数

request.open("请求的方式get/post","请求的地址",true);

3.调用send方法

request.send();

4.onreadstatechange事件

<script>
    //ajax的编写步骤--->打电话
    //1.掏手机--->创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest();
    //2.拨号--->调用open方法
    //xhr.open("请求的方式get/post","请求的地址",true);
    xhr.open("get", "4.ajaxStep.txt", true);
    //3.发射--->调用send方法
    xhr.send();
    //4.等待接通--->onreadystatechange事件
    xhr.onreadystatechange = function() {
        //xhr.status == 200等价于电话打通，嘟嘟嘟
        //xhr.readyState == 4等价于接电话了
        if (xhr.status == 200 && xhr.readyState == 4) {
            //5.返回信息--->xhr.responseText
            fun(xhr.responseText);
        }
    }

    function fun(resText) {
        let oSpan = document.querySelector("span");
        oSpan.innerHTML = resText;
    }
</script>