关于JS的Ajax bf52 方法导致跨域问题的解决办法
2016-04-26 14:25
841 查看
前面发布了一篇关于利用load()方法拼接页面的技术文章,有网友运行后发现在谷歌浏览器里无法正常显示,console.log()控制台报错:
这是由于涉及到跨域问题!
由于该网友没有在服务器环境里运行含有ajax方法的页面,而是直接通过浏览器打开(类似file:///的访问形式,即file协议)
本地页面ajax()请求本地页面,须通过服务器环境运行,类似这样:
http:// href="http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=127.0.0.1" target=_blank>127.0.0.1:8888/2014/DEMO/html_ajax/index.html
注意:如果是在远程服务器里ajax()请求外域服务器里的页面,即使通过服务器环境运行也会报跨域的错误,此时需要通过JSONP的形式!
什么是JSONP?
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP举例:
$.ajax({
type : "get",
async:false,
url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
dataType : "jsonp",//jsonp数据类型
jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data){
$("#myID").text("Result:"+data.result)
},
error:function(){
alert('fail');
}
});
AJAX()方法中的async:false或async:true的用途
原创文章转载请注明出处!原文链接:http://www.exp99.com/jswz/f2e/1415609654_115.html
XMLHttpRequest cannot load file:///E:2014/DEMO/html_ajax/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. |
这是由于涉及到跨域问题!
由于该网友没有在服务器环境里运行含有ajax方法的页面,而是直接通过浏览器打开(类似file:///的访问形式,即file协议)
本地页面ajax()请求本地页面,须通过服务器环境运行,类似这样:
http:// href="http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=127.0.0.1" target=_blank>127.0.0.1:8888/2014/DEMO/html_ajax/index.html
注意:如果是在远程服务器里ajax()请求外域服务器里的页面,即使通过服务器环境运行也会报跨域的错误,此时需要通过JSONP的形式!
什么是JSONP?
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP举例:
$.ajax({
type : "get",
async:false,
url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
dataType : "jsonp",//jsonp数据类型
jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data){
$("#myID").text("Result:"+data.result)
},
error:function(){
alert('fail');
}
});
AJAX()方法中的async:false或async:true的用途
原创文章转载请注明出处!原文链接:http://www.exp99.com/jswz/f2e/1415609654_115.html
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 回顾 Firefox 历史
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证(升级版)
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究