在使用 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文件,来解决跨域问题:

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

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

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  2. Ajax跨域访问解决办法

    方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...

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

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  4. ajax跨域的解决办法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...

  5. vue-cli开发时,ajax跨域详细解决办法

    在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址] proxyTable: { '/ ...

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

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  7. 第113天:Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  8. 前端面试题常考&必考之--跨域的解决办法

    1.为啥出现跨域??? 在制定Html规则时,为了安全的考虑,一个源的脚本(网页,网站)不能与另一个源的资源进行交互, 所以就引发一个词叫做“同源策略”. 同源策略:同源策略是一种约定,它是浏览器最核 ...

  9. (转)jquery ajax使用及跨域访问解决办法

    原文地址:***/UIweb/jquery_ajax_kuayujiejue.html 最近开发中,设计到智能手机项目,给领导做几个demo.主要是用jquery和jqeury mobile. 越来越 ...

随机推荐

  1. js类型转换 之 转数字类型

    手动将各类型 转换成 数字类型 JS提供了三种方法: Number(object); parseInt(string, radix); parseFloat(string, radix). 三种方法具 ...

  2. android EditText设置光标、边框和图标,以及限制输入

    控制边框形状,先在drawable中建一个xml文件:shape.xml <?xml version="1.0" encoding="utf-8"?> ...

  3. 【转】Microsoft .Net Remoting之Marshal、Disconnect与生命周期以及跟踪服务

    Marshal.Disconnect与生命周期以及跟踪服务 一.远程对象的激活 在Remoting中有三种激活方式,一般的实现是通过RemotingServices类的静态方法来完成.工作过程事实上是 ...

  4. 【转】DirectorySearcher.Filter属性说明

    DirectorySearcher.Filter属性扩充申明 DirectorySearcher mySearcher = new DirectorySearcher(entryOU, "( ...

  5. am335x mux配置

    /**************************************************************** * am335x mux配置 * * am335x的引脚复寄存器是C ...

  6. linux -- at命令

    在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...

  7. Openstack镜像和密码

    #!/bin/sh passwd ubuntu<<EOF ubuntu ubuntu EOF sed -i 's/PasswordAuthentication no/PasswordAut ...

  8. HTML的设计与应用

    <html> <head><!-- 设置网页头标题--> <!-- 不需要在页面中显示的内容写在这个里面 --> <base href=" ...

  9. Android中SurfaceView用法示例

    SurfaceView在游戏开发中有着举足轻重的地位,它对于画面的控制有着更大的自由度(不像View要用handler来更新,关于View的),但这方面的参考资料并不是太多,能找到的例子都有点喧宾夺主 ...

  10. HDFS原理解析(总体架构,读写操作流程)

    前言 HDFS 是一个能够面向大规模数据使用的,可进行扩展的文件存储与传递系统.是一种允许文件通过网络在多台主机上分享的文件系统,可让多机器上的多用户分享文件和 存储空间.让实际上是通过网络来访问文件 ...