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

跨域问题是Web前端开发者经常碰到的,久久经验网介绍下如何解决跨域问题

前面发布了一篇关于利用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方法涉及到 跨域 的问题导致!

由于该网友没有在服务器环境里运行含有ajax方法的页面,而是直接通过浏览器打开(类似file:///的访问形式,即file协议)

本地页面ajax()请求本地页面,须通过服务器环境运行,类似这样:

http://127.0.0.1:8888/EXP99.COM/html_ajax/index.html

注意:如果是在远程服务器里ajax()请求外域服务器里的页面,即使通过服务器环境运行也会报跨域的错误,此时需要通过JSONP的形式!

什么是JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

JSONP举例:

  1. $.ajax({ 
  2.     type : "get"
  3.     async:false
  4.     url : "http://app.example.com/base/json.do?sid=1494&busiId=101"
  5.     dataType : "jsonp",//jsonp数据类型 
  6.     jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 
  7.     success : function(data){ 
  8.         $("#myID").text("Result:"+data.result) 
  9.     }, 
  10.     error:function(){ 
  11.         alert('fail'); 
  12.     } 
  13. }); 

AJAX()方法中的async:false或async:true的用途

 

相关经验

导读书签
书签初始化中…