旅游网站html,网站外链建设可以提升网站权重对吗,警惕网站免费看手机,网站推广优化的方法Ajax介绍
Ajax概述
我们前端页面中的数据#xff0c;如下图所示的表格中的学生信息#xff0c;应该来自于后台#xff0c;那么我们的后台和前端是互不影响的2个程序#xff0c;那么我们前端应该如何从后台获取数据呢#xff1f;因为是2个程序#xff0c;所以必须涉及到…Ajax介绍
Ajax概述
我们前端页面中的数据如下图所示的表格中的学生信息应该来自于后台那么我们的后台和前端是互不影响的2个程序那么我们前端应该如何从后台获取数据呢因为是2个程序所以必须涉及到2个程序的交互所以这就需要用到我们接下来学习的Ajax技术。 Ajax:全称Asynchronous JavaScript And XML异步的JavaScript和XML。其作用有如下2点
● 与服务器进行数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。
● 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。
Ajax作用
我们详细的解释一下Ajax技术的2个作用
● 与服务器进行数据交互
如下图所示前端资源被浏览器解析但是前端页面上缺少数据前端可以通过Ajax技术向后台服务器发起请求后台服务器接受到前端的请求从数据库中获取前段需要的资源然后响应给前端前端在通过我们学习的vue技术可以将数据展示到页面上这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络网络编程技术来理解。 ● 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。
如下图所示当我们在百度搜索java时下面的联想数据时通过Ajax请求从后台服务器得到的在这个过程中我们的Ajax请求不会导致整个百度页面的重新加载并且只针对搜索栏这局部模块的数据进行了数据的更新不会对整个页面的其他地方进行数据的更新这样就大大提升了页面的加载速度用户体验高。 同步异步
针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。 ● 同步请求发送过程如下图所示 浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。 ● 异步请求发送过程如下图所示 浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。
原生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代表的就是异步请求
Axios
上述原生的Ajax请求的代码编写起来还是比较繁琐的所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装简化书写。Axios官网是https://www.axios-http.cn
Axios的基本使用
Axios的使用比较简单主要分为2步 ● 引入Axios文件
script srcjs/axios-0.18.0.js/script ● 使用Axios发送请求并获取响应结果官方提供的api很多此处给出2种如下 ○ 发送get请求
axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan
}).then(function (resp){alert(resp.data);
}) ○ 发送post请求
axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});
axios是用来发送异步请求的小括号中使用js的JSON对象传递请求的相关参数 ○ method属性用来设置请求方式的。取值为get或者post。 ○ url属性用来书写请求的资源路径。如果是get请求需要将请求参数拼接到路径的后面格式为url?参数名参数值参数名2参数值2。 ○ data属性作为请求体被发送的数据。也就是说如果是post请求的话数据需要作为data属性的值。
then需要传递一个匿名函数。我们将then()中传递的匿名函数称为回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的resp参数是对响应的数据进行封装的对象通过resp.data可以获取到响应的数据。
Axios快速入门 ● 后端实现 查询所有员工信息服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/list 根据员工id删除员工信息服务器地址http://yapi.smart-xwork.cn/mock/169327/emp/deleteById ● 前端实现 首先在VS Code中创建js文件夹与html同级然后将axios-0.18.0.js文件拷贝到js目录下然后创建名为02.Ajax-Axios.html的文件工程结果如图所示 然后在html中引入axios所依赖的js文件并且提供2个按钮绑定单击事件分别用于点击时发送ajax请求完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-get}function post(){//通过axios发送异步请求-post}
/script
/html
然后分别使用Axios的方法完成get请求和post请求的发送
get请求代码如下
//通过axios发送异步请求-get
axios({method: get,url: http://yapi.smart-xwork.cn/mock/169327/emp/list
}).then(result {console.log(result.data);
})
post请求代码如下
//通过axios发送异步请求-post
axios({method: post,url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,data: id1
}).then(result {console.log(result.data);
})
浏览器打开f12抓包然后分别点击2个按钮查看控制台效果如下 完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript srcjs/axios-0.18.0.js/script
/head
bodyinput typebutton value获取数据GET onclickget()input typebutton value删除数据POST onclickpost()/body
scriptfunction get(){//通过axios发送异步请求-getaxios({method: get,url: http://yapi.smart-xwork.cn/mock/169327/emp/list}).then(result {console.log(result.data);})}function post(){// 通过axios发送异步请求-postaxios({method: post,url: http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,data: id1}).then(result {console.log(result.data);})}
/script
/html
请求方法的别名
Axios还针对不同的请求提供了别名方式的api具体如下
方法描述axios.get(url[,config])发送get请求axios.delete(url[,config])发送delete请求axios.post(url[,data[,config]])发送post请求axios.put(url[,data[,config]]) 发送put请求
我们目前只关注get和post请求所以在上述的入门案例中我们可以将get请求代码改写成如下
axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result {console.log(result.data);
}
post请求改写成如下
axios.post(http://yapi.smart-xwork.cn/mock/169327/emp/deleteById,id1).then(result
{console.log(result,data);
})
