简介

JavaScript的Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript编写的异步数据交互技术。它通过在后台与服务器进行数据交换，使网页能够实现局部刷新而不需要整个页面重新加载。

通常情况下，当用户与网页进行交互时，浏览器会向服务器请求数据并在页面上展示。但是使用Ajax技术，可以在不刷新整个页面的情况下，通过JavaScript代码向服务器发送请求，并将返回的数据更新到页面上。

Ajax是基于XMLHttpRequest对象实现的，该对象允许异步处理HTTP请求和响应。当用户与网页进行交互时，JavaScript代码可以创建XMLHttpRequest对象，向服务器发送请求，接收响应，并更新页面上指定的部分内容。

相比传统的同步数据交互方式，Ajax具有更好的用户体验和更高的性能。因为用户不需要等待整个页面加载完成，而只需要等待数据请求和处理完成即可。同时，Ajax还可以优化网络流量和服务器负载，提高网站的性能和响应速度。

优点

JavaScript的Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式、动态网页应用的技术。它可以在不重新加载整个页面的情况下，通过异步通信与服务器进行数据交换，从而实现局部刷新和动态更新页面内容。

实现Ajax的关键是XMLHttpRequest对象，它允许浏览器通过JavaScript发起HTTP请求，并在后台接收和处理响应。通过Ajax，网页可以向服务器发送请求，获取数据，然后使用JavaScript动态更新页面内容，而不需要重新加载整个页面。

Ajax的优点包括：

提升用户体验：由于Ajax可以在后台进行数据交换，因此用户无需等待整个页面重新加载，从而提高了用户体验和页面响应速度。
减少带宽消耗：相比传统的页面刷新方式，Ajax只需要传输必要的数据，可以减少网络带宽的消耗，特别是在移动设备上效果更为显著。
提高性能：通过Ajax局部刷新页面内容，可以减轻服务器负载，减少不必要的数据传输和页面渲染，从而提高网站性能。
实现动态交互：Ajax使得网页可以实现动态更新，例如实时搜索提示、无刷新表单提交、动态加载内容等，增强了用户与网页的交互性。
支持多种数据格式：除了XML，Ajax还支持其他数据格式，如JSON，使得数据交换更加灵活多样化。

总之，JavaScript的Ajax技术在Web开发中具有重要意义，它提供了一种现代化的数据交互方式，极大地改善了用户体验和页面性能。

Ajax重要性

AJAX（Asynchronous JavaScript and XML）在 Web 开发中非常重要。它允许网页在不重新加载整个页面的情况下，通过异步方式从服务器获取数据并更新部分页面内容。这种能力使得用户能够在不受干扰的情况下与页面交互，并提供了更流畅的用户体验。

AJAX 的重要性体现在以下几个方面：

异步数据交互：AJAX 允许网页通过异步方式与服务器交换数据，从而动态地更新页面内容。这使得网页可以在后台进行数据请求和处理，而不会阻塞用户的交互。
提升用户体验：通过 AJAX 技术，网页可以在不刷新整个页面的情况下，实时地加载新的数据或更新部分内容，从而提升用户体验和页面的响应速度。
减少带宽消耗：由于 AJAX 可以仅请求和更新需要的数据部分，而不是整个页面，因此可以减少网络带宽的消耗，提高页面加载速度。
动态加载内容：AJAX 允许网页根据用户的操作动态加载内容，例如在搜索框中输入内容时实时显示相关搜索结果、无需刷新页面即可加载新的文章评论等。

总的来说，AJAX 技术对于创建交互性强、用户体验良好的现代网页非常重要，并且在 Web 开发中得到了广泛的应用。随着 Web 技术的发展，现在也有更先进的技术如 Fetch API 和 Axios 来取代传统的 XMLHttpRequest，但它们的本质思想仍然是基于 AJAX 的异步数据交互。

手写ajax

js 复制代码

<body>
    <script>
        // 手写ajax 跟业务相关  异步同步
        // - xhr对象
        // - 流程 open send onreadystatechange
        // - promise resolve reject 
        const fetchJSONData = function(url){
            // p 在开始的时候状态为pending
            return new Promise((resolve,reject)=>{//执行器 立即运行
                //耗时任务的容器
                console.log('hehe');
                //兼容性
                const xhr = 
                  XMLHttpRequest
                  ? new XMLHttpRequest()
                  :new ActiveXObject('Microsoft.XMLHTTP')

                xhr.open('GET',url,false)
                //宏任务
                xhr.onreadystatechange=function(){
                    if (xhr.readyState !== 4) return
                        // 叼一下 表现时间  304 NOT MODIFIED
                    if (xhr.status === 200 || xhr.status === 304){
                        resolve(xhr.responseText);
                    } else{
                        reject(new Error(xhr.responseText))
                    }

                }
                xhr.send()
               
            })
        };
        // 刚开始时，状态为pending ->resolved
        (async function(){
           
            const p = fetchJSONData('https://api.github.com/users/wkrwez/repos')
            console.log(p);
            const res = await p 
            console.log(p,res);
        })()
        //看返回的数据  json
        // 装插件
        // await fetchJSONData('')
    </script>
</body>

代码解释：

首先，定义了一个名为 fetchJSONData 的函数，它接收一个 URL 参数，用于获取该 URL 对应的 JSON 数据。该函数返回一个 Promise 对象，用于处理异步操作。

在函数体内部，创建一个 XMLHttpRequest 对象（兼容性处理），并使用 xhr.open 方法初始化一个 GET 请求，第三个参数设置为 true，表示使用异步方式发送请求。

然后，通过 xhr.onreadystatechange 设置一个回调函数，在每次 readyState 变化时被触发。readyState 为 4 表示请求已经完成。如果请求成功（状态码为 200 或 304），则调用 resolve 函数将响应的文本数据作为参数传递给它。否则，调用 reject 函数并传递一个包含错误信息的 Error 对象。

最后，通过 xhr.send 方法发送请求。

接下来，在一个立即执行的异步函数中，调用 fetchJSONData 函数，传入指定的 URL，并将返回的 Promise 对象赋值给变量 p。然后，使用 await 关键字等待 Promise 对象的状态变为 resolved 或 rejected。当 Promise 对象成功完成时，将获取到的数据赋值给变量 res。

在异步函数内部，可以使用 console.log 打印变量 p 和 res 的值，以观察 Promise 对象和最终获取的数据。

请注意，由于 fetchJSONData 函数是用于获取远程数据的示例，实际使用时应该考虑网络请求的安全性、异常处理等方面的问题。

会手写ajax，面试官都看你顺眼

简介

优点

Ajax重要性

手写ajax

代码解释：