什么是ajax?:
答:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
Get和Post的区别:
get和post都是向服务器发送一种请求,只是发送机制不同
1 GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。
2.首先是”GET方式提交的数据最多只能是1024字节”,Post传输的数据量大,可以达到2M。
3.get方式请求数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号密码等。在某种情况下,get方式会带来严重的安全问题。而post方式相对来说就可以避免这些问题。
4.Post请求必须设置Content-Type值为application/x-form-www-urlencoded;
5.发送请求时,因为Get请求的参数都在url里,所以send函数发送的参数为null,而Post请求在使用send方法时,却需赋予其参数
Jquery中ajax格式:
$.ajax({ url:"", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步,默认为异步,这也是ajax重要特性 data:{"id":"value"}, //参数值,键值对 type:"GET", //请求方式 beforeSend:function(){ //请求前的处理 }, success:function(req){ //请求成功时处理 }, complete:function(){ //请求完成的处理 }, error:function(){ //请求出错处理 } });
Ajax的type类型:
1、Get请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改、增加数据,不会影响资源的内容,即该请求不会产生副作用。无论进行多少次操作,结果都是一样的。
2、与Get不同的是,Put请求是向服务器端发送数据的,从而改变信息,该请求就像数据库的update操作一样,用来修改数据的内容,但是不会增加数据的种类等,也就是说无论进行多少次Put操作,其结果并没有不同。
3、Post请求同Put请求类似,都是向服务器端发送数据的,但是该请求会改变数据的种类等资源,就像数据库的insert操作一样,会创建新的内容。几乎目前所有的提交操作都是用Post请求的。
4、Delete请求顾名思义,就是用来删除某一个资源的,该请求就像数据库的delete操作。
可理解为:
增(Post)删(Delete)改(Put)查(Get)无论前端后端后台数据库都离不开这四种操作,为IT界四大金刚,尤其Get查操作最为频繁。。
ajax返回的数据类型:
xml:返回XML文档,可用 jQuery 处理。
html:返回纯文本HTML信息;
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了 “cache” 参数;
json:json方式和html方式在请求和服务器中完全是一样,请求的返回值实际上都是String对象,有两点不同,第一:html方式的时候并没有限制返回的字符串格式,而json方式的时候,必须符合json协议的规范。第二:html方式请求完成之后没有做任何的操作直接回调sucuess,而json多了一步就是加了eval,执行返回的字符串,看看源码data = eval_r("(" + data + ")");返回json对象;(方法的返回值是Javabean时,在响应体中响应成json字符串格式)
jsonp:jsonp方式的交互方式和js是一样的,本身xmlHttpRequest对象并不能跨域访问,但是script标签的src可以跨域访问,这里就注意两个概念:第一Ajax是不能跨域操作的,第二jQuery的jsonp是可以跨域操作,jsonp到底是什么东西呢?他是一个非官方的定义,目前的规范,需要服务器和客户端进行配合使用;
text:返回纯文本字符串
ajax 同步和异步区别:
同步:即代码顺序执行,当代码执行某一件事时,必须等待该事件执行完成,才会顺序执行下面的代码,比如发送请求到服务端,必须等待请求执行完成,获得后端返回结果完毕后,再执行下面代码。
异步:即代码并发处理,当代码执行某一件事时,会将事件放入任务队列中,主线程不会等待,此时会继续执行下面代码的处理,比如程序向服务器发送一个请求,在结果返回之前,程序还是可以执行其它操作(以前台界面为例,用户依然可以输入其它信息,并且和服务器进行其它交互)。
JS本身是单线程语言,同步和异步可理解为对应的单线程串行执行,单线程并发执行。
举一个现实中的例子:银行单一窗口,办理业务的人必须一个处理完了再接下一,即同步(单线程串行执行)。
银行单一窗口,由于办理业务的人过多,现在可以让那些办卡填表的人先去填表(任务队列),在填表的 这段时间里可以做存钱,取钱操作。若再来人申请办卡贷款什么的,继续让他去一边填表。待窗口空闲时 便会取事件队列中的结果去执行,即异步(单线程并发执行)。
所谓“并发”是指两个或两个以上的事件在同一时间间隔(例如上面横坐标这个时间段)中发生。如上图的第一个表,由于计算机系统只有一个 CPU,故 ABC 三个程序从“微观”上是交替使用 CPU,但交替时间很短,用户察觉不到,形成了“宏观”意义上的并发操作。
注意:之所以我们可以利用Ajax做到多线程,这取决于Web服务器,服务端使用多线程处理请求。浏览器是多进程的,比如谷歌浏览器每打开一个tab标签页就会有一个子进程,
Chrome 设计中存在很多的进程,并利用进程间通讯来完成它们之间的同步,因此这也是 Chrome 快速的法宝之一。对于 Ajax 的请求也需要特殊线程来执行,当需要发送一个 Ajax 请求时,浏览器会开辟一个新的线程来执行 HTTP 的请求,它并不会阻塞 JavaScript 线程的执行,当 HTTP 请求状态变更时,相应事件会被作为回调放入到“任务队列”中等待被执行。
更深入详细的解答请参考:https://blog.csdn.net/u014465934/article/details/89458581
Ajax的交互模型(过程):
var xml = new XMLHttpRequest(); //创建ajax实例对象。
xml.onreadystatechange = function(){
if(xml.readyState == 4){
if(xml.status > 200 && xml.status<300 || xml.status == 304){
alert(xml.responsText)
}else{
alert("Request was unsuccessful: " + xml.status);
}
}
} //监听状态变化事件,若为同步,此事件必须放在send()上面。
xml.open( "get", "example.txt", true ); //创建请求,指定请求类型,路径,是否异步。
//当请求为Post通过send()传递"key1=value1&key2=value2" urlencoded格式的请求体时
//一定要添加以下代码设置请求头中的Content-type
//xml.setRequestHeader("content-type","application/x-www-form-urlencoded");若是json格式,即:application/json
//总结:Content-type的格式随send()传递的请求体的格式的变化而变化。
xml.send(); //发送请求。
readerState 状态描述 说明
0 初始化 代理(XMLHttpRequest)被创建,但未调用open()方法。
1 建立连接 open()方法已经被调用,建立了连接。
2 接收到响应头 send()方法已经被调用,并且已经可以获取状态行和响应头。
3 响应体加载中 响应体下载中,responseText属性可能已经包含部分数据。
4 响应体加载完成 响应体下载完成,可以直接使用responseText。
扩展:
原生ajax的缺点在于回调地狱及可能破坏浏览器后退功能问题。
而Jquery1.5之后支持了Promise的写法解决了回调地狱,如果只为一个ajax就引入Jquery,成本过高。
而Fetch是es6新增的原生js方法,使用了 Promise 来处理结果/回调,但IE及许多移动端浏览器不支持该方法。
而axios几乎完美解决了所有问题。
axios特点:
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)
参考文章:https://blog.csdn.net/qq_36407875/article/details/84642060