在使用 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. 【C#】获取电脑DPI

    public static class DPIGeter { /// <summary> /// 获取DPI /// </summary> /// <param name ...

  2. firefox插件之 vimperator 的使用

    简介: vimperator 是 Firefox浏览器下的一个插件,可以让我们像使用vim 一样使用 firefox浏览器,高效畅快,不用鼠标了.它的官网为:http://www.vimperator ...

  3. ubuntu下使用VI编辑文件必知的常用命令

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  4. Android学习CursorWrapper与Decorator模式 (转至http://www.cnblogs.com/bastard/archive/2012/05/31/2527944.html)

    一 Decorator模式 意图: 动态的给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 动态的给一个对象,而不是对整个类添加额外职责,说明此模式将采用的结 ...

  5. VC++使用CSocket发送HTTP Request时需要注意发送数据的编码格式

    VS2010以及更高版本中新建的MFC项目字符集默认是Unicode,CString创建的字符串默认是Unicode. 使用CSocket时,若以CString组织需要发送的HTTP Head时,那么 ...

  6. PyQT中多重继承,其中继承的父类有QObject或QObject的子孙类

    如果Child多重继承(Parent_1,Parent_2,Parent_3),其super函数 super(Child, self).__init__() 则会执行继承的最左侧的父类:Parent_ ...

  7. centos7,yum安装工具报错

    1.问题描述:yum安装gcc和其他的工具时一直报错: 2.问题解决: 网上看到有类似文章: No more mirrors to try. 得知这可能是错误的缓存源导致,直接两个命令解决: yum ...

  8. 通过notepad++将混乱的xml配置的格式进行美化

    需求描述: 最近在进行hbase配置文件的修改之后,发现xml文件的格式很不美观, 然后,在网上找了些方法,实测,通过notepad++的xml tools插件就可 达到美化效果. 操作过程: 1.以 ...

  9. 移植opencv到pcDuino

    OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成,同时提供了Pytho ...

  10. 第四章 Spring.Net 如何管理您的类___让对象了解自己的容器

    我们在开发中,经常需要让对象了解自己所在的容器的信息,例如,有时我们需要让对象知道,对象所在容器的引用是什么,或者是对象在容器中的名称是什么 .Spring.Net 中提供了两个接口,我们使用这两个接 ...