ajax跨域终极解决办法!

在使用 ajax 的时候,往往需要通过 ajax 跨域请求一些?

但是 XMLHTTPRequest 是不支持跨域的,所以产生了 JSONP 这个东西来解决跨域,当然解决跨域的方式有很多种....

第一种解决跨域

<script type=‘text/javascript‘ >
(function(window){
    //AJAX获取界面信息
    $(function(){
        $.ajax({
            // 豆瓣API接口
            url:‘http://api.douban.com/v2/movie/in_theaters?count=2‘,
            dataType:"jsonp",
            jsonp:"callback",
            success:function(data){
                console.log(data);
            }
        });
    });
})(window);
</script>

这种解决跨域的方式,能够解决一些常规的业务逻辑,但是如果请求:天气的API接口就会有问题

url:‘http://www.weather.com.cn/data/sk/101010100.html‘

第二种解决跨域

可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现:

<?php
header("content-type:text/html;charset=utf-8");
//php代理获取天气信息
//跨域请求
//天气预报接口
$url = "http://www.weather.com.cn/data/sk/101010100.html";
$cont = file_get_contents($url);
echo $cont;
?>  

接下来使用 ajax 去请求本地的这个PHP文件即可:

<script type=‘text/javascript‘>
$(‘input.submit‘).click(function(){
    $.ajax({
        url:"weather.php",
        async:true,
        success:function(result){
            eval("var info="+result);
            console.log(info[‘weatherinfo‘][‘city‘]);
        }
    });
});
</script>

还有其他的方式来解决跨域,同样是通过JSONP的方式,我们可以自己编写JSONP文件,来解决跨域问题:

时间: 2024-08-07 03:15:02

ajax跨域终极解决办法!的相关文章

AJAX跨域的解决办法? 同步异步

1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请求失败   2. AJAX跨域的解决办法?   1.document.domain+iframe的设置 对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决. 具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b

AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 交互流程: 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收

基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是

Access to XMLHttpRequest at &#39;XXX&#39; from origin &#39;XX&#39; has been blocked by CORS policy: No &#39;Access-Control-Allow-Origin&#39; header is present o AJAX跨域请求解决方法

今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终: Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法 原文地址:https://www.cnblogs

第114天:Ajax跨域请求解决方法(二)

一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号) www  (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的"域". * 不同的域之间相互请求资源,就叫"跨域". 比如:http://www.abc.com/index.

ueditor富文本编辑器跨域上传图片解决办法

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域, 网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,相出了一个折中办法,很简单只需要修改demo中两个地方的代码外加写一个上传接口即可. 首先引入页面uedit

【跨域请求】Ajax跨域请求JSONP

前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白呢?--网上那些介绍资料都写的太复杂了! 我是能多简单就多简单,争取让你十分钟看完! 1. 同源策略 ajax之所以需要"跨域",罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫"同源"或者"同域"

js便签笔记(13)——jsonp事实上非常easy【ajax跨域请求】

前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明确呢?--网上那些介绍资料都写的太复杂了! 我是能多简单就多简单,争取让你十分钟看完! 1. 同源策略 ajax之所以须要"跨域".罪魁祸首就是浏览器的同源策略.即,一个页面的ajax仅仅能获取这个页面同样源或者同样域的数据. 怎样叫"同源"或者"同域&quo

Ajax跨域设置Access-Control-Allow-Origin

传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Firefox 3.5 及其以后的版本.Chrome浏览器.Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求. 在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息. Ajax跨域问题: 解决方法: r