Ajax简介、封装、同步异步Ajax相关面试题

一、Ajax 简介

&＃xff08;1&＃xff09;什么是 Ajax &＃xff1f;

• Ajax &＃61; 异步 Javascript 和 XML&＃xff1b;
• Ajax 是一种用于创建快速动态网页的技术&＃xff1b;
• 通过在后台与服务器进行少量数据交换&＃xff0c;Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下&＃xff0c;对网页的某部分进行更新&＃xff1b;

&＃xff08;2&＃xff09;工作原理&＃xff1a;

&＃xff08;3&＃xff09;Ajax 的优点和缺点&＃xff1a;

优点&＃xff1a;

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

缺点&＃xff1a;

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

二、创建 XMLHttpRquest 对象

XMLHttpRequest 是 Ajax 的基础。

语法&＃xff1a;

variable &＃61; new XMLHttpRequest();


为了应对所有的现代浏览器&＃xff0c;包括 IE5 和 IE6&＃xff0c;请检查浏览器是否支持 XMLHttpRequest 对象。如果支持&＃xff0c;则创建 XMLHttpRequest 对象。如果不支持&＃xff0c;则创建 ActiveXObject &＃xff1a;

示例&＃xff1a;

function loadXMLDoc() {var xmlhttp;if (window.XMLHttpRequest) {// IE7&＃43;, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp&＃61;new XMLHttpRequest();} else {// IE6, IE5 浏览器执行代码xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange&＃61;function() {if (xmlhttp.readyState&＃61;&＃61;4 && xmlhttp.status&＃61;&＃61;200) {document.getElementById("myDiv").innerHTML&＃61;xmlhttp.responseText;}}xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);xmlhttp.send();
}


三、封装 Ajax

//封装ajax
function ajax(obj) {//创建XMLHttpRequest对象if(window.XMLHttpRequest) {var xhr &＃61; new XMLHttpRequest();}else{var xhr &＃61; new ActiveXObject("Microsoft.XMLHTTP");}obj.url &＃61; obj.url&＃43;&＃39;?rand&＃61;&＃39;&＃43;Math.random(); //使用js随机字符串解决IE第二次它就默认获取缓存数据&＃xff0c;导致数据不更新obj.data &＃61; (function(data){ //名值对转换为字符串闭包的方式调用var arr &＃61; [];for(var i in data){arr.push(encodeURIComponent(i)&＃43;&＃39;&＃61;&＃39;&＃43;encodeURIComponent(data[i]));}return arr.join(&＃39;&&＃39;);})(obj.data);if(obj.method &＃61;&＃61;&＃61; &＃39;get&＃39;)obj.url &＃43;&＃61; obj.url.indexOf(&＃39;?&＃39;) &＃61;&＃61; -1?&＃39;?&＃39;&＃43;obj.data:&＃39;&&＃39;&＃43;obj.data;if(obj.async &＃61;&＃61;&＃61; true){xhr.onreadystatechange &＃61; function(){if(xhr.readyState &＃61;&＃61; 4){callback();}};}xhr.open(obj.method,obj.url,obj.async);if(obj.method &＃61;&＃61;&＃61; &＃39;post&＃39;){xhr.setRequestHeader(&＃39;Content-Type&＃39;,&＃39;application/x-www-form-urlencoded&＃39;); //模仿表单提交xhr.send(obj.data);}else{xhr.send(null);}if(obj.async &＃61;&＃61;&＃61; false){callback();}function callback(){if(xhr.status &＃61;&＃61; 200){obj.success(xhr.responseText); //函数回调}else{alert(&＃39;获取数据失败!错误代号&＃xff1a;&＃39;&＃43;xhr.status&＃43;&＃39;,错误信息&＃xff1a;&＃39;&＃43;xhr.statusText);}}
}//调用ajax
$(document).click(function(){ajax({method : &＃39;post&＃39;,url : &＃39;demo.php&＃39;,data : {&＃39;name&＃39; : &＃39;Lee&＃39;,&＃39;age&＃39; : 100},success : function (text) {alert(text);},async : true});
});


四、同步和异步

Ajax 中根据 async 的值不同分为同步&＃xff08;async &＃61; false&＃xff09;和异步&＃xff08;async &＃61; true&＃xff09;

$.ajax({ type: "post", url: "path", cache:false, async:false, dataType: ($.browser.msie) ? "text" : "xml", success: function(xmlobj){ function1(){};}
});function2(){};


• 默认情况下 async 是 true&＃xff1b;

&＃xff08;1&＃xff09;概念&＃xff1a;

• 同步请求&＃xff1a;(false)
  同步请求即是当前发出请求后&＃xff0c;浏览器什么都不能做&＃xff0c;必须得等到请求完成返回数据之后&＃xff0c;才会执行后续的代码&＃xff0c;相当于是排队&＃xff0c;前一个人办理完自己的事务&＃xff0c;下一个人才能接着办。

• 异步请求&＃xff1a;(true)
  异步请求就当发出请求的同时&＃xff0c;浏览器可以继续做任何事&＃xff0c;Ajax发送请求并不会影响页面的加载与用户的操作&＃xff0c;相当于是在两条线上&＃xff0c;各走各的&＃xff0c;互不影响。
  一般默认值为true&＃xff0c;异步。异步请求可以完全不影响用户的体验效果&＃xff0c;无论请求的时间长或者短&＃xff0c;用户都在专心的操作页面的其他内容&＃xff0c;并不会有等待的感觉。

&＃xff08;2&＃xff09;区别&＃xff1a;

• 同步是所有的操作都做完&＃xff0c;才返回给用户结果。即写完数据库之后&＃xff0c;再响应用户&＃xff0c;用户体验不好。
• 异步不用等所有操作都做完&＃xff0c;就相应用户请求。即先响应用户请求&＃xff0c;然后慢慢去写数据库&＃xff0c;用户体验较好。

五、Ajax 相关面试题

• 什么是Ajax ? 如何创建一个 Ajax 以及请求状态&＃xff0c;从0-4的变化
• 同步和异步的区别?
• 简述 Ajax 的过程
• 页面编码和被请求的资源编码如果不一致如何处理&＃xff1f;
• 阐述一下异步加载
• GET和POST的区别&＃xff0c;何时使用POST&＃xff1f;
• Ajax 属于 Javascript&＃xff1f;
• Ajax-GET-IE兼容问题
• Ajax-GET 封装
• POST 请求
• Ajax-POST 基本使用
• jQuery 中的 Ajax
• Ajax-XML
• Ajax-json
• 工作当中会和后台交互吗&＃xff1f; 那你能说说封装好的 ajax里的几个参数吗 &＃xff1f;
• 为什么要用ajax
• ajax最大的特点是什么&＃xff1f;
• Ajax主要包含了哪些技术&＃xff1f;
• ajax应用和传统Web应用有什么不同
• Ajax 请求总共有多少种CALLBACK
• 介绍一下Prototype的$()函数\&＃xff0c;$F()函数&＃xff0c;$A()函数都是什么作用
• Ajax 都有哪些优点和缺点&＃xff1f;
• 常用的 Ajax 框架有哪些&＃xff1f;
• Ajax 的核心对象是什么&＃xff1f;
• 如何实现 Ajax 请求
• Ajax 解决浏览器缓存问题

想要领取 Ajax 面试题和学习前端的小伙伴们&＃xff0c;可以加入这边的Q裙&＃xff1a;【624369675】
更多 (点击&＃x1f449;&＃x1f3fb;) 前端学习资料 &＃43; 前端大厂面试真题&＃xff0c;均可免费领取&＃xff01;