一文搞懂Ajax，附Ajax面试题

Posted 2021-05-13 白墨是个程序猿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文搞懂Ajax，附Ajax面试题相关的知识，希望对你有一定的参考价值。

前言
正文
后记

前言

大家好呀，我是白墨，一个热爱学习与划水的矛盾体。

以前学习Ajax时老师只是在将JQuery的时候简单的用了一下，浅尝辄止。课后也没有深入去了解过，连使用都很不熟练。我甚至一度以为Ajax是JQuery独有的东西……

今天重新学习了一下，总算理清楚了Ajax是什么东西，以及该怎么使用。

先简单做一个笔记加深记忆，搬运居多，未来深入了解以后再进行补充。

正文

Ajax是什么东西？

AJAX 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

实现核心/工作原理：XMLHttpRequest对象

XMLHttpRequest 是 AJAX 的基础。

请求的发送与响应数据的接收都是使用XMLHttpRequest 对象。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest大致用法

创建XMLHttpRequest 对象
发送请求使用open()和send()方法
获得来自服务器的响应，使用XMLHttpRequest 对象的responseText或responseXML属性
服务器响应的数据的处理，使用XMLHttpRequest 对象的onreadystatechange属性

创建XMLHttpRequest对象

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();

老版本的IE5和IE6使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");

所以如果想兼容IE5 和 IE6 需要先判断浏览器版本再创建相应的对象。（话说这么老的浏览器真的需要兼容吗？）

var xmlhttp;
if (window.XMLHttpRequest){ //判断浏览器版本
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();//创建XMLHttpRequest对象
}else{
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建ActiveXObject对象
}

发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器发送请求：

//GET 请求
xmlhttp.open("GET","test1.txt?key=value",true);
xmlhttp.send();

//POST 请求
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//请求头
xmlhttp.send("fname=Bill&lname=Gates");//数据

方法与参数解释

方法	描述
`open(method,url,async)`	规定请求的类型、URL以及是否异步处理请求。 `method`：请求的类型；GET 或 POST `url`：文件在服务器上的位置 `async`：true（异步）或 false（同步）
`send(string)`	将请求发送到服务器。 `string`：仅用于 POST 请求，GET请求参数放在 URL 中
`setRequestHeader(header,value)`	向请求添加 HTTP 头。 `header`: 规定头的名称 `value`: 规定头的值

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的async参数必须设置为true。
所以XMLHttpRequest是实现AJAX的技术，而不是AJAX，切勿弄混。

注：如果async参数设置为false，即为非异步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

服务器响应

获得来自服务器的响应，主要使用XMLHttpRequest对象的responseText或responseXML属性。

1. responseText属性

获得字符串形式的响应数据，直接作为字符串使用。

document.getElementById("myDiv").innerhtml=xmlhttp.responseText;

2. responseXML属性

获得 XML 形式的响应数据，需要作为 XML 对象进行解析。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

数据处理

当请求被发送到服务器时，我们需要执行一些基于响应的任务，主要使用XMLHttpRequest对象的readyState属性和onreadystatechange事件属性。

1. readyState 属性

readyState属性翻译过来是就绪状态，存有 XMLHttpRequest 的状态信息，从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

每当readyState改变时，就会触发onreadystatechange事件，所以这两个要结合使用，下面介绍 onreadystatechange 。

2. onreadystatechange 事件属性

onreadystatechange事件用于存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
onreadystatechange事件会被触发 5 次（0 - 4），对应着readyState的每个变化。

3. status 属性

XMLHttpRequest 还有一个重要属性：status

status属性表示HTTP请求的返回状态码，因为 XMLHttpRequest 也是请求的一个网页，所以它的含义和传统网页相同。

200：正常返回

404：找不到网页

500：服务器内部错误

接下来结合使用：

//当使用 async=true 时，为onreadystatechange设置函数
xmlhttp.onreadystatechange=function(){
  //当 readyState 等于 4 且状态为 200 时，表示响应已就绪
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","test1.txt",true);//async=true
xmlhttp.send();

注：异步才需要使用onreadystatechange，即open()方法的async参数设置为true时。如果async为false，把代码放到send()语句后面即可。

//当使用 async=false 时，代码直接往后放
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

到这里XMLHttpRequest已经学得差不多了。后面是补充内容。

Callback 函数（回调函数）

回调函数这玩意儿我还没搞清楚

但是并不影响我写文，哈哈哈哈哈哈

callback 函数是一种以参数形式传递给另一个函数的函数。

如果网站上存在多个 AJAX 任务，就应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

//该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction(){
	loadXMLDoc("/ajax/test1.txt",function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}

>>W3S实例<<

面试题

1. Ajax是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Ajax 是一种用于创建快速动态网页的技术。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax是采用了异步请求的方式，解决了页面无刷新式提交的问题，改善了页面的用户体验效果；常用自动完成提示，注册时用户名重复性校验。
常用的Ajax框架： Jquery中的ajax

总结：AJAX直译为异步的JavaScript和XML，是一种异步提交、局部刷新的网页编程技术。

2. Ajax的优缺点？（请谈一下你对Ajax的认识）

优点：（为什么要使用Ajax？）

改善用户体验。 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
减轻服务器的负担。 按需取数据，最大程度的减少冗余请求，降低服务器端处理开销。
基于xml标准化，并被广泛支持，不需安装插件等，进一步促进页面和数据的分离。

缺点：

存在浏览器兼容性问题。 Ajax大量的使用了javascript和ajax引擎，这些取决于浏览器的支持，在编写的时候要考虑对浏览器的兼容性。
破坏了浏览器的前进、后退功能。 AJAX只是局部刷新，所以页面的后退按钮是没有用的。
对搜索引擎不友好。 搜索引擎会屏蔽掉所有js代码，所以ajax载入的的信息不会被搜索引擎收录。
对流媒体还有移动设备的支持不是太好等。

3. HTTP状态码

200 服务器成功返回页面
404 请求的网页不存在
503 服务不可用

100-199 用于指定客户端相应的某些动作。
200-299 用于表示请求成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499 用于支出客户端的错误
500-599 用于支持服务错误

4. Ajax的工作原理

创建ajax对象 XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)
判断数据传输方式 GET/POST
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

5. Ajax的最大的特点是什么？

Ajax可以实现异步提交、局部刷新，这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

6. 请介绍一下XmlHttpRequest对象？

Ajax的核心是JavaScript对象XmlHttpRequest，它是一种支持异步请求的技术。XmlHttpRequest可以使得程序员使用JavaScript向服务器进行请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
AJAX开始流行始于Google在2005年使用的”Google Suggest”。
“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：
当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。
XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

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

XMLHttpRequest对象的responseXMl属性

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

IE中通过new ActiveXObject()创建，Firefox中通过new XMLHttpRequest()创建

9. 介绍一下XMLHttpRequest对象的常用方法和属性（回答的越多越好）

open()方法：建立对服务器的调用。
send()方法：发送具体请求
abort()方法：停止当前请求
readyState属性：返回请求的状态
responseText属性：服务器端响应的文本
reponseXML属性：服务器端响应的XML
Status:服务器的HTTP状态码

10. Ajax技术体系的组成部分有哪些？

HTML，css，dom，xml，xmlHttpRequest，javascript

11. AJAX应用和传统Web应用有什么不同？

简洁陈述版：
在传统的Web应用的请求/响应为同步模式。即当服务器端在处理客户端请求时，客户端需要等待，直到服务器端响应返回后，客户端才能继续执行。
而AJAX应用的请求/响应为异步模式，即当服务器端在处理客户端请求时，客户端无须等待可以继续执行；当服务器端响应返回后，客户端进行局部刷新。
详细说明版：
在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击"Submit"按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面，所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request，一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

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

Ajax请求总共有八种Callback

onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

13. Ajax和javascript的区别？

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

14. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架。

ASP.NETAjax集成了一套客户端脚本库使得与功能丰富的、基于服务器开发平台的ASP.NET结合在一起。其服务器端编程模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外服务器端编程的ASP.NETAJAXControlToolkit含有大量的独立AJAX控件和对ASP.NET原有服务器控件的AJAX功能扩展。

15. 编程题：写出一个简单的$.ajax()的请求方式？（ JQuery 的 Ajax 模板）

$.ajax({
    url:\'http://www.baidu.com\',	//请求地址
    type:\'POST\',				//Post请求
    data:data,					//请求的同时传递过去的数据
    cache:true,					//是否高速缓存此页
    headers:{}, 			
    dataType:’json’,			//返回数据类型：xml/json/html/script…
    beforeSend:function(){},	//在发送请求前执行的函数
    success:function(){},		//请求成功后的回调函数
    error:function(){},			//请求失败时调用的函数
    complete:function(){}		//请求完成后回调函数
});

成文参考资料

W3S AJAX 教程Statue属性

后记

好啦，本文到此结束！如果对你有帮助，可以给我点赞+收藏+关注！你的鼓励是我更新的动力！

以上是关于一文搞懂Ajax，附Ajax面试题的主要内容，如果未能解决你的问题，请参考以下文章

JavaWeb——AJAX(附三级联动省市区案例）

一文搞懂this指向

ajax与 axios的基础讲解（附代码及接口）

JavaScript原生封装ajax请求和Jquery中的ajax请求，内附详细案例和注释！

js面试题，ajax请求时，如何解释json数据

面试题系列--axios和ajax区别