Ajax主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新。 早期的浏览器并不能原生支持 ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对 ajax 的原生支持 .
原理
通过XMLhttprequire对象来向服务器发异步请求,从服务器获取数据,然后用JavaScript来操作dom而更新页面 最关键的就是从服务器获取请求数据
创建ajax的步骤
创建xmlhttprequire对象 创建一个异步调用对象
创建一个新的 HTTP 请求,并指定该HTTP 的请求方法,url及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和 DOM 实现局部更新
ajax优缺点
1.优点
页面局部刷新 用户体验好
异步通信 加快了响应能力
减少多余请求 减轻服务器的负担 节约宽带资源
不需要下载插件或者小程序
2.缺点
ajax干掉了back按钮和加入收藏书签的功能 对浏览器后退机制的损坏
存在一定的安全问题 ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制
无法用url直接访问
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是用来解决跨域获取数据的一种解决方案
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 跨域实