用vs2012做网站案例,施工企业资质管理规定,滴答手表网站,自己电脑做网站 外网无法访问介绍 Ajax是一种网页开发技术#xff0c;全称是Asynchronous JavaScript and XML#xff08;异步JavaScript和XML#xff09;。作用如下#xff1a;
数据交换#xff1a;可以通过Ajax给服务器发送请求#xff0c;并获取服务器响应的数据。即前端动态的发送Ajax到服务器端…介绍 Ajax是一种网页开发技术全称是Asynchronous JavaScript and XML异步JavaScript和XML。作用如下
数据交换可以通过Ajax给服务器发送请求并获取服务器响应的数据。即前端动态的发送Ajax到服务器端来获取相应数据接收到数据后基于vue中的指令完成相应的数据渲染。异步交互能够在不中断用户操作(不重新加载整个页面)的情况下与服务器交换数据并更新部分网页。这意味着用户在提交请求后仍然可以继续浏览或操作页面直到服务器响应返回。 与异步交互相对同步交互 同步交互访问客户端——请求服务器——服务器处理(客服端等待)——服务器响应(客服端加载)——客户端继续访问 我们访问链接加载图片、视频都属于同步交互而异步交互则可在不中断客服端操作的情况下与服务器交换数据 原生Ajax
一、创建XMLHttpRequest对象用于和服务器交换数据
var xhr new XMLHttpRequest();//创建XMLHttpRequest对象二、调用 XMLHttpRequest 对象中的 open() 方法来设置请求的方式和请求路径并调用 send() 方法来向服务器发送请求
xhr.open(method, url, async);//发送异步请求
xhr.send(data);//发送请求method: 请求类型如 “GET”, “POST”, “PUT”, “DELETE” 等。url: 请求的URL(此处使用本地文本代替)。async: (可选) 布尔值表示请求是否异步默认为true。data: (可选) 发送到服务器的数据通常为json数据
三、获取服务器响应的数据
scriptfunction loadDoc() {var my_xml new XMLHttpRequest();//创建XMLHttpRequest对象它是实现Ajax通信的核心。my_xml.onreadystatechange function () {//为XML对象设置了一个事件处理器用于监听readyState属性的变化。if (this.readyState 4 this.status 200) {document.getElementById(demo).innerHTML this.responseText;}};my_xml.open(GET, ajax_info.txt, true);my_xml.send();}
/script onreadystatechange 是 my_xml 的一个标准事件处理器属性用来监听 readyState 和 status 的属性变化两属性不同的值代表不同的含义 readyState 0请求未初始化 1服务器连接已建立 2请求已收到 3正在处理请求 4请求已完成且响应已就绪 status 200: OK 403: Forbidden 404: Not Found 当readyState变为4请求已完成并且HTTP状态码为200请求成功时函数将进行
使用document.getElementById(demo)获取页面中ID为demo的元素。将该元素的innerHTML属性设置为this.responseText即服务器返回的响应文本。
!DOCTYPE html//示例
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAAA专业苏打饼干打孔/title
/headbodyinput typebutton value获取数据 onclickloadDoc()div iddemo/div
/body
scriptfunction loadDoc() {var my_xml new XMLHttpRequest();my_xml.onreadystatechange function () {if (this.readyState 4 this.status 200) {document.getElementById(demo).innerHTML this.responseText;}};my_xml.open(GET, ../json/students_info.json, true);my_xml.send();}
/script/html 但这种方式比较繁琐且在早期的浏览器中可能还会遇到兼容问题所以原生Ajax已不再使用现在所使用的是基于原生Ajax封装起来的技术如Axios
Axios
一、自备Axios文件并引入或直接引入官方文档
script srcjs/axios-0.18.0.js/script
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script二、使用Axios发送请求并获取响应结果 axios({method: get,//请求方式为geturl: http://example.com/api/cookies//此处url仅做示范//请求的路径如需传递数据则在url后以?keyvalue,例:?name123age123的形式传输数据}).then((result) {//.then响应服务器数据并调用成功回调函数console.log(result.data); //拿到result中的data属性});axios({method: post,//post传输数据在请求体中传输通过data属性来指定所传请求参数url: http://example.com/api/cookies/${cookieId},data: id1}).then((result) {console.log(数据删除成功:, result.data);});
例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAAA专业苏打饼干打孔/titlescript src../js/axios-0.18.0.js/script
/headbodyinput typebutton value获取数据 onclickget()input typebutton value删除数据 onclickpost()
/body
scriptfunction get() {//通过axios发送异步请求-getaxios({method: get,url: https://yapi.pro/mock/557466/user/getById}).then((result) {console.log(result.data);});}function del() {//通过axios发送异步请求-postaxios({method: post,url: https://yapi.pro/mock/557466/user/getById,data: id1}).then((result) {console.log(数据删除成功:, result.data);});}
/script/html 但这种请求方式 过于复杂为方便书写Axios已经为支持的所有请求方式提供了请求方式的别名
axios.get(url, [config]): url: 必需字符串请求的服务器URL。config: 可选配置对象可以包含以下选项 params: 将被添加到URL查询字符串中的参数。headers: 请求头信息。responseType: 响应数据的类型例如 ‘json’, ‘blob’, ‘document’, ‘arraybuffer’, ‘text’, ‘stream’。timeout: 请求超时的毫秒数。withCredentials: 是否跨站点请求时携带凭证cookies。axios.delete(url, [config]): url: 必需字符串请求的服务器URL。config: 可选配置对象与 axios.get 的配置选项类似可以包含 params, headers, timeout, withCredentials 等属性。axios.post(url, [data], [config]): url: 必需字符串请求的服务器URL。data: 可选要作为请求体发送的数据可以是对象、字符串或数组。config: 可选配置对象与 axios.get 的配置选项类似但还可以包含 data 的处理选项如 transformRequest 和 transformResponse。axios.put(url, [data], [config]): url: 必需字符串请求的服务器URL。data: 可选要作为请求体发送的数据通常用于更新资源。config: 可选配置对象与 axios.post 的配置选项相同。 简化后
scriptfunction get() {//通过axios发送异步请求-getaxios.get(http://example.com/api/cookies).then((result) {console.log(result.data);});}function del() {//通过axios发送异步请求-postaxios.post(http://example.com/api/cookies, id 1).then((result) {console.log(数据删除成功:, result.data);}); }
/script 接下来我们将其与vue放在一起使用我们需要浏览器页面加载完成后自动发送异步请求到服务端获取数据并自动将其渲染在页面中。想实现这一点离不开vue。 前面介绍过vue有生命周期其中有八个钩子函数我们需要在 mounted 钩子函数中发送异步请求。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAAA专业苏打饼干打孔/titlescript src../js/axios-0.18.0.js/scriptscript src../js/vue.js/script
/headbodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth编号/th/trtr aligncenter v-for(person, index) in emps :keyindextd{{ index1}}/tdtd{{ person.name }}/tdtd{{ person.age }}/tdtd v-ifperson.gender1{{ 男 }}/tdtd v-else-ifperson.gender2{{ 女 }}/tdtd{{ person.studentID }}/td/tr/table/div
/body
scriptnew Vue({el: #app,data: {emps: [],},mounted() {//发送异步请求访问数据axios.get(https://yapi.pro/mock/557466/user/list).then(result {this.emps result.data.students;})},})
/script/html
