Ajax简析

builder2991

已于 2023-06-26 16:53:51 修改

阅读量334

点赞数

分类专栏： ajax 文章标签： ajax 面试题

于 2020-04-20 20:45:43 首次发布

本文链接：https://blog.csdn.net/low666/article/details/105643105

版权

ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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一般用于修改服务器上的资源，对所发送的信息没有限制。比如
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，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是最好的选择)