UtopiaXC Blog - AJAX
type: channel
link: https://blog.utopiaxc.com/tag/AJAX/
items: 使用jQuery AJAX来进行网页的异步加载

使用jQuery AJAX来进行网页的异步加载
type: item
date: 2020-11-22T17:54:00+08:00
description: 一、绪论在传统的动态网站中，用户在获取到网页文件之前，服务器的应用服务器（一般指PHP Server，Tomcat等）会对动态网站源代码进行编译运行，从而将运行的结果发送给用户。根据提交的表单的不同，所获得的网页文档也不尽相同。举一个简单的例子，下面的这段代码是从MySQL数据库中获取到用户信息并打印到前端： Test <?php $conn=new mysqli(); $sql=SELECT UID,Username FR.OM user;//把FR/OM拆开是因为被防火墙拦截了（雾 $result=$conn->query($sql); while ($row=$result->fetch_assoc()){ echo $row['UID'].:.$row['Username']; } ?> 然而，无论是查询数据库还是编译运行执行相应的php代码都是需要消耗一定的时间的。而在这段时间内，用户无法获取到网站文档，浏览器也不会进行页面的渲染，只有当所有的代码被执行结束后用户才会从服务器收到相应的文档，此后浏览器才会获取css和js文件进行渲染。显然，当一个页面内有大量的语句时，或数据库的数据量过大需要一定时间进行查询时，抑或是当网站处于高并发下都会导致用户请求到网站文档的速度下降甚至超时，严重影响用户访问体验。因此，在这种情况下，采用异步加载可以解决部分以上问题。比如用户可以先获取到网站文档，开始加载CSS、JS、媒体资源，与此同时再去请求相应的数据达到减少加载时间的效果。-二、什么是AJAXAJAX全称Asynchronous JavaScript and XML，即异步的JavaScript和XML技术。通过AJAX技术，访问者可以分批次的从服务器获取数据，即浏览器首先获取到HTML文档，然后加载文档内部的JS、CSS以及资源文件，而后通过JS访问服务器上的数据接口，访问成功后再将从接口中获取的数据展现在前端，实现异步加载-三、使用jQuery-AJAXAJAX实质上是一种技术，目前有很多JS框架和库都实现了相应的AJAX方法，例如Request，Axios等等。而jQuery又是老牌的JS库，同时也是目前世界上使用范围最广泛，最热门的JS库，因此我们首选采用jQ来进行AJAX异步加载。1、首先，我们将jQ引入到我们的网站文件中。方法一、将jQ的JS文件下载到本地然后载入 方法二、通过CDN在线引入 方法三、通过npm安装$ npm install jquery2、编写代码同样的，我们依旧以上面的例子为基础，改写它让他成为异步加载的站点。首先，我们需要将用户请求的页面写出来，起名为index.html Test 第二步，引入jQ库，这里我们采用CDN的方式 Test 第三步，写出用于获取信息的接口，注意，这里请求的可以是任何资源，包括HTML文档，JS文件，二进制图片流等等。为了简单方便，我们先用php返回一个HTML文档作为返回数据。新建一个php文档，命名为api.php，然后在上面写入内容<?php $conn=new mysqli(); $sql=SELECT UID,Username FR.OM user;//把FR/OM拆开是因为被防火墙拦截了（雾 $result=$conn->query($sql); while ($row=$result->fetch_assoc()){ echo $row['UID'].:.$row['Username']; }第四步，采用AJAX请求接口jQ-AJAX语法：$.ajax({name:value, name:value, ... })实例：将jQ-AJAX写入到index.html Test 到这里，我们就可以看到在控制台上输出的来自api.php的内容了。第五步，对数据进行使用我们已经从接口中获取到了数据，接下来我们在success中对这些数据进行利用就可以了，比如将他们打印到HTML页面上 Test {{message}} -四、利用AJAX获取JSON格式的数据我们首先新建一个用于输出JSON格式的类，起名为Response.phpclass Response { public static function json($code, $message = '', $data = []){ $result = [ code => $code, message => $message, data => $data ]; //API返回格式 header('Content-Type:text/json;charset=utf-8'); echo json_encode($result); exit; } }然后，在api.php中，采用json格式将数据返回<?php r…