在使用 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. absolute绝对定位的非绝对定位用法

    总结: position为absolute的元素如果没有设置left, top等值与left:0;top:0;的的效果是不一样的.例如一个div中有个absolute属性元素,其没有left或是top ...

  2. [转自setting]神奇的jQuery

    前言 之前的项目也一直都是在用jQuery,遇到问题就翻翻API,也从来没有进行过比较系统的总结和整理.最近由于要做个培训,因为比较系统的归纳了一下javascript的相关知识,顺手做个笔记.说到j ...

  3. imx6dl uboot 移植

    新版的BSP引进的设备树的机制,在uboot中还添加了menuconfig的配置菜单. 参考官网的文档进行uboot移植,本文使用的cpu是imx6dl,uboot版本2015.04. 我要添加一个名 ...

  4. 用 #include “filename.h” 格式来引用非标准库的头文件

    用 #include “filename.h” 格式来引用非标准库的头文件(编译器将 从用户的工作目录开始搜索) #include <iostream> /* run this progr ...

  5. 【Java面试题】38 Collection 和 Collections的区别

    Collection是集合类的一个顶级接口,其直接继承接口有List与Set 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及线程安 ...

  6. (转)Spring开启Annotation<context:annotation-config> 和 <context:component-scan>诠释及区别

    转自:https://www.cnblogs.com/leiOOlei/p/3713989.html <context:annotation-config> 和 <context:c ...

  7. iOS: [UITableView reloadData]

    在 iTouch4 或者相差不多的 iPhone 上,不建议在 UIViewController 的 viewWillAppear 的方法中放置 UITableView 的 reloadData 方法 ...

  8. Int 型数值存储

    1. Int 在计算机中占 4 Byte, 共 32 位, 最大正数为 2147483647, 最小负数为 -2147483648 2. 正数存储在计算机中的形式为原码,最大正数的十六进制形式为 0X ...

  9. swift - 移除界面上的所有元素

    下面代码可以遍历移除页面视图上的所有元件: //清空所有子视图 func clearViews() { for v in self.view.subviews as [UIView] { v.remo ...

  10. Android NDK开发-2-环境搭建

    1.环境变量配置NDK 2.选中项目,右键属性菜单,创建一个新的编译器