ajax基础知识
AJAX基础知识及核心原理解读AJAX基础知识什么是AJAX?
作用是用来存储数据的(通过自己扩展的标记名称清晰的展示出数据结构) <?xml version="1.0" encoding="UTF-8"?> <root> <student> <name>张三</name> <age>25</age> <score> <english>90</english> <math>100</math> <chinese>98</chinese> </score> </student> <student> <name>李四</name> <age>24</age> <score> <english>80</english> <math>90</math> <chinese>100</chinese> </score> </student> </root>
这里的异步不是说ajax只能基于异步进行请求(虽然建议都是使用异步编程),这里的异步特指的是 “局部刷新”
在非完全前后端分离项目中,前端开发只需要完成页面的制作,并且把一些基础的人机交互效果使用js完成即可,页面中需要动态呈现内容的部分,都是交给后台开发工程师做数据绑定和基于服务器进行渲染的(服务器端渲染) [优势] [弊端]
目前大部分公司都是前后端完全分离的项目(也有非完全前后端分离的) 前后端完全分离的项目,页面中需要动态绑定的数据是交给客户端完成渲染的 [优势] 2、有利于开发,提高开发的效率 [弊端]
基于原生JS实现AJAX//=>创建一个AJAX对象 let xhr=new XMLHttpRequest();//=>不兼容IE6及更低版本浏览器(IE6:ActiveXObject) //=>打开请求地址(可以理解为一些基础配置,但是并没有发送请求) xhr.open([method],[url],[async],[user name],[user password]); //=>监听AJAX状态改变,获取响应信息(获取响应头信息、获取响应主体信息) xhr.onreadystatechange=()=>{ if(xhr.readyState===4 && xhr.status===200){ let result=xhr.responseText;//=>获取响应主体中的内容 } }; //=>发送AJAX请求(括号中传递的内容就是请求主体的内容) xhr.send(null);
xhr.open([method],[user password]) [AJAX请求方式]
2、POST系列请求(推送)
不管哪一种请求方式,客户端都可以把信息传递给服务器,服务器也可以把信息返回给客户端,只是GET系列一般以获取为主(给的少,拿回来的多),而POST系列一般以推送为主(给的多,拿回来的少) GET系列请求和POST系列请求,在项目实战中存在很多的区别 2、GET请求很容易出现缓存(这个缓存不可控:一般我们都不需要),而POST不会出现缓存(除非自己做特殊处理); //=>每个一分钟从新请求服务器端最新的数据,然后展示在页面中(页面中某些数据实时刷新) setTimeout(()=>{ $.ajax({ url:'getList?lx=news',... success:result=>{ //=>第一次请求数据回来,间隔一分钟后,浏览器又发送一次请求,但是新发送的请求,不管是地址还是传递的参数都和第一次一样,浏览器很有可能会把上一次数据获取,而不是获取最新的数据 } }); },60000); //=>解决方案:每一次重新请求的时候,在URL的末尾追加一个随机数,保证每一次请求的地址不完全一致,就可以避免是从缓存中读取的数据 setTimeout(()=>{ $.ajax({ url:'getList?lx=news&_='+Math.random(),... success:result=>{} }); },60000); 3、GET请求没有POST请求安全(POST也并不是十分安全,只是相对安全) URL:请求数据的地址(API地址),真实项目中,后台开发工程师会编写一个API文档,在API文档中汇总了获取哪些数据需要使用哪些地址,我们按照文档操作即可 ASYNC:异步(SYNC同步),设置当前AJAX请求是异步的还是同步的,不写默认是异步(TRUE),如果设置为FALSE,则代表当前请求是同步的 用户名和密码:这两个参数一般不用,如果你请求的URL地址所在的服务器设定了访问权限,则需要我们提供可通行的用户名和密码才可以(一般服务器都是可以允许匿名访问的)
//=>监听AJAX状态改变,获取响应信息(获取响应头信息、获取响应主体信息) xhr.onreadystatechange=()=>{ if(xhr.readyState===4 && xhr.status===200){ let result=xhr.responseText;//=>获取响应主体中的内容 } }; AJAX状态码:描述当前AJAX操作的状态的 0:UNSENT 未发送,只要创建一个AJAX对象,默认值就是零 HTTP网络状态码:记录了当前服务器返回信息的状态 xhr.status 以3开头一般也是成功,只不过服务器端做了很多特殊的处理
以4开头的,一般都是失败,而且客户端的问题偏大
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |