Ajax使用过程中常见的问题

前端老兵_liuyouxing
404 阅读10分钟

1 、Ajax 是什么? ? 如何创建一个 Ajax ？

Ajax 并不算是一种新的技术，全称是 asynchronous javascript and xml，可以说是已 有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早 期的浏览器并不能原生支持 ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后 来的浏览器提供了对 ajax 的原生支持

使 用 ajax 原 生 方 式 发 送 请 求 主 要 通 过 XMLHttpRequest( 标 准 浏 览 器 ) 、 ActiveXObject(IE 浏览器)对象实现异步通信效果

基本步骤：

var xhr =null;//创建对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”标志位”);//初始化请求
xhr.setRequestHeader(“”,””);//设置 http 头信息
xhr.onreadystatechange =function(){}//指定回调函数
xhr.send();//发送请求

js 框架（jQuery/EXTJS 等）提供的 ajax API 对原生的 ajax 进行了封装，熟悉了基础 理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2 、同步和异步的区别? ?

  • 同步：阻塞的

张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭 =浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返 回数据，浏览器才能显示页面

  • 异步：非阻塞的

张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃 =浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面）， 服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

3 、如何解决跨域问题? ?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以 基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取 js 脚本，并且这个 js 脚本中的内容是 函数调用，该函数调用的参数是服务器返回的数据，为 了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的 数据，这就是解决跨域问题的主流解决方案

4 、页面编码和被请求的资源编码如果不一致如何处理？

对于 ajax 请求传递的参数：

  • 如果是 get 请求方式，参数如果传递中文，在有些浏览器 会乱码，不同的浏览器对参数编码的处理方式不同，所以对于 get 请求的参数需要使用 encodeURIComponent 函数对参数进行编码处理，后台开发语言都有相应的解码 api。
  • 如果是 post 请求不需要进行编码

5 、 简述ajax 的过程。

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

6 、阐述一下异步加载。

  1. 异步加载的方案： 动态插入 script 标签
  2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
  3. script 标签上添加 defer 或者 async 属性
  4. 创建并插入 iframe，让它异步执行 js

7、请解释一下JavaScript 的同源策略。

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

8 、GET 和 和POST 的区别，何时使用 POST ？

GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在 2000 个字符，有的浏览器是 8000 个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制 在以下情况中，请使用 POST 请求：

  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST 没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

9 、ajax 是什么x ?ajax 的交互模型? ? 同步和异步的区别? ? 如何解决跨域问题? ?

  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下 的服务器负载。

10、 、Ajax 的最大的特点是什么。

Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数 据，节约带宽资源；

11 、ajax 的缺点

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

12 、ajax 请求的时候 get 和 和 post 方式的区别

get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中， 如果传递中文参数，需要自己进行编码操作，安全性较低。 post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。

13 、解释 p jsonp 的原理，以及为什么不是真正的 ajax

Jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据 的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件 中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些 返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术

14 、什么是Ajax 和 和 JSON ，它们的优缺点。

  • Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在 Web 页面中实现异步数据交互，实现页面局部刷新。

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用 户不断刷新或者跳转页面，提高用户体验 缺点：对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的 增加跨域问题限制；

  • JSON 是一种轻量级的数据交换格式，ECMA 的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类 型（数组、对象、字符串、数字）

15 、p http 常见的状态码有那些？分别代表是什么意思？

200 - 请求成功 301 - 资源（网页等）被永久转移到其它 URL 404 - 请求的资源（网页等）不存在 500 - 内部服务器错误

16入 、一个页面从输入 L URL 到页面加载显示完成，这个过程中都发生了什么？

分为 4 个步骤：

  1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源 的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
  2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包 括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间 传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由 客户端发出该请求已经被接受的报文。
  3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远 程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正 确的响应。
  4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

17 、ajax 请求的时候get 和 和post 方式的区别

get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中， 如果传递中文参数，需要自己进行编码操作，安全性较低。 post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。

18 、ajax 请求时，如何解释 n json 数据

使用 eval() 或者 JSON.parse() 鉴于安全性考虑，推荐使用 JSON.parse()更靠谱，对 数据的安全性更好。

19 、.javascript 的本地对象，内置对象和宿主对象

本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等 可以 new 实例化的对象 内置对象为 Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象 的一个子集) 宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的 document,window 等对象

20 、 为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁 闷访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

21 、 请说出三种减低页面加载时间的方法

1、压缩 css、js 文件 2、合并 js、css 文件，减少 http 请求 3、外部 js、css 文件放在最底下 4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作

22 、P HTTP 状态码都有那些。

200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误，不能被服务器所理解 403 Forbidden //服务器收到请求，但是拒绝提供服务 404 Not Found //请求资源不存在，输入了错误的 URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

avatar
文章
阅读
粉丝