Ajax 事件异步

最新推荐文章于 2022-06-13 12:41:15 发布

李杠杠*

最新推荐文章于 2022-06-13 12:41:15 发布

阅读量1.5k

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_45823137/article/details/120935737

版权

本文详细介绍了Ajax技术的工作原理及其在提升用户体验中的作用，同时讲解了事件流的冒泡和捕获模型，以及如何阻止事件冒泡。此外，还对比了GET和POST请求的应用场景及差异，并列举了常见的HTTP状态码及其含义。最后，通过一个示例展示了XMLHttpRequest对象在发送HTTP请求中的步骤。

摘要由CSDN通过智能技术生成

一、

1、什么是Ajax：

答：Ajax是Asynchronous Javascript And XML的简称。Ajax是一种用来改善用户体验的技术，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、为什么使用Ajax：

答：1、Ajax可以使网页实现异步更新，网页应用能快速地将增量更新呈现在用户界面上，而不需要刷新整个页面，这使得程序可以快速地回应用户的操作。并且网页的一部分正试图重新加载时，用户的代码仍然可以运行，相比之下，同步操作会阻止代码的继续运行，直到这部分网页完成重新加载。2、Ajax允许只更新一个HTML页面的部分DOM，而无需加载整个页面。

二、

1、事件流包括冒泡和捕获两种模型。

冒泡：事件按照从目标元素到根元素（document对象）的顺序触发

捕获：事件按照从根元素（document对象）到目标元素的顺序触发

2、如何阻止事件冒泡：使用 stopPropagation() 方法阻止event事件冒泡即：event.stopPropagation();

三、

（1）GET请求和POST请求各自应用场景

1、GET请求：为了获取资源，用于获取信息类似于select，只是获取和查询数据，不会修改服务器上的数据。常用于查询数据而不修改数据的场景。GET比POST更不安全，参数直接暴露在url上，所以不能用来传递敏感信息。

2、POST请求：POST是为了向服务器端发送数据，类似于insert。POST多用来修改数据，当然也是可以用来仅仅获取数据。比GET安全性高，提交的数据不会暴露在url中。

（2）形式上的区别以及其它区别：1、GET请求的数据是放在HTTP包头中的，也就是URL之后。而POST的请求数据是放在HTTP正文的，也就造成了POST要比GET安全性高。即get一般将请求的参数放置在URL中，因此数据是不安全的，但也可以放到send请求数据中；post一般将请求的参数放置在请求数据中，数据是安全的，但也可以将请求的参数放在URL中。2、GET是明文，而POST是可以明文可以密文的。3、GET提交的数据数据长度较小，而POST支持较大数据的传输。4、GET只产生一个TCP数据包；POST产生两个TCP数据包。因此GET的访问速度更快一些。形式上有什么区别？

四、HTTP状态码常见的有

1、状态码为200：代表请求正常处理完毕。

2、状态码为404：页面丢失，未找到资源。

3、状态码为301：资源移动，所请求的资源自动到新的URL，浏览器自动跳转到新的URL。

4、状态码为304：服务端的资源与客户端上一次请求的一致，不需要重新传输，客户端使用本地缓存的即可。

5、状态码为500：服务器内部出现了错误。

6、状态码为501：服务器遇到一个错误，使其无法对请求提供服务。

五、

代码输出顺序是：5、3、6、2、1、4

分析：由于定时器是典型的异步任务，因此当满足触发条件，即轮询到该事件消息后执行对应的回调。

1、首先在整个页面中会先掠过一个异步任务400ms的定时器，定时器进入js任务列队中等待，延时执行先执行同步任务console.log(5)，输出5。

2、执行console.log(5)后执行的是f3()。调用f3函数，先 console.log(3);输出3，遇到异步任务定时器，500ms的定时器进入js任务列队中等待，延时执行。

3、 f3函数内部的定时器异步执行，接着执行console.log(6);输出6。

4、 400ms的定时器到时间后，会输出2。

5、 f3函数内部的定时器到时间后会执行f1（），输出1。

6、执行完f1（）函数，接着便执行console.log(4)，页面会输出4。

因此代码输出顺序是5、3、6、2、1、4。

六、

完成任务需要四步：

1、创建 XMLHttpRequest 对象实例

2、创建请求

3、设置事件回调处理函数

4、发送请求

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <script>
        // 第一步：不考虑浏览器兼容问题，创建XMLHttpReques对象
        var ajax = new XMLHttpRequest();
        // 第二步：创建请求
        function myURI(number) {
            var uri = "http://www.example.com/?tel=" + number;
            return uri;
        }
        var url = myURI(13822228888);
        ajax.open("get", url, true);
        // 第三步：接受响应执行回调函数
        ajax.onreadystatechange = function() {
                //接受数据成功条件为ajax.readyState == 4 && ajax.status == 200
                if (ajax.readyState == 4 && ajax.status == 200) {
                    //服务器响应的文本内容为字符串类型 
                    var txt = ajax.responseText;
                    //json数据解析为js对象
                    var data = JSON.parse(txt);
                    console.log(data);
                }
            }
        // 第四步：发送请求
        ajax.send(null);
    </script>
</body>

</html>

李杠杠*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax 事件异步

一、1、什么是Ajax：答：Ajax是Asynchronous Javascript And XML的简称。Ajax是一种用来改善用户体验的技术，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。2、为什么使用Ajax：答：1、Ajax可以使网页实现异步更新，网页应用能快速地将增量更新呈现在用户界面上，而不需要刷新整个页面，这使得程序可以快速地回应用户的操作。并且网页的一部分正试图重新加载时，用户的代码仍然可以运行，相比之下，同步操作会阻止代码的继
复制链接

扫一扫

Ajax 事件 异步

Ajax 事件异步