前面发布了一篇关于利用load()方法拼接页面的技术文章,有网友运行后发现在谷歌浏览器里无法正常显示,console.log()控制台报错:
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://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