格中的学生信息应该来自于后台那么我们的后台和前端是互不影响的2个程序那么我们前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个程序的交互所以这就需要用到我们接下来学习的Ajax技术。

Ajax:

与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。

异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。

1.1.2

如下图所示前端资源被浏览器解析但是前端页面上缺少数据前端可以通过Ajax技术向后台服务器发起请求后台服务器接受到前端的请求从数据库中获取前端需要的资源然后响应给前端前端在通过我们学习的vue技术可以将数据展示到页面上这样用户就能看到完整的页面了。

此处可以对比JavaSE中的网络编程技术来理解。

异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。

如下图所示当我们再百度搜索java时下面的联想数据是通过Ajax请求从后台服务器得到的在整个过程中我们的Ajax请求不会导致整个百度页面的重新加载并且只针对搜索栏这局部模块的数据进行了数据的更新不会对整个页面的其他地方进行数据的更新这样就大大提升了页面的加载速度用户体验高。

1.1.3

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的与之对应的有同步请求。

接下来我们介绍一下异步请求和同步请求的区别。

浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。

只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。

浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。

1.2

对于Ajax技术有了充分的认知了我们接下来通过代码来演示Ajax的效果。

此处我们先采用原生的Ajax代码来演示。

因为Ajax请求是基于客户端发送请求服务器响应数据的技术。

所以为了完成快速入门案例我们需要提供服服务器端和编写客户端。

服务器端

因为我们暂时还没学过服务器端的代码所以此处已经直接提供好了服务器端的请求地址我们前端直接通过Ajax请求访问该地址即可。

后台服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/list

上述地址我们也可以直接通过浏览器来访问访问结果如图所示只截取部分数据

客户端

客户端的Ajax请求代码如下有如下4步接下来我们跟着步骤一起操作一下。

第一步首先我们再VS

Ajax-原生方式.html的文件提供如下代码主要是按钮绑定单击事件我们希望点击按钮来发送ajax请求

!DOCTYPE

initial-scale1.0title原生Ajax/title

/head

第二步创建XMLHttpRequest对象用于和服务器交换数据也是原生Ajax请求的核心对象提供了各种方法。

代码如下

//1.

第三步调用对象的open()方法设置请求的参数信息例如请求地址请求方式。

然后调用send()方法向服务器发送请求代码如下

//2.

xmlHttpRequest.open(GET,http://yapi.smart-xwork.cn/mock/169327/emp/list);

//3.

xmlHttpRequest.onreadystatechange

function(){//此处判断

200表示这是一个正确的Http请求没有错误if(xmlHttpRequest.readyState

200){document.getElementById(div1).innerHTML

最后我们通过浏览器打开页面请求点击按钮发送Ajax请求最终显示结果如下图所示

并且通过浏览器的f12抓包我们点击网络中的XHR请求发现可以抓包到我们发送的Ajax请求。

XHR代表的就是异步请求