Ajax面试题及扩展，总结。

Posted 2021-04-15 灰太狼的小世界

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属性可能已经包含部分数据。