重塑网页交互新纪元：Ajax技术的深度探索与应用实践

Delighted
132 阅读4分钟

在互联网技术飞速发展的今天，用户对网页体验的要求越来越高，他们期望在不离开当前页面的情况下完成更多操作。正是这样的需求推动了Ajax（Asynchronous JavaScript and XML）技术的发展与普及。Ajax允许网页在后台与服务器交换数据，从而实现页面的局部更新，无需完全刷新整个页面。本文（以获取电影列表为例）将深入探讨Ajax的工作原理、优势、基本用法以及如何在现代Web开发中应用这一技术。

Ajax基础概念

Ajax的核心在于“异步”二字，它利用JavaScript的XMLHttpRequest对象（或Fetch API等现代替代方案）在后台与服务器通信，获取或提交数据，同时不影响用户的界面交互。尽管名字中带有XML，但实际上Ajax可以传输任何形式的数据，包括JSON、HTML片段等。

工作原理

Ajax的核心在于异步通信。当用户触发某个事件（如点击按钮）时，JavaScript会通过XMLHttpRequest对象向服务器发送请求。此时，页面不会刷新，用户仍然可以继续与页面交互。服务器接收到请求后，处理并返回所需的数据，可能是XML、JSON或其他格式。JavaScript接收数据后，可以在页面的某个局部更新内容，无需重新加载整个页面。

应用实践

本次我将以获取电影列表为例。

    <button id="btn">获取电影列表</button>
    <ul id="ul">
    </ul>

创建一个button用于点击发生AJAX请求，ul用于存放获取到的电影列表数据。那么我们首先应该拿到这两个元素，给button添加事件，给ul添加li存放数据。

    let btn = document.getElementById("btn");
    let ul =document.getElementById("ul");
    btn.addEventListener("click", () => {
        ul.appendChild(li)
    }

主要的框架已经搭建好了，接下来就是该考虑如何拿到数据。

  • 需要创建一个AJAX的实例。
  • 设置请求参数，发送请求。
  • 检测请求的阶段，请求完成后，将返回数据转成JSION数组的格式。
  • 遍历数组提取需要的数据，添加到ul中。
    //朝后端发一个请求，获取到需要的数据
    let xhr = new XMLHttpRequest();//创建了一个AJAX实例
    xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true);//设置请求参数
    xhr.send();//发送请求
    xhr.onreadystatechange = () => {//检测请求的每个阶段
    if (xhr.readyState == 4 && xhr.status == 200) {
        const movieList=JSON.parse(xhr.responseText).movieList;
        for(let i =0;i<movieList.length;i++){
            const li=document.createElement('li')
            li.innerText=`${movieList[i].nm}--${movieList[i].star}`//movieList[i].nm+"--"+movieList[i].star
            ul.appendChild(li)
         }
     }

拓展

在Web开发中，fetch、jQuery（特别是其.ajax方法）、axios都与AJAX（异步JavaScript和XML）概念紧密相关，它们都是实现AJAX请求的不同方式。AJAX允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分内容，从而提升用户体验。

Fetch

Fetch API是JavaScript语言原生支持的一个接口，用于获取资源，如从服务器获取数据。它使用Promises处理异步操作，使得代码更加简洁和易于理解。Fetch虽然不是AJAX的直接封装，但它实现了AJAX的核心理念，即异步数据传输，且提供了更现代和强大的功能，比如对请求和响应主体的流式处理能力。

<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData(){
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
  .then((res)=>{
      return res.json();
  })
  .then((data)=>{
    console.log(data)
        })
        }
    </script>
</body>

jQuery.ajax

jQuery的.ajax方法是对原生XMLHttpRequest的封装，使得发起AJAX请求变得更加简单和跨浏览器兼容。它提供了一套丰富的配置选项，允许开发者灵活地设置请求类型（GET、POST等）、数据格式、错误处理等，非常适合那些已经集成jQuery库的项目。使用jQuery的.ajax方法，开发者不需要直接操作XMLHttpRequest对象，降低了学习曲线。

<body>
    <button onclick="getData()">获取电影数据</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        function getData(){
            $.ajax(
                {
                    url:'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
                    method:'GET',
                    data:{
                        name:'张三',
                        age:25
                    },
                    success:function(data){
                        console.log(data);
                    }
                }
            )
        }
    </script>
</body>

Axios

Axios是一个基于Promise的HTTP库，它可以用于浏览器和Node.js环境，专注于网络请求。Axios的设计理念是尽可能简单易用，同时提供强大的功能，如拦截请求和响应、转换请求和响应数据、取消请求等。虽然Axios是相对独立的库，但它完全符合AJAX的概念，即在后台与服务器交换数据而不干扰用户界面。

<body>
    <button onclick="getData()">获取数据</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function getData(){
            axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
  .then((res)=>{
      console.log(res.data);
  })
        }
    </script>
</body>

总结

Ajax技术的引入，标志着Web应用开发进入了一个新的时代，它打破了传统网页的局限，为用户带来了前所未有的互动体验。随着技术的持续进步和新标准的涌现，Ajax的理念和实践将继续影响着Web开发的未来，成为构建现代、高效、互动式Web应用不可或缺的一部分。

avatar
文章
阅读
粉丝