1、Ajax应用和传统 web应用有什么不同（必会）

不同

在传统的 JavaScript 编程中，用户需要点击“submit”按钮来发送或者接收数据信息，然后等待服务器响应请求，需要重新加载整个页面。
使用 Ajax 技术，就可以使 javascript 通过 XMLHTTPRequest 对象直接与服务器进行交互。
通过 HTTP Request，一个 web 页面可以发送一个请求到 web 服务器并且接收 web 服务器返回的信息（不用重新加载页面），展示给用户的还是同一个页面，用户感觉页面刷新，也看不到 JavaScript 后台进行的发送请求和接收响应。

2、Ajax请求总共有多少种 Callback（必会）

Ajax 请求总共有八种 Callback

onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

3、什么是 Ajax，Ajax都有哪些优点和缺点？（必会）

什么是 Ajax Ajax 是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。沟通客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

Ajax 的原理 通过 XmlHTTPRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。 XMLHTTPRequest 是 Ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

Ajax 的优点

1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax 的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

Ajax 的缺点

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

4、常见的 HTTP状态码以及代表的意义（必会）

5 种常见的 HTTP 状态码以及代表的意义:

200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。 303（ See Other）：告知客户端使用另一个 URL 来获取资源。 400（ Bad Request）：请求格式错误。1)语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。 404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。 500（ Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。

更多状态码:

100 => 正在初始化（一般是看不到的） 101 => 正在切换协议（websocket 浏览器提供的） 202 => 表示接受 301 => 永久重定向/永久转移 302 => 临时重定向/临时转移（一般用来做服务器负载均衡） 304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验 401 => 未认证，没有登录网站 403 => 禁止访问，没有权限 503 => 服务器超负荷（假设一台服务器只能承受 10000 人，当第 10001 人访问的时候，如果服务器没有做负载均衡，那么这个人的网络状态码就是 503）

5、请介绍一下 XMLHTTPrequest对象及常用方法和属性（必会）

XMLHTTPrequest 对象 Ajax 的核心是 JavaScript 对象 XmlHTTPRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHTTPRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。通过 XMLHTTPRequest 对象，Web 开发人员可以在页面加载以后进行页面的局部更新

方法

open(String method,String url,boolean asynch,String username,String password)
send(content)
setRequestHeader(String header,String value)
getAllResponseHeaders()
getResponseHeader(String header)
abort()

常用详细解析

open()：该方法创建 HTTP 请求第一个参数是指定提交方式(post、get) 第二个参数是指定要提交的地址是哪第三个参数是指定是异步还是同步(true 表示异步，false 表示同步) 第四和第五参数在 HTTP 认证的时候会用到。是可选的

setRequestHeader(String header,String value)：设置消息头（使用 post 方式才会使用到，get 方法并不需要调用该方法）

xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); send(content)：发送请求给服务器

如果是 get 方式，并不需要填写参数，或填写 null 如果是 post 方式，把要提交的参数写上去

常用属性 onreadystatechange：请求状态改变的事件触发器（readyState 变化时会调用此方法），一般用于指定回调函数 readyState：请求状态 readyState 一改变，回调函数被调用，它有 5 个状态

0：未初始化 1：open 方法成功调用以后 2：服务器已经应答客户端的请求 3：交互中。HTTP 头信息已经接收，响应数据尚未接收。 4：完成。数据接收完成 responseText：服务器返回的文本内容 responseXML：服务器返回的兼容 DOM 的 XML 内容 status：服务器返回的状态码 statusText：服务器返回状态码的文本信息

回调函数是什么回调函数就是接收服务器返回的内容！

6、Ajax的实现流程是怎样的？（必会）

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

 <script type="text/javascript">
     var HTTPRequest;
     function checkUsername() {

        //创建 XMLHTTPRequest 对象
        if(window.XMLHTTPRequest) {

            //在 IE6 以上的版本以及其他内核的浏览器(Mozilla)等
            HTTPRequest = new XMLHTTPRequest();
        }else if(window.ActiveXObject) {

            //在 IE6 以下的版本
            HTTPRequest = new ActiveXObject();
        }

        //创建 HTTP 请求
        HTTPRequest.open("POST", "Servlet1", true);

        //因为我使用的是 post 方式，所以需要设置消息头
        HTTPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //指定回调函数
        HTTPRequest.onreadystatechange = response22;

        //得到文本框的数据
        var name = document.getElementById("username").value;

        //发送 HTTP 请求，把要检测的用户名传递进去
        HTTPRequest.send("username=" + name);
     }
     //接收服务器响应数据
     function response22() {

     //判断请求状态码是否是 4【数据接收完成】
     if(HTTPRequest.readyState==4) {

        //再判断状态码是否为 200【200 是成功的】
        if(HTTPRequest.status==200) {

             //得到服务端返回的文本数据
             var text = HTTPRequest.responseText;

             //把服务端返回的数据写在 div 上
             var div = document.getElementById("result");

             div.innerText = text;
        }
    }
 }
 </script>

7、Ajax 接收到的数据类型有哪些，数据如何处理？（必会）

接收到的数据类型

String /JSON 字符串/JSON 对象
JSON 对象直接循环使用
JSON 字符串转 JSON 使用
String 直接使用

如何处理数据

1、字符串转对象第一种方式：eval()；

var data = '{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}';
eval('("+data+")');

第二种方式：JSON.parse()；

var data='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}'；
JSON.parse(data)；

与 eval()区别:

eval()方法不会去检查给的字符串时候符合 json 的格式~同时如果给的字符串中存在 js代码 eval()也会一并执行~比如:

var data='{"student"：[{"name":"张三","age":"11"}，{"name":"李四","age":"alert(11)"},{"name":"王五","age":"11"}]}'；

此时执行 eval 方法后会先弹出一个提示框输出 11 的字符串;

这时候使用 JSON.parse()就会报错,显示错误信息为当前字符串不符合 json 格式;

即JSON.parse()方法会检查需要转换的字符串是否符合 json 格式

相比而言 eval() 方法是很不安全，特别是当涉及到第三方时我们需要确保传给 eval()的参数是我们可以控制的，不然里面插入比如 window.location~指向一个恶意的连接总的来说，还是推荐使用 JSON.parse()来实现 json 格式字符串的解析

2、对象转字符串 JSON.stringify(json)

8、请解释一下 JavaScript的同源策略（必会）

同源策略是客户端脚本（尤其是 Javascript ）的重要的安全度量标准。它最早出自 Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

9、阐述一下异步加载 JS（必会）

异步加载的方案

动态插入 script 标签
通过 Ajax 去获取 js 代码，然后通过 eval 执行
script 标签上添加 defer 或者 async 属性
创建并插入 iframe，让它异步执行 js

参考资料 HTTPS://www.cnblogs.com/zichi/p/4597766.html HTTPS://www.cnblogs.com/xkloveme/articles/7569426.html

10、为什么会有跨域的问题出现，如何解决跨域问题（必会）

什么是跨域?

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制，防止他人恶意攻击网站

比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。

解决方式

解决方式1 ----jsonp

原理：动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤:

去创建一个 script 标签
script 的 src 属性设置接口地址
接口参数,必须要带一个自定义函数名要不然后台无法返回数据。
通过定义函数名去接收后台返回数据

//去创建一个 script 标签
var script = document.createElement("script");

//script 的 src 属性设置接口地址并带一个 callback 回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";

//插入到页面
document.head.appendChild(script);

//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp 返回的数据是 json 对象可以直接使用
//Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。
}

解决方式2 ----CORS：跨域资源共享

原理：服务器设置 Access-Control-Allow-OriginHTTP 响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持 HTML5，可以支持 POST，PUT 等方法兼容 ie9 以上
需要后台设置 Access-Control-Allow-Origin: * //允许所有域名访问，或者 Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问

解决方式3 ----反向代理
解决方式4 ----window+iframe

Ajax 网络相关的面试题1