ajax面试题大全

Posted 2021-07-16 MioWeb

• 什么是AJAX

1. AJAX的全称是Asynchronous javascript And XML.，是异步的 JavaScript 和 XML，可以在无需重新加载整个网页的情况下，更新部分网页内容的技术。是用于创建快速动态网页的技术。

2. 依赖于浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

• 为什么要用ajax

1. 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2. ajax实现页面和 web 服务器之间数据的异步传输。通过异步模式，提升了用户体验

3. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

4. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

• ajax的缺点

1. ajax不支持浏览器back按钮。

2. 安全问题 AJAX暴露了与服务器交互的细节。

3. 对搜索引擎的支持比较弱。

4. 破坏了程序的异常机制。

5. 不容易调试。

• AJAX异步请求原理

浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。

• AJAX异步请求的流程

function xhrAjax({ url, method = 'GET', params = {}, data = {}}) { // 执行异步ajax请求 // 第一步，创建对象 const xhr = new XMLHttpRequest() // 第二步，配置请求信息，参数一是请求的类型,参数二是请求的url, xhr.open(method, url, true) // 发送请求 if (method === 'GET' || method === 'DELETE') { // 第三步，发送请求 xhr.send() } else if (method === 'POST' || method === 'PUT') { xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') xhr.send('pageIndex=1&pageSize=5') // 发送json格式请求体参数 // 告诉服务器请求体的格式是json // xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8') // xhr.send(JSON.stringify(data)) // 发送json格式请求体参数 } // 第四步，绑定状态改变的监听 xhr.onreadystatechange = function () { // 如果请求没有完成, 直接结束 if (xhr.readyState !== 4) { return } // 如果响应状态码在[200, 300)之间代表成功, 否则失败 const {status, statusText} = xhr // 第五步，获取返回的数据 if (status >= 200 && status <= 299) { // 如果请求成功了, 调用resolve() // 准备结果数据对象response const response = { data: JSON.parse(xhr.response), status, statusText } } }}

• 请介绍一下XMLhttprequest对象。

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

• AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

• Ajax包含下列技术：

1. 基于web标准（standards-basedpresentation）Xhtml+CSS的表示；

2. 使用 DOM（Document ObjectModel）进行动态显示及交互；

3. 使用 XML 和 XSLT 进行数据交换及相关操作；

4. 使用 XMLHttpRequest 进行异步数据查询、检索；

5. 使用 JavaScript 将所有的东西绑定在一起。

• AJAX应用和传统Web应用有什么不同

1. 在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。

2. 因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。

3. 使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。

4. 通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

• AJAX请求总共有多少种CALLBACK

1. onSuccess
2. onFailure
3. onUninitialized
4. onLoading
5. onLoaded
6. onInteractive
7. onComplete
8. onException

• Ajax和javascript的区别

1. javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。

2. 在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。

• 在Ajax应用中信息是如何在浏览器和服务器之间传递的

通过XML数据或者字符串

• 在浏览器端如何得到服务器端响应的XML数据。

XMLHttpRequest对象的responseXMl属性

• XMLHttpRequest对象在IE和Firefox中创建方式有没有不同

有，IE6以下中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到

• 介绍一下XMLHttpRequest对象的常用方法和属性

1. open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式可以为GET，POST或任何服务器所支持的您想调用的方式。

2. 第二个参数是请求页面的URL。

3. send()方法，发送具体请求

4. abort()方法，停止当前请求

5. readyState属性请求的状态 有5个可取值0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

6. responseText 属性服务器的响应，表示为一个串

7. reponseXML 属性 服务器的响应，表示为XML

8. status服务器的HTTP状态码，200对应ok 400对应not found

• 什么是XML

XML是扩展标记语言，能够用一系列简单的标记描述数据

• XML的解析方式

1. 常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便，但是比较耗内存。

2. Sax是按事件驱动的方式解析的，占用内存少，但是编程复杂

微信小程序教程链接：
https://pan.baidu.com/s/1vncBSQNq744UptCt2-dORQ

提取码：duy8

知交零落实是人生常态，能够偶尔话起，而心中仍然温柔，就是好朋友。

过去的第73天