AJAX原理及常见面试题

时间 2020-01-10

标签 ajax 原理常见面试栏目 Ajax 繁體版

原文原文链接

引语

AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。javascript

AJAX 是一种用于建立快速动态网页的技术。它能够令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得史无前例的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，和互联网应用如雨后春笋通常冒出，不断带给人惊喜。php

1、什么是AJAX

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能颇有帮助。简单地说，在不须要从新刷新页面的状况下，Ajax 经过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。html

Ajax的目的是提升用户体验，较少网络数据的传输量。同时，因为AJAX请求获取的是数据而不是HTML文档，所以它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。前端

2、AJAX原理是什么

Ajax至关于在用户和服务器之间加了一个中间层,使用户操做与服务器响应异步化。并非全部的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎本身来作，只有肯定须要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。java

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发送异步请求，从服务器得到数据，而后用JavaScript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理，咱们必须对 XMLHttpRequest有所了解。git

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。github

3、AJAX的使用

1. 建立Ajax核心对象`XMLHttpRequest`(记得考虑兼容性)

let xhr = null;
if (window.`XMLHttpRequest`) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    xhr = new `XMLHttpRequest`();  
} else {// 兼容 IE6, IE5 
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
}

2. 向服务器发送请求

xhr.open(method, url, async);  
send(string);//`POST`请求时才使用字符串参数，不然不用带参数。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

注意：POST请求必定要设置请求头的格式内容web

xhr.open("`POST`", "test.html", true);  
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //`POST`请求参数放在send里面，即请求体

一个Promise对象实现的 Ajax 操做的例子：面试

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
  });
  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

3. 服务器响应处理（区分同步跟异步两种状况）

responseText 得到字符串形式的响应数据。
responseXML 得到XML 形式的响应数据。ajax

同步处理

xhr.open("`GET`","info.txt",false);  
xhr.send();  
document.`GET`ElementById("myDiv").innerHTML = xhr.responseText; //获取数据直接显示在页面上

异步处理（推荐）

相对来讲比较复杂，要在请求状态改变事件中处理。

xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200){    
    document.`GET`ElementById("myDiv").innerHTML = xhr.responseText;  
    }
}

什么是`readyState`？

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每一个值表明了不一样的含义：

0：未初始化 — 还没有调用.open()方法；
1：启动 — 已经调用.open()方法，但还没有调用.send()方法；
2：发送 — 已经调用.send()方法，但还没有接收到响应；
3：接收 — 已经接收到部分响应数据；
4：完成 — 已经接收到所有响应数据，并且已经能够在客户端使用了；

什么是`status`？

HTTP状态码(status)由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的做用。HTTP状态码共分为5种类型：

1xx（临时响应）：表示临时响应并须要请求者继续执行操做的状态码。
2xx（成功）：表示成功处理了请求的状态码。
3xx（重定向）：表示要完成请求，须要进一步操做。一般，这些状态代码用来重定向。
4xx（请求错误）：这些状态码表示请求可能出错，妨碍了服务器的处理。
5xx（服务器错误）：这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误多是服务器自己的错误，而不是请求出错。

常见的状态码

仅记录在 RFC2616 上的 HTTP 状态码就达 40 种，若再加上 WebDAV（RFC491八、5842）和附加 HTTP 状态码（RFC6585）等扩展，数量就达 60 余种。接下来，咱们就介绍一下这些具备表明性的一些状态码。

200 表示从客户端发来的请求在服务器端被正常处理了。
204 表示请求处理成功，但没有资源返回。
301 表示永久性重定向。该状态码表示请求的资源已被分配了新的URI，之后应使用资源如今所指的URI。
302 表示临时性重定向。
304 表示客户端发送附带条件的请求时（指采用GET方法的请求报文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个首部）服务器端容许请求访问资源，但因发生请求未知足条件的状况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过时的缓存）
400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401 表示未受权（Unauthorized)，当前请求须要用户验证
403 表示对请求资源的访问被服务器拒绝了
404 表示服务器上没法找到请求的资源。除此以外，也能够在服务器端拒绝请求且不想说明理由时使用。
500 表示服务器端在执行请求时发生了错误。也有多是Web应用存在的bug或某些临时的故障。
503 表示服务器暂时处于超负载或正在进行停机维护，如今没法处理请求。

4. `GET`和`POST`请求数据区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址能够被Bookmark，而POST不能够。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，由于参数直接暴露在URL上，因此不能用来传递敏感信息。
GET参数经过URL传递，POST放在Request body中。

GET和POST使用场景：
若符合下列任一状况，则推荐用POST方法：

请求的结果有持续性的反作用，例如，数据库内添加新的数据行。
若使用GET方法，则表单上收集的数据可能让URL过长。
要传送的数据不是采用7位的ASCII编码。

若符合下列任一状况，则推荐用GET方法：

请求是为了查找资源，HTML表单数据仅用来帮助搜索。
请求结果无持续性的反作用。
收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

4、常见AJAX面试题

什么是AJAX？AJAX做用是什么？

详见本文内容=>

原生JavaScript AJAX请求有几个步骤？分别是什么？

//建立 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//接受服务器响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status == 200) { 
        // let data = xhr.responseText;  
    }
};
//规定请求的类型、URL 以及是否异步处理请求。
xhr.open('GET',url,true);
//发送请求
xhr.send(null);

JSON字符串和JSON对象的相互转换

//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')   

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

AJAX几种请求方式？他们的优缺点？

详见本文内容=>

HTTP常见状态码有哪些？

详见本文内容=>

什么状况形成跨域（什么是同源策略）？

同源策略是浏览器的一个安全功能，不一样源的客户端脚本在没有明确受权的状况下，不能读写对方资源。因此xyz.com下的js脚本采用Ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

举个例子：

不受同源策略限制的状况：

页面中的连接，重定向以及表单提交是不会受到同源策略限制的。
跨域资源的引入是能够的。可是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域解决方案有哪些？

JSONP 只能解决GET跨域(问的最多)
原理：动态建立一个script标签。利用script标签的src属性不受同源策略限制。由于全部的src属性和href属性都不受同源策略限制。能够请求第三方服务器数据内容。
步骤：

1. 建立一个script标签
2. script的src属性设置接口地址
3. 接口参数,必需要带一个自定义函数名 要否则后台没法返回数据。
4. 经过定义函数名去接收后台返回数据

```js
//去建立一个script标签
let 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对象才可使用。
}
```

CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头以后，浏览器将会容许跨域请求
限制：浏览器须要支持HTML5，能够支持POST，PUT等方法兼容ie9以上
须要后台设置
```
Access-Control-Allow-Origin: *              //容许全部域名访问，或者
Access-Control-Allow-Origin: http://a.com   //只容许全部域名访问
```

设置 document.domain
原理：相同主域名不一样子域名下的页面，能够设置document.domain让它们同域
限制：同域document提供的是页面间的互操做，须要载入iframe页面

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

ES5 postMessage
ES5新增的 postMessage() 方法容许来自不一样源的脚本采用异步方式进行有限的通讯，能够实现跨文本档、多窗口、跨域消息传递.
语法:
```
postMessage(data,origin)
```
用Apache作转发（逆向代理），让跨域变成同域

5、结语

其实经过 XMLHttpRequest或者封装后的框架进行网络请求,这种方式已经有点老旧了，配置和调用方式很是混乱，近几年刚刚出来的Fetch提供了一个更好的替代方法，它不只提供了一种简单，合乎逻辑的方式来跨网络异步获取资源，并且能够很容易地被其余技术使用。

参考：
Ajax原理一篇就够了 · Issue #45 · ljianshu/Blog · GitHub
Ajax 简介
 不再学AJAX了！（一）AJAX概述
 HTTP菜鸟教程
 Ajax MDN文档
 ajax常见的面试问题 - 斧子兔 - 博客园

我是Cloudy，现居上海，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。
我的笔记，整理不易，感谢关注、阅读、点赞和收藏。
文章有任何问题欢迎你们指出，也欢迎你们一块儿交流各类前端问题！

AJAX原理及常见面试题

引语

1、什么是AJAX

2、AJAX原理是什么

3、AJAX的使用

1. 建立Ajax核心对象XMLHttpRequest(记得考虑兼容性)

2. 向服务器发送请求

3. 服务器响应处理（区分同步跟异步两种状况）

同步处理

异步处理（推荐）

什么是readyState？

什么是status？

常见的状态码

4. GET和POST请求数据区别

4、常见AJAX面试题

什么是AJAX？AJAX做用是什么？

原生JavaScript AJAX请求有几个步骤？分别是什么？

JSON字符串和JSON对象的相互转换

AJAX几种请求方式？他们的优缺点？

HTTP常见状态码有哪些？

什么状况形成跨域（什么是同源策略）？

跨域解决方案有哪些？

5、结语

1. 建立Ajax核心对象`XMLHttpRequest`(记得考虑兼容性)

什么是`readyState`？

什么是`status`？

4. `GET`和`POST`请求数据区别