Ajax简析
1、什么是Ajax和JSON,它们的优缺点
-
Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页面局部刷新
优点: 可以实现异步通信效果,页面局部刷新,带来更好的用户体验 -
JSON是一种轻量级的数据交换格式,看着像对象,本质是字符串
优点: 轻量级、易于人的阅读和编写,便于js解析,支持复合数据类型
2、ajax的交互流程有哪几步?
1)创建ajax对象
xhr = new XMLHttpRequest
2)规定请求地址
xhr.open(method,url,async)
3)等待服务器相应
xhr.onload
4)向服务器发送请求
xhr.send()
3、AJAX应用和传统Web应用有什么不同
在传统的Js中,如果想发送客户端信息到服务器,需要建立一个HTML 表单然后GET或者POST数据到服务器端
用户需要点击提交按钮来发送数据信息,然后等待服务器响应请求,页面重新加载
使用AJAX技术,就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互
4、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同?
IE中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到
使用jquery封装好的ajax,会避免这些问题
5、ajax如何解决浏览器缓存问题
-
在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)
-
在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)
-
在URL后面加上一个随机数: “fresh=” + Math.random();
-
在URL后面加上时间戳:“nowtime=” + new Date().getTime()
-
在jq ajax下,使用 $.ajaxSetup({cache:false}) 这样就不会保存缓存记录
6、简述ajax的优缺点
优点:
-
无刷新更新数据(在不刷新整个页面的情况下维持与服务器通信)
-
异步与服务器通信(使用异步的方式与服务器通信,不打断用户的操作)
-
前端和后端负载均衡(将一些后端的工作交给前端,减少服务器与宽度的负担)
-
界面和应用相分离(ajax将界面和应用分离也就是数据与呈现相分离)
缺点:
-
ajax不支持浏览器back按钮
-
安全问题 Aajax暴露了与服务器交互的细节
-
对搜索引擎的支持比较弱
-
破坏了Back与History后退按钮的正常行为等浏览器机制
7、阐述一下异步加载JS
-
异步加载的方案: 动态插入 script 标签
-
通过 ajax 去获取 js 代码,然后通过 eval 执行
-
script 标签上添加 defer 或者 async 属性
-
创建并插入 iframe,让它异步执行 js
8、json字符串与对象如何相互转换
把JSON格式转成对象:JSON.parse()
把对象转成标准json:JSON.stringify()
使用eval能够把字符串尽量转成js运行的代码 eval('(' + jsonstr + ')')
第一种方式:eval()
var data='{"student":[{"name":"张三","age":"11"},{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’;
eval(’(“+data+”)’);
第二种方式:JSON.parse()
var data='{"student":[{"name":"张三","age":"11"},{"name":"李四","age":"11"},{"name":"王五","age":"11"}]}’;
JSON.parse(data);
区别: eval方法不会去检查给的字符串时候符合json的格式,同时如果给的字符串中存在js代码eval也会一并执行
比如:
var data='{“student”:[{“name”:“张三”,“age”:“11”},{“name”:“李四”,“age”:“alert(11)”},{“name”:“王五”,“age”:“11”}]}’;
此时执行eval方法后会先弹出一个提示框输出11的字符串;
这时候使用JSON.parse()
就会报错
,显示错误信息为当前字符串不符合json格式;即JSON.parse()
方法会检查需要转换的字符串是否符合json格式.
相比而言eval
方法是很不安全
,特别是当涉及到第三方时我们需要确保传给eval的参数是我们可以控制的,不然里面插入比如window.location
,指向一个恶意的连接
总的来说,还是推荐使用JSON.parse
来实现json
格式字符串的解析。
9、get与post的区别,什么时候使用post?
-
get和post在HTTP中都代表着请求数据,其中get请求相对来说更简单、快速,效率高些
-
get相对post安全性低
-
get有缓存,post没有
-
get体积小,post可以无限大
-
get的url参数可见,post不可见
-
get只接受ASCII字符的参数数据类型,post没有限制
-
get请求参数会保留历史记录,post中参数不会保留
-
get会被浏览器主动catch,post不会,需要手动设置
-
get在浏览器回退时无害,post会再次提交请求
-
post一般用于修改服务器上的资源,对所发送的信息没有限制。比如
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
10、介绍一下XMLHttpRequest对象,他有哪些常用方法和属性
XMLHttpRequest是ajax的核心,通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新
常用的方法:
-
open
(get/post,url,是否异步)创建http请求 -
send()
发送请求给服务器 -
abort()
方法,停止当前请求 -
setRequestHeader()
设置头信息(使用post才会用到,get并不需要调用该方法)
常用的属性:
-
onreadystatechange
用于监听ajax的工作状态(readyState变化时会调用此方法) -
readyState
用来存放XMLHttpRequest的状态 -
status
服务器返回的状态码 -
responseText
服务器返回的文本内容
11、说下readyState属性是干什么的,都有哪几个状态
readyState属性用来存放XMLHttpRequest的状态,监听从0-4发生不同的变化
-
0:请求未初始化(此时还没有调用open)
-
1:服务器连接已建立,已经发送请求开始监听
-
2:请求已接收,已经收到服务器返回的内容
-
3:请求处理中,解析服务器响应内容
-
4:请求已完成,且响应就绪
12、jquery ajax怎么实现,有什么不足之处
$.ajax({
url:发送请求的地址,
data:数据的拼接,//发送到服务器的数据
type:'get',//请求方式,默认get请求
dataType:'json',//服务器返回的数据类型
async:true,//是否异步,默认true
cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息
success:function(){},//请求成功后的回调函数
error: function(){}//请求失败时调用此函数
})
不足:
(1)针对MVC的编程,不符合现在前端MVVM的浪潮
(2)基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
13、解释jsonp的原理
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,
而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
14、请问jsonp是不是ajax中实现跨域访问的技术
jsonp不是AJAX中实现跨域访问的技术
jsonp没有使用XMLHttpRequest对象
jsonp只是一种跨域的协议
jsonp只支持Get方式
15、页面编码和被请求的资源编码如果不一致如何处理?
对于ajax请求传递的参数,如果是get请求,参数传递中文,在有些浏览器会乱码
不同的浏览器对参数编码的处理方式不同,所以对于get请求的参数需要使用 encodeURIComponent
函数对参数进行编码处理于post请求不需要进行编码
16、AJAX请求总共有多少种CALLBACK
总共有8
种Callback
onSuccess、onFailure、onUninitialized、onLoading
onLoaded、onInteractive、onComplete、onException
17、拿到数据怎么区分是ajax还是jsonp
ajax: {}
jsonp:fn({})
ajax的数据jsonp不能用,jsonp的数据ajax是可以用的
jsonp本质是通过URL的方式进行请求的,所以它是get方式请求,没有post
18、ajax几种请求方式?他们的优缺点?
常用的post,get,delete,put
。不常用copy、head、link
等。
代码上的区别
- get通过url传递参数
- post设置请求头 规定请求数据类型
使用上的区别
-
post比get安全 (因为post参数在请求体中。get参数在url上面)
-
get传输速度比post快 根据传参决定的。 (post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
-
post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右 4:get获取数据 post上传数据 (上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)
19、Ajax包含下列技术:
-
基于web标准(standards-based presentation)XHTML+CSS的表示;
-
使用 DOM(Document Object Model)进行动态显示及交互;
-
使用 XML 和 XSLT 进行数据交换及相关操作;
-
使用 XMLHttpRequest 进行异步数据查询、检索;
-
使用 JavaScript 将所有的东西绑定在一起。