前端面试题以及常见问题与答案(Ajax持续更新ing......)
目录
1.什么是Ajax ? 如何创建一个Ajax以及请求状态,从0-4的变化
描述:
Ajax全称是asynchronous javascript and xml,是一种异步请求数据的一种技术,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果
创建基本步骤:
var xhr =null;//创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(“方式”,”地址”,”标志位”);//初始化请求 xhr.setRequestHeader(“”,””);//设置http头信息 xhr.onreadystatechange =function(){}//指定回调函数 xhr.send();//发送请求
请求状态:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
xmlhttp.status:响应状态码
200: “OK”
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
408 (请求超时) 服务器等候请求时发生超时。
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
2.同步和异步的区别?
同步:阻塞的
其思想是:所有的操作都做完,才返回给用户。浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面。
异步:非阻塞的
其思想是:不用等所有操作等做完,就响应用户请求。浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新
3.如何解决跨域问题?
跨域的概念:协议、域名、端口都相同才同域,否则都是跨域。
1、可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据。
2、通过jsonp跨域j跨域问题的原理是,浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据,请求时添加一个参数为callbakc=?,?号时你要执行的回调方法。
4.简述Ajax的过程
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求
- 获取异步调用返回的数据
- 使用JavaScript和DOM实现局部刷新
5.页面编码和被请求的资源编码如果不一致如何处理?
对于 ajax 请求传递的参数,如果是 get 请求方式,参数如果传递中文,在有些浏览器 会乱码,不同的浏览器对参数编码的处理方式不同,所以对于 get 请求的参数需要使用 encodeURIComponent 函数对参数进行编码处理,后台开发语言都有相应的解码 api。对于 post 请求不需要 进行编码
6.阐述一下异步加载
- 异步加载的方案: 动态插入 script 标签
- 通过 ajax 去获取 js 代码,然后通过 eval 执行
- script 标签上添加 defer 或者 async 属性
- 创建并插入 iframe,让它异步执行 js
7.GET和POST的区别,何时使用POST?
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符;POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
- ASP.NET AJAX(Atlas)现存的一些常见问题以及解决方案[持续更新]
- 2018前端面试题以及收集的答案(不断更新中)
- React Native常见问题汇总(持续更新ing)
- 面试常见问题及相关答案整理(持续更新中)
- Coolpy使用注意事项以及常见问题解决办法(持续更新中)
- React Native常见问题汇总(持续更新ing)
- Moss/SharePoint 常见问题以及解决方法(持续更新中)
- 常见的前端面试题——(持续更新...)
- 如果我是面试官,我要出什么面试题(持续更新)--参考答案
- BAT笔试试题常见试题总结含答案(持续更新。。。)
- [置顶] 网上找的前端面试题--持续更新
- 前端常见BUG--js,及处理方法(持续更新)
- 常见的IOS面试题整理(附答案)待更新
- FAQ_Puppet: 常见问题 【持续更新中】
- 关于Maven在使用过程中遇到的问题以及解决方法总结---持续更新
- ReactJS前端项目 问题与解决记录(刚接触前端,根据项目中遇到的坑持续更新)
- HBase常见问题答疑解惑【持续更新中】
- 前端小技巧(持续更新,一些遇到问题的解决方案)
- [brew]brew app 开发常见问题汇总 -- 持续更新
- (持续更新)Xamarin.Forms之常见的问题