Ajax 是什么?以及如何创建 Ajax?

前端面试 专栏收录该内容
10 篇文章 0 订阅

Ajax 是什么?以及如何创建 Ajax?

Ajax主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新。
早期的浏览器并不能原生支持 ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对 ajax 的原生支持 .

原理

​ 通过XMLhttprequire对象来向服务器发异步请求,从服务器获取数据,然后用JavaScript来操作dom而更新页面 最关键的就是从服务器获取请求数据

创建ajax的步骤

​ 创建xmlhttprequire对象 创建一个异步调用对象

​ 创建一个新的 HTTP 请求,并指定该HTTP 的请求方法,url及验证信息

​ 设置响应HTTP请求状态变化的函数

​ 发送HTTP请求

​ 获取异步调用返回的数据

​ 使用JavaScript和 DOM 实现局部更新

代码部分

ar xhr = null;  //创建对象
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("方式", "地址", "标志位"); //初始化请求
xhr.setRequestHeader("", "");     //设置 http  头信息
xhr.onreadystatechange = function () { }//指定回调函数
xhr.send();//发送请求

ajax优缺点

1.优点

页面局部刷新 用户体验好

异步通信 加快了响应能力

减少多余请求 减轻服务器的负担 节约宽带资源

不需要下载插件或者小程序

2.缺点

ajax干掉了back按钮和加入收藏书签的功能 对浏览器后退机制的损坏

存在一定的安全问题 ajax暴露了与服务器交互的细节

对搜索引擎的支持比较弱

破坏了程序的异常机制

无法用url直接访问

ajax请求的时候 get 和post方式的区别

​ get请求会将参数跟在url后进行传递 而post的请求则是http信息的实体内容发送 给服务器

​ get请求有数据长度限制 (大约是 2 kb) 而post理论上没有呢

​ get方式请求的数据会被浏览器缓存起来 post不会

​ get在某些情况下会有安全问题 post相对于较好一点 (其实他也不安全 还要做加密处理)

​ 在客户端使用get请求时服务器端使用Request.QueryString来获取参数,而客户端使用post 请求时,服务器端使用Request.Form来获取参数。

何时使用 POST?
在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

解释 jsonp 的原理,以及为什么 jsonp 为什么不是真正的ajex

​ JSONP的原理:jsonp是用来解决跨域获取数据的一种解决方案

1. ajsx和jsonp这两种的技术看起来很像 目的也一样 都是一个url 然后把服务器返回的数据进行处理

2. 实际上ajax与jsonp有着 本质上的不同 ajax的核心是通过xmlhttprequire获取数据 而jsonp的核心则是动态添加《script》标签来调用服务器提供的js文件

3. ajax与jsonp的区别也不再与是否跨域 Ajax通过服务端代理也可以跨域,JSONP也可获取同源数据

4. 总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点。

跨域产生的原因

同源策略

​ 不同协议 不同端口 不同域名以及ip地址的访问都会产生跨域

跨域解决的三种主流解决方案

1.jsonp

​ 主要是利用动态创建 script 标签请求后端接口地址,然后传递 callback参数,后端接收 callback,后端经过数据处理,返回 callback 函数调用的形式,callback 中的参数就是 json

优点: 浏览器兼容好

缺点: 只支持get请求方式

2.代理

​ 前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的,其中有个 proxyTable 来配置跨域的

前端代理核心实现通过 http-proxy-middleware 插件来实现的,vue2.x 和

vue3.x 脚手架代理跨域实现原理是一样的

3.CORS

​ CORS 全称叫跨域资源共享,主要是后台工程师设置后端代码来达到前端跨域请求的

​ CORS 的原理:CORS 定义一种跨域访问的机制,可以让 AJAX 实现跨域访问。 CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可

优点:无需前端工程师设置,只需后端工程师在请求的页面中配置好,并且支持所有请求方式(例如:get,post,put,delete 等)

缺点:浏览器支持有版本要求,如下:

​ chrome:13+,firefox:3.5+,IE 11+,edge:12+

​ 注:现在主流框架都是用代理和 CORS 跨域实

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值