解决ajax无法访问本地文件的问题(使用js跨域原理)

博主自己在开发一个没有后台只有前台的查询系统时遇到了困难。百度和谷歌发现，大部分文章都是关于修改浏览器参数的，但是用户在使用的时候，也需要修改浏览器参数，明显降低了用户体验。琢磨了一会，发现可以用js的跨域原理来解决这个瓶颈。将json文件改为jsON对象文件，这样就可以读取这个文件，然后编写一个函数来解析这个JS对象。

首先说明js跨域原理和jsonp技术(如果不详细可以自己去百度和谷歌)

Src可以跨域请求，但是这个资源不能解析为js，而且这个资源不是js，所以解析json的时候会出现错误

中间是一个对象，通过调用fun传入。

定义的函数fun可以看作是请求成功后的回调函数

jsonp的本质是通过脚本标签跨域突破跨域限制请求；返回的数据包装在一个函数中

Jsonp用于解决js跨域请求数据的问题。其原理是通过脚本标签可以跨域请求资源的原理间接请求数据。

Jsonp需要满足三个条件：

1.通过脚本的src请求资源

2.用回调函数包装请求资源中的数据

3.调用者应该定义回调函数

下面粘贴演示来演示Ajax读取本地文件，ps:没有服务器，

下面是上面html页面的开始呈现(为了说明本地文件的成功读取)

粘贴上面的test.html代码

脚本类型=' text/JavaScript ' src=' http : js/jquery-easy ui-1 . 3 . 2/jquery-1 . 8 . 0 . min . js '/脚本函数fun(data){//var dataj=JSON . parse(data . pro)；//可以将json字符串转换为json对象alert(data . pro)；var obj=eval(data . pro)；//alert(obj . name)；//$.每个(obj，function(index，position){//alert(position[' name ']))；//html=' option value=' position[' name ']' ' ' position[' name ']'/option '；//});for(var I=0；iobj.length提醒。姓名)；} alert(1)；} /script /*以下代码是之前使用ajax读取本地json文件的代码，无法实现。运行时，以下代码*/script type=' text/JavaScript ' src=' http : JSON/ABC . JSON '/script script $(function(){ alert($)；/*$.ajax({ type: 'GET '，URL : ' JSON/position menu . JSON '，dataType: 'json '，success:function(数据){ alert(数据)；} });*/})/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。