Ajax面试题及扩展,总结。

Posted 灰太狼的小世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax面试题及扩展,总结。相关的知识,希望对你有一定的参考价值。

什么是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


本人菜鸟一枚,欢迎大佬指正,共同进步,谢谢。

下方是本人订阅号及微信号,欢迎一起学习的小伙伴加我。


以上是关于Ajax面试题及扩展,总结。的主要内容,如果未能解决你的问题,请参考以下文章

drf面试题及总结

sql面试题及答案总结

Java面试题及答案2020,java登录界面代码

华为18级大佬总结的15个顶级多线程面试题及答案

2021网易Java高级面试题及答案,知识点总结+面试题解析

常见的10道Web前端面试题及答案分享!