关于AJAX的面试题

关于AJAX的面试题

前些天在进行前端调用后端接口，使用AJAX时很是头大，于是整理出一些内容来再好好学习一波，以面试题的形式加深印象。

1.什么是AJAX,为什么要用它？

首先AJAX和许多简称一样，是其英文单词的首字母(Asynchronous JavaScript and XML)，是一种创建交互式网页应用的网页开发技术。
是下面这几种技术的融合：

• 1.使用CSS和XHTML来表示。
• 2.使用DOM模型来交互和动态显示。
• 3.使用XMLHttpRequest来和服务器进行异步通信。
• 4.使用javascript来绑定和调用。

在传统的Web应用模型中，每当用户向服务器发送请求时，不管更新多少内容，服务器都会将整个页面刷新一遍，这样很不够人性化，不仅会影响到性能，而且还会影响到用户体验感，做一点点操作就会刷新页面(试想在填写账户资料时，前面写了一大串资料，这个时候因为要获取地区多级下拉框，把页面整个给刷新了…)，想想都有点难受。

于是AJAX就可以派上用场了，使用它可以实现局部刷新，在不刷新整个游览器的情况下，可以和服务器实现异步交互。

2.说一下XMLHttpRequest对象的常用方法和属性

两个常用方法：

(1).open方法

open() 有三个参数。

• 第一个参数定义发送请求所使用的方法 (post、get)，
• 第二个参数规定服务器端脚本的URL(也就是提交的地址)，
• 第三个参数规定应当对请求进行异步还是同步处理true表示异步，false表示同步)。

例如：

xmlHttp.open("GET","test.php",true);

(2).send方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

//是get方式的话就写null或不写 是post方式就得加上要提交的参数
xmlHttp.send(null);

属性：

(3).readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

(4).onreadystatechange 属性

也就是请求状态改变的事件触发器，当readyState 属性值变化时，就会调用它，一般用于指定回调函数(回调函数就是接收服务器返回的内容)

xmlHttp.onreadystatechange = function() { //这里面写一个实现某功能的函数}

(5). responseText 属性

通过 responseText 属性来取回由服务器返回的数据。

3.该如何去实现一个AJAX

步骤如下：

• (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
• (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
• (3)设置响应HTTP请求状态变化的函数.
• (4)发送HTTP请求.
• (5)获取异步调用返回的数据.
• (6)使用JavaScript和DOM实现局部刷新.

4.AJAX请求总共有多少种CALLBACK

Ajax请求总共有八种Callback：

• onSuccess
• onFailure
• onUninitialized
• onLoading
• onLoaded
• onInteractive
• onComplete
• onException

5.AJAX有哪些优点和缺点？

优点：

• 1、最大的一点是页面无刷新，用户体验很友好。
• 2、可用异步方式，响应更快。
• 3、可“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
• 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

• 1、ajax不支持浏览器back按钮。
• 2、安全问题 AJAX暴露了与服务器交互的细节。
• 3、对搜索引擎的支持比较弱。
• 4、破坏了程序的异常机制。
• 5、不容易调试。

6.如何解决跨域问题？

首先得理解同域，也就是协议、域名、端口三个必须都相同，不然就它就是跨域。

然后服务器出于安全考虑，不允许ajax跨域获得数据，但可以跨域获得文件内容。

解决思路：

• 所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，【JSONP】
• 在后端上配置可跨域 【CORS方式】
• 前端ajax请求的是本地接口，本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端 【代理方式】

这是一篇更加详细的关于AJAX跨域问题的文章。

7.jquery中的的ajax操作(不是面试题，用于复习)

传统的方法去实现AJAX太麻烦，也不够灵活，于是就有了基于jquery中的的ajax操作

首先了解其中的参数：

• url:请求的路径
• data:发送的数据
• success:成功函数
• datatype 返回的数据

它的三种实现方式：

(1)ajax()方法

代码示例：

$.ajax({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//请求成功时
error:function(jqxhr,textStatus,error)//请求失败时
}

(2)get() 方法通过远程 HTTP GET 请求载入信息。

代码示例：

$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

(3)post() 方法通过远程 HTTP GET 请求载入信息。

代码示例：

$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

部分答案参考于3y老哥文章：戳这看看