一、绪论在传统的动态网站中，用户在获取到网页文件之前，服务器的应用服务器（一般指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 require_once Response.php; $conn = new mysqli(); $sql = SELECT UID,Username FR . OM user;//把FR/OM拆开是因为被防火墙拦截了（雾 $result = $conn->query($sql); $arr = []; $data = []; $count = $result->num_rows; $data += [count => $count]; while ($row = $result->fetch_assoc()) { array_push($arr, $row); } Response::json(200, API successfully called, $arr); exit(0);最后，我们利用AJAX和JS将他们展现在页面上 Test {{message}} -五、利用AJAX发送POST请求我们只需要给ajax函数中添加一个method参数就可以实现使用GET、POST、PUT的方式进行异步请求。同时，利用一个data参数为表单设置内容。 Test -六、注意不要忘记在AJAX中的各个参数之间加上半角逗号。-七、附录：jQ-AJAX的参数（转自菜鸟教程）async布尔值，表示请求是否异步处理。默认是 true。beforeSend(xhr)发送请求前运行的函数。cache布尔值，表示浏览器是否缓存被请求页面。默认是 true。complete(xhr,status)请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。contentType发送数据到服务器时所使用的内容类型。默认是：application/x-www-form-urlencoded。context为所有 AJAX 相关的回调函数规定 this 值。data规定要发送到服务器的数据。dataFilter(data,type)用于处理 XMLHttpRequest 原始响应数据的函数。dataType预期的服务器响应的数据类型。error(xhr,status,error)如果请求失败要运行的函数。global布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。ifModified布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。jsonp在一个 jsonp 中重写回调函数的字符串。jsonpCallback在一个 jsonp 中规定回调函数的名称。password规定在 HTTP 访问认证请求中使用的密码。processData布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。scriptCharset规定请求的字符集。success(result,status,xhr)当请求成功时运行的函数。timeout设置本地的请求超时时间（以毫秒计）。traditional布尔值，规定是否使用参数序列化的传统样式。type规定请求的类型（GET 或 POST）。url规定发送请求的 URL。默认是当前页面。username规定在 HTTP 访问认证请求中使用的用户名。xhr用于创建 XMLHttpRequest 对象的函数。 本篇内容为原创内容，采用CC BY-NC-SA 4.0协议许可 2020-11-22 17:54 UtopiaXC 于大连