如何自己做淘宝客网站,网站设计需求书,收录网站,众志seo1.1 Ajax介绍
1.1.1 Ajax概述
我们前端页面中的数据#xff0c;如下图所示的表格中的学生信息#xff0c;应该来自于后台#xff0c;那么我们的后台和前端是互不影响的2个程序#xff0c;那么我们前端应该如何从后台获取数据呢#xff1f;因为是2个程序#xff0c;所以…1.1 Ajax介绍
1.1.1 Ajax概述
我们前端页面中的数据如下图所示的表格中的学生信息应该来自于后台那么我们的后台和前端是互不影响的2个程序那么我们前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个程序的交互所以这就需要用到我们接下来学习的Ajax技术。 Ajax: 全称Asynchronous JavaScript And XML异步的JavaScript和XML。其作用有如下2点 与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。 1.1.2 Ajax作用
我们详细的解释一下Ajax技术的2个作用 与服务器进行数据交互 如下图所示前端资源被浏览器解析但是前端页面上缺少数据前端可以通过Ajax技术向后台服务器发起请求后台服务器接受到前端的请求从数据库中获取前端需要的资源然后响应给前端前端在通过我们学习的vue技术可以将数据展示到页面上这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。 如下图所示当我们再百度搜索java时下面的联想数据是通过Ajax请求从后台服务器得到的在整个过程中我们的Ajax请求不会导致整个百度页面的重新加载并且只针对搜索栏这局部模块的数据进行了数据的更新不会对整个页面的其他地方进行数据的更新这样就大大提升了页面的加载速度用户体验高。 1.1.3 同步异步
针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。 同步请求发送过程如下图所示 浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。 异步请求发送过程如下图所示 浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。 1.2 原生Ajax
对于Ajax技术有了充分的认知了我们接下来通过代码来演示Ajax的效果。此处我们先采用原生的Ajax代码来演示。因为Ajax请求是基于客户端发送请求服务器响应数据的技术。所以为了完成快速入门案例我们需要提供服服务器端和编写客户端。 服务器端 因为我们暂时还没学过服务器端的代码所以此处已经直接提供好了服务器端的请求地址我们前端直接通过Ajax请求访问该地址即可。后台服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/list 上述地址我们也可以直接通过浏览器来访问访问结果如图所示只截取部分数据 客户端 客户端的Ajax请求代码如下有如下4步接下来我们跟着步骤一起操作一下。 第一步首先我们再VS Code中创建AJAX的文件夹并且创建名为01. Ajax-原生方式.html的文件提供如下代码主要是按钮绑定单击事件我们希望点击按钮来发送ajax请求 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title原生Ajax/title
/head
bodyinput typebutton value获取数据 onclickgetData()
div iddiv1/div/body
scriptfunction getData(){}
/script
/html 第二步创建XMLHttpRequest对象用于和服务器交换数据也是原生Ajax请求的核心对象提供了各种方法。代码如下 //1. 创建XMLHttpRequest
var xmlHttpRequest new XMLHttpRequest(); 第三步调用对象的open()方法设置请求的参数信息例如请求地址请求方式。然后调用send()方法向服务器发送请求代码如下 //2. 发送异步请求
xmlHttpRequest.open(GET,http://yapi.smart-xwork.cn/mock/169327/emp/list);
xmlHttpRequest.send();//发送请求 第四步我们通过绑定事件的方式来获取服务器响应的数据。 //3. 获取服务响应数据
xmlHttpRequest.onreadystatechange function(){//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应 200表示这是一个正确的Http请求没有错误if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){document.getElementById(div1).innerHTML xmlHttpRequest.responseText;}
} 最后我们通过浏览器打开页面请求点击按钮发送Ajax请求最终显示结果如下图所示 并且通过浏览器的f12抓包我们点击网络中的XHR请求发现可以抓包到我们发送的Ajax请求。XHR代表的就是异步请求
