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

 

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

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