关于JS的Ajax方法导致跨域问题的解决办法

前面发布了一篇关于利用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