Ajax同步和异步的区别,如何解决跨域的问题
同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式),同步强调的是顺序性,谁先谁后,异步则不存在这种顺序性。
同步:浏览器访问服务器请求,用户看到页面刷新,重新发送请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求,等请求完,页面不刷新,新内容也会出现,用户看到新内容。
关于如何解决跨域:
方法一:使用ajax的jsonp
JSONP(JSON with Padding(填充))是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,
在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,
这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。
即: <script src='url'></script>
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,
通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
简单来说就是,为了方便客户端使用数据,逐渐形成了一种非正式传输协议,也就是jsonp,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个
callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己发的函数来自动处理返回数据了。
方法二:前端本地proxy跨域代理配置
首先找到项目名为webpack.config.js,在里面找到decServer的配置
devServer: { proxy: { '/API': { // 定义代理的名称 changeOrigin: true, // 是否启动代理 target: 'http://xijipan.dev.grdoc.org', // 代理的域名
pathRewrite: {'^/API','/'} // 如果你的真实的api路径中没有/API这一个路径,把这句加上,如果本来就有/API这一路径的话,这句一定要去掉,要不然会导致域名找不到的 } } },
其实,上面那种配置了之后,在配置上已经完成了,但是我们一定要记住一点,我们配置的是代理、代理、代理,既然是代理,那我们就一定要去用了才能起作用,一定要将本地用到接口请求的地
方用/API替换掉,要不然肯定不起作用啦。
方法三:谷歌插件解决跨域
在谷歌插件里面去搜索Allow CORS:Access-Control-Allow-Origin
方法四:声明header头解决跨域
CORS定义一种跨域访问机制,可以让AJAX实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单,
只需要由服务器发送一个响应头标识即可。
当前我设置的headerwei“*”,任意一个请求过来之后服务端都可以进行处理响应,那么在调试工具中可以看到其头部信息设置,其中有一项
信息为“Access-Control-Allow-Origin:*”