Ajax简介、封装、同步异步 Ajax相关面试题
一、Ajax 简介
（1）什么是 Ajax ？
- Ajax = 异步 JavaScript 和 XML；
- Ajax 是一种用于创建快速动态网页的技术；
- 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新；
（2）工作原理：
（3）Ajax 的优点和缺点：
优点：
- 实现异步通信效果
- 实现页面局部刷新
- 带来更好的用户体验
- 按需获取数据
- 节约带宽资源
缺点：
- Ajax 不支持浏览器 back 按钮
- 安全问题 Ajax 暴露了与服务器交互的细节
- 对搜索引擎的支持比较弱
- 破坏了程序的异常机制
二、创建 XMLHttpRquest 对象
XMLHttpRequest 是 Ajax 的基础。
语法：
variable = new XMLHttpRequest();
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
示例：
function loadXMLDoc() {var xmlhttp;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();} else {// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);xmlhttp.send();
}
三、封装 Ajax
//封装ajax
function ajax(obj) {//创建XMLHttpRequest对象if(window.XMLHttpRequest) {var xhr = new XMLHttpRequest();}else{var xhr = new ActiveXObject("Microsoft.XMLHTTP");}obj.url = obj.url+'?rand='+Math.random(); //使用js随机字符串解决IE第二次它就默认获取缓存数据，导致数据不更新obj.data = (function(data){ //名值对转换为字符串闭包的方式调用var arr = [];for(var i in data){arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));}return arr.join('&');})(obj.data);if(obj.method === 'get')obj.url += obj.url.indexOf('?') == -1?'?'+obj.data:'&'+obj.data;if(obj.async === true){xhr.onreadystatechange = function(){if(xhr.readyState == 4){callback();}};}xhr.open(obj.method,obj.url,obj.async);if(obj.method === 'post'){xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //模仿表单提交xhr.send(obj.data);}else{xhr.send(null);}if(obj.async === false){callback();}function callback(){if(xhr.status == 200){obj.success(xhr.responseText); //函数回调}else{alert('获取数据失败!错误代号：'+xhr.status+',错误信息：'+xhr.statusText);}}
}//调用ajax
$(document).click(function(){ajax({method : 'post',url : 'demo.php',data : {'name' : 'Lee','age' : 100},success : function (text) {alert(text);},async : true});
});
四、同步和异步
Ajax 中根据 async 的值不同分为同步（async = false）和异步（async = true）
$.ajax({ type: "post", url: "path", cache:false, async:false, dataType: ($.browser.msie) ? "text" : "xml", success: function(xmlobj){ function1(){};}
});function2(){};
- 默认情况下 async 是 true；
（1）概念：
同步请求：(false)
同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，前一个人办理完自己的事务，下一个人才能接着办。异步请求：(true)
异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
（2）区别：
- 同步是所有的操作都做完，才返回给用户结果。即写完数据库之后，再响应用户，用户体验不好。
- 异步不用等所有操作都做完，就相应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。
五、Ajax 相关面试题
- 什么是Ajax ? 如何创建一个 Ajax 以及请求状态，从0-4的变化
- 同步和异步的区别?
- 简述 Ajax 的过程
- 页面编码和被请求的资源编码如果不一致如何处理？
- 阐述一下异步加载
- GET和POST的区别，何时使用POST？
- Ajax 属于 javascript？
- Ajax-GET-IE兼容问题
- Ajax-GET 封装
- POST 请求
- Ajax-POST 基本使用
- jQuery 中的 Ajax
- Ajax-XML
- Ajax-json
- 工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？
- 为什么要用ajax
- ajax最大的特点是什么？
- Ajax主要包含了哪些技术？
- ajax应用和传统Web应用有什么不同
- Ajax 请求总共有多少种CALLBACK
- 介绍一下Prototype的()函数，()函数，()函数，F()函数，$A()函数都是什么作用
- Ajax 都有哪些优点和缺点？
- 常用的 Ajax 框架有哪些？
- Ajax 的核心对象是什么？
- 如何实现 Ajax 请求
- Ajax 解决浏览器缓存问题
想要领取 Ajax 面试题和学习前端的小伙伴们，可以加入这边的Q裙：【624369675】
更多 (点击Ajax简介、封装、同步异步 Ajax相关面试题相关推荐
- ajax json 封装,Ajax--json（Ajax调用返回json封装代码、格式及注意事项）
Ajax调用json封装代码: //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="mydb") { //定义数据 ...
- ajax中的同步异步
请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用window.location.search获 ...
- ajax的同步,jquery ajax属性async(同步异步)
在jquery的ajax中如果我们希望实现同步或者异步时我们可以直接设置async属性为false和true 同步执行 当把async设为false时,这时ajax的请求时同步的 也就是说,这个时候a ...
- dubbo provider异步_Dubbo相关面试题
金九银十的面试季节,最近我会多发一些面试题相关的文章,因为墨白也要开始找工作了大家一起加油哈 ! ! ! Dubbo是什么? 答∶Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务 ...
- ajax要不要入口函数,Ajax - SegmentFault 思否
** Ajax 技术应用 1.Ajax 简介 1.1Ajax 是什么? Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(java ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式.JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数 ...
- Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应 数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性 原生Ajax Koa实现Ajax JSON DOM 接口文档 浏览器同 ...
- Ajax的优缺点以及异步和同步的区别
一.背景 上午时候同事问我这两个问题,其实大家都知道ajax的优点是不刷新页面加载,用户体验好,缺点是不安全之类的.但是并不能用很专业的术语来表述这些问题.这里记录一下. 二.Ajax的工作原理 1. ...
- ajax on ture,Ajax请求中的async:false/true(同步/异步)的作用
async. 默认是true,即为异步方式,$.Ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.Ajax里的success方法,这时候执行的是两个线程.若要将其设置为fa ...
最新文章
- HTML 基础知识（特殊字符的转义）
- 应用程序池超出其作业限制设置_网站改版注意事项 - 蜘蛛池
- Windows2000下Api函数的拦截分析
- 【NOIP2005】过河
- 鹿晗都有AI粉了，为什么AI换脸剧的效果还这么渣？
- ES6新特性之了解ES6以及其发展历史
- Guest权限突破8法(整理)
- 嵌入式linux面试题解析（四）——逻辑推理一
- android P OTA差分升级时报错记录
- 计算机技术在农机上的应用,计算机视觉技术在农机自动化上的应用与优势分析.pdf...
- 诺基亚9 PureView五摄机皇再曝光 低配高价毫无诚意？
- 【面试】iOS 开发面试题(二）
- 林业大学计算机专业排名2019,2019北京林业大学专业排名（4页）-原创力文档
- python 位运算符与逻辑运算符（字符串的逻辑运算）
- 如何不出国门走进NLP学术前沿
- windows java opencv怎么玩
- PID控制算法+倒立摆控制应用
- windows11右键恢复完整右键菜单
- 替换字符串中全部斜杠
- iOS开发 iPhone各型号的屏幕参数对照表 （pt 、px）
热门文章