ajax(面试重点)

最新推荐文章于 2025-05-13 17:07:20 发布

原创最新推荐文章于 2025-05-13 17:07:20 发布 · 3.8k 阅读

69 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #javascript

JavaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

网络

2 篇文章

订阅专栏

本文详细介绍了Ajax的核心概念，包括异步和同步的区别、Ajax处理网络请求的步骤、xhr对象发送GET和POST请求的差异，以及面试中常见的HTTP状态码和readyState的理解。Ajax技术在网页局部刷新和提升用户体验方面的优势明显，但也存在如浏览器历史、安全性和搜索引擎支持等问题。

一、ajax简介

ajax（Asynchronous Javascript And XML）其实就是异步的javaScript和XML。

XML:<html>这是html标签，XML格式是一样的可以自定义<name> <age>满足标记语言的格式就可以了。

AJAX不是一门新语言是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。

AJAX= JS+XML+JSON+HTTP通信，本质就是在HTTP协议的基础上以异步的方式进行通信。

二、ajax优缺点(面试题)

ajax也叫做无刷新技术比如地图、局部加载

①优点：

1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才能更新相应的内容，而这种更新也是瞬间的用户几乎感受不到。

2.可以充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担。

3.使得web中界面与应用相分离也可以说是数据与呈现相分离

②缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。

2.AJAX安全问题

3.对搜索引擎支持较弱

4.破坏程序的异常处理机制

5.违背了URL和资源定位的初衷

6.AJAX不是很好支持移动设备

三、异步和同步

①同步：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，页面就不动了，但是程序还在执行，卡死的感觉）。这种情况下，用户不能关闭页面，如果关闭，即迁移程序就中断了。

②异步：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了，然后程序再慢慢地去写入数据库去。这就是异步，但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了，你可以关闭页面了。

总结：

使用异步的场景：网络请求，本地内容读取，I/O读取、数据库操作 ---耗时操作

使用同步的场景：主线程

常见的异步代码：setInterval setTimeout 所有的时间，ajax请求

四、ajax处理网络请求

ajax模块在处理网络请求的时候包括以下四个步骤

①通过XMLHttpRequest类创建xhr对象

②为xhr对象添加属性与回调方法

③令xhr对象执行open()方法，指明请求被发往某处

④令xhr对象执行send()方法，发出请求。

补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生‘阻塞效应。

五、xhr对象发送GET、POST请求

//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器    
	xhr=new XMLHttpRequest();
}else{//老版本IE
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
          console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
    }
};
//2.打开链接
xhr.open("请求方式","请求地址",是否异步:默认为异步true);
//3.5 请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send();

六、最后补充（面试题）

1.grt请求和post请求的区别

①get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，不同的浏览器和服务器不同，一般限制在2~8k之间，更加常见的是1k以内；post请求是没有长度限制的，请求数据是放在body中。

②get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求。

③get请求可以被缓存，post请求不会被缓存

④get请求会被保存在历史记录中，post不会。get请求可以被收藏为书签，因为参数就是url中，但是post不能。它的参数不在url中。

⑤get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）。

2、常见的响应码和状态码含义

①status

描述：表示本次请求所得到的HTTP状态码，它是一个整数。

语法：if(xhr.readyState == n){

if(xhr.status == 200){

//通信成功

}

}

说明： a.本属性是只读属性。 b.本属性有以下可能值： 200, OK，访问正常 301, Moved Permanently，永久移动 302, Move temporarily，暂时移动 304, Not Modified，未修改 307, Temporary Redirect，暂时重定向 401, Unauthorized，未授权 403, Forbidden，禁止访问 404, Not Found，未发现指定网址 500, Internal Server Error，服务器发生错误

补充：补充：一般来说认为200就是通信成功的标志。

②readyState

描述：是一个只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态一般会在onreadystatechange事件的回调函数中，通过判断readyState属性的值，进而执行不同状态对应的函数。

语法：xhr.onreadystatechange = function(){

if(xhr.readyState == n){

// 执行对应的函数

} }

说明：

值为0,对应常量UNSENT 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

值为1,对应常量OPENED 表示send()方法还没有被调用，仍然可以使用setRequestHeader() 设定HTTP请求头

值为2,对应常量HEADERS_RECEIVED 表示send()方法已经执行，并且头信息和状态码已经收到。

值为3,对应常量LOADING 表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。

值为4,对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了