重塑网页交互新篇章：Ajax三种方法的实战指南

椰汁332024-05-18 21:45

前言

什么是ajax？

Ajax，全称为Asynchronous JavaScript and XML（异步JavaScript与XML），是一种网页开发技术，它使得网页能够在不重新加载整个页面的情况下与服务器交换数据并局部更新页面内容。这一技术极大地提高了用户体验，因为它让用户感觉网页响应更快、交互更流畅。

  • 一种异步的创建交互式网页的技术(允许网页在不完全刷新的情况下与服务器交换数据并更新部分内容)。

关键特性：

  • 异步（Asynchronous） ：这是Ajax的核心，意味着在执行Ajax请求时，用户仍然可以继续与网页的其他部分交互，而不会因为等待服务器响应而造成页面"冻结"。
  • 后台数据交换：Ajax使得浏览器在后台与服务器进行数据交换，这些数据可以是XML、JSON、HTML或者其他格式，但JSON因其轻量和易于解析的特性，现已成为最常用的格式。
  • 局部更新：通过JavaScript操作DOM（文档对象模型），可以只更新页面的部分内容，而不是整个页面重绘，提高了效率和用户体验。
  • 技术组合：Ajax并不是一个新的编程语言，而是利用现有的Web技术（如JavaScript、XML、HTML、CSS以及XMLHttpRequest对象）的一种新方式。

工作流程：

  • 用户交互：用户触发一个事件，比如点击按钮。
  • JavaScript调用：浏览器中的JavaScript代码创建一个XMLHttpRequest对象，并向服务器发送一个请求。
  • 服务器处理：服务器接收到请求后处理数据，可能查询数据库，然后返回响应，这个响应通常是JSON或XML格式的数据，也可以是HTML片段。
  • 客户端接收：JavaScript接收到来自服务器的响应，并通过DOM操作来更新页面的指定部分，展示新的数据或结果。

正文

通过连接后端来爬取电影数据，后端接口：https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get，设置一个按钮来通过点击该按钮实现将爬取到的电影数据通过无序列表展示出来。

html

xml 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button id="btn">获取电影列表</button>
    <ul id="list">

    </ul>
</body>
</html>

readyState为ajax的状态，不同的数值为不同的状态

  • 0 -- xhr刚创建
  • 1 -- open执行
  • 2 -- 请求发送出去，响应头被接收
  • 3 -- 响应体正在解析
  • 4 -- 解析完成

status为状态码

  • 1xx（信息性状态码） : 表示接收的请求正在处理。例如，100 Continue 表示请求可以继续。

  • 2xx（成功状态码） : 表示请求已成功被服务器接收、理解，并接受。最常见的如：

    • 200 OK: 请求成功，服务器已成功处理请求。
    • 201 Created: 请求成功并且服务器创建了新的资源。
    • 204 No Content: 服务器成功处理了请求，但不需要返回任何实体内容。

  • 3xx（重定向状态码） : 需要客户端采取进一步的操作才能完成请求。例如：

    • 301 Moved Permanently: 请求的资源已永久移动到新位置。
    • 302 Found: 临时重定向，资源临时位于其他位置。
    • 304 Not Modified: 资源未修改，可以直接使用缓存。

  • 4xx（客户端错误状态码） : 表示客户端的请求有误。例如：

    • 400 Bad Request: 服务器无法理解请求的格式。
    • 401 Unauthorized: 请求要求用户的身份认证。
    • 403 Forbidden: 服务器理解请求客户端的请求，但是拒绝执行此请求。
    • 404 Not Found: 服务器无法找到请求的资源。

  • 5xx（服务器错误状态码） : 表示服务器在处理请求的过程中发生了错误。例如：

    • 500 Internal Server Error: 服务器遇到了不知道如何处理的情况。
    • 502 Bad Gateway: 作为网关或代理工作的服务器从上游服务器收到了无效的响应。
    • 503 Service Unavailable: 服务器目前无法使用（由于超载或停机维护）。

XMLHttpRequest

思路：

  • 通过id来获取btn的按钮元素，并将其命名为btn，为其绑定一个监听事件，当点击该按钮的时候，触发回调函数；
  • 通过id来获取ul的列表元素，实现将爬取到的电影数据通过li显示在ul里；
  • 在回调函数中，通过new XMLHttpRequest()来创建一个ajax实例xhr；
  • 通过给xhr配置了请求的方法（GET）、请求的URL(上述给出了后端接口)以及是否异步执行（true表示异步）；
  • xhr发送Ajax请求到服务器；
  • xhr调用XMLHttpRequest对象的onreadystatechange事件绑定一个事件处理函数来监听请求的过程，该函数会在请求状态改变时被调用；
  • 判断xhr的状态码是否为4，为4则表示解析完成，再判断状态码status是否为200；
  • 满足上述条件后，通过使用JSON.parse(xhr.responseText)解析从服务器得到的响应文本为JavaScript对象，并获取里面的movieList对象；

xhr.responseText为：

JSON.parse(xhr.responseText)为：

movieList为：

  • 通过遍历movieList对象并创建li，将其的innerText设置为获取到的电影的名字和演员，再将li加入ul中。
ini 复制代码 
 <script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 
       btn.addEventListener('click',() => {
        // 朝一个接口发请求，获取到数据展示在页面上

        let xhr = new XMLHttpRequest(); // 创建一个ajax实例
        xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true); // 配置发送的参数  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;
                ul.appendChild(li);
            }
           }

        }
      })
    </script>

jquery

导入jquery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

思路：

  • 通过id来获取btn的按钮元素，并将其命名为btn，为其绑定一个监听事件，当点击该按钮的时候，触发回调函数；
  • 通过id来获取ul的列表元素，实现将爬取到的电影数据通过li显示在ul里；
  • 在回调函数中，通过$.ajax({ ... }) 使用jQuery的$.ajax方法来发起Ajax请求；
  • 设置请求的URL地址，上面给出了后端接口，method为设置请求的方法为GET，是一个获取数据的请求， data 设置发送给服务器的数据对象，这里指定的username和age，会在检查栏的网络中的载荷中显示出来，实际上在这个GET请求中，这些数据并不会以这种方式附加到URL上。在实际应用场景中，如果是POST请求或需要在URL中附加查询参数的GET请求，这部分会有不同的处理方式；
  • success是一个回调函数，当Ajax请求成功完成（HTTP状态码为200系列）时被调用，res参数是服务器返回的数据，通常是一个JSON对象； res为：
  • 获取代码解析返回的JSON对象中的movieList数组。
  • 通过循环遍历movieList数组，为每个电影创建一个<li>元素，并设置其文本内容为电影名和演员，然后将这些<li>元素追加到页面上的无序列表ul中。
ini 复制代码 
  <script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 

      btn.addEventListener('click',() => {
        $.ajax({
            url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
            method: 'GET',
            data: {
                username:'椰汁',
                age:18
            },
            success: function(res) {
            const movieList = res.movieList；
            for (let i = 0; i < movieList.length; i++) {
                const li = document.createElement('li');
                li.innerText = movieList[i].nm + '--' + movieList[i].star;
                ul.appendChild(li);
            }
            }
        })
      })
    </script>

fetch

思路：

  • 通过id来获取btn的按钮元素，并将其命名为btn，为其绑定一个监听事件，当点击该按钮的时候，触发回调函数；
  • 通过id来获取ul的列表元素，实现将爬取到的电影数据通过li显示在ul里；
  • 在回调函数中，通过fetch("...") 发起一个HTTP GET请求到指定的URL（上面给出后端接口），URL中包含了查询字符串(username='椰汁'&age=18)，用于传递参数，在实际应用中可能用于服务器端的某些处理或过滤；
  • 通过.then((res) => {...}) fetch返回一个Promise，当请求成功完成时，第一个.then会被调用，传入的参数res是Response对象，代表了来自服务器的响应； 响应体res为：
  • 将响应体转换为JSON格式的Promise对象，因为原始响应体可能不是JavaScript可以直接操作的格式，然后返回；
  • 再通过第二个.then((data) => {...}) 在前一个Promise成功解析（即JSON数据准备好后）被调用，参数data是经过解析后的JSON数据，获取data中的movieList数组； data为：
  • 通过循环遍历movieList数组，为每个电影创建一个<li>元素，并设置其文本内容为电影名和演员，然后将这些<li>元素追加到页面上的无序列表ul中。
xml 复制代码 
<script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 

      btn.addEventListener('click',() => {
        fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='椰汁'&age=18")
        .then((res) => {
            return res.json(); // 格式化响应体
        }).then((data) => {
           const movieList = data.movieList;
            for (let i = 0; i < movieList.length; i++) {
                const li = document.createElement('li');
                li.innerText = movieList[i].nm + '--' + movieList[i].star;
                ul.appendChild(li);
            }
        })
      })
    </script>

结语

上面介绍的三种连接后端的ajax方法你更喜欢哪一种呢？快来给我留言吧如果觉得小编分享的内容还不错的话，记得给小编的文章点点赞加收藏哦

相关推荐
m0_548514771 分钟前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
AndrewPerfect2 分钟前
xss csrf怎么预防？
前端·xss·csrf
Calm5505 分钟前
Vue3：uv-upload图片上传
前端·vue.js
浮游本尊9 分钟前
Nginx配置：如何在一个域名下运行两个网站
前端·javascript
m0_748239839 分钟前
前端bug调试
前端·bug
m0_7482329212 分钟前
[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结
前端·搜索引擎
新中地GIS开发老师17 分钟前
《Vue进阶教程》（12）ref的实现详细教程
前端·javascript·vue.js·arcgis·前端框架·地理信息科学·地信
m0_7482495419 分钟前
前端：base64的作用
前端
html组态25 分钟前
web组态可视化编辑器
前端·物联网·编辑器·web组态·组态·组态软件
～央千澈～33 分钟前
如果你的网站是h5网站，如何将h5网站变成小程序-除开完整重做方法如何快速h5转小程序-h5网站转小程序的办法-优雅草央千澈
前端·apache
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）