js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词

1、跨域请求
所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作。
跨域指的协议、域名、端口 有一个不同的情况下都是跨域
例:在本站点请求外站的数据是不允许的

//在本站点请求外站点的资源是不允许的
$(function () {
$.ajax({
url: "http://127.0.0.1:14847/Web/jsonp.js",
success: function (data) {
console.log(data);
}
});
});

2、URL详解
http://www.baidu.com/a.html?key=1111
https://www.baidu.com:8080/a.html?key=2222
协议:http、https
域名:www.baidu.com
端口:8080 默认是80端口不显示
路径:/a.html
参数:key=2222

3、json
在页面中一般都会用ajax进行数据请求返回的是json格式,json(JavaScript Object Notation)是一种轻量级的数据交换格式,采用文本格式,兼容各大语言
表示一个对象:
{"name":"tom","sex":"F","age":"22"}
表示一组对象
[
{"name":"tom","sex":"F","age":"22"},
{"name":"jim","sex":"M","age":"21"}
]

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

采用一种变通的方法解决跨域请求的限制

  在ajax请求中出于安全考虑是绝对不允许跨域请求;
  但是有些确可以跨域请求例如:<img> <script> <style>这些标签是可以实现跨域请求的,不然也实现不了CDN请求;

//jsonp主要就是通过<script>嵌入外站点的js代码实现跨域请求,但是目标js文件不能直接输出json数据了;
//需要定义一个方法名,以参数的形式来调用,例如下面所示
//在目标js文件中定义了一个jsonp_20150316方法 括号号内的是参数
//在当前页引用时就通过参数的形式得到数据,从而实现了跨域请求 <script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var jsonp_20150316 = function (data) {
console.log(data["name"]);
console.log(data["sex"]);
console.log(data["age"]);
}; var url = "http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler";
//jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });
  //以下是动态引用目标请求文件 等价于<script src="http://127.0.0.1:14847/Web/jsonp.js" type="text/javascript"></script>
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script> //http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler
jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });

js中ajax如何解决跨域请求的更多相关文章

  1. 原生js封装ajax,实现跨域请求

    描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...

  2. Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题

        webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...

  3. 外部调用mvc的api方法时,如何解决跨域请求问题?

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

  4. JSONP方法解决跨域请求

    Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...

  5. SpringBoot解决跨域请求拦截

    前言 同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.co ...

  6. XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题

    查看原文 XMLHttpRequest.withCredentials  属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者 ...

  7. Django使用jsonp和cors解决跨域请求问题

    1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...

  8. 使用SpringMVC的@CrossOrigin注解解决跨域请求问题

    跨域问题,通俗说就是用ajax请求其他站点的接口,浏览器默认是不允许的.同源策略(Same-orgin policy)限制了一个源(orgin)中加载脚本或脚本与来自其他源(orgin)中资源的交互方 ...

  9. Web API中使用CORS解决跨域

    Web API中使用Cros解决跨域 如果两个页面的协议,端口和域名都相同,则两个页面具有相同的源,注:IE不考虑端口,同源策略不会阻止浏览器发送请求,但是它会阻止应用程序看到响应.如下图所示 COR ...

随机推荐

  1. openfire插件开发入门1

    .案例插件的功能 这个插件很简单,就是在openfire Server启动时,和关闭时,在控制台打印出消息. 3.插件开发的目录结构设计 先来看一下当前openfire在eclipse中的目录结构: ...

  2. USACO Section 3.1: Score Inflation

    完全背包问题 /* ID: yingzho1 LANG: C++ TASK: inflate */ #include <iostream> #include <fstream> ...

  3. java 无法找到main类解决办法

    java   无法找到main类解决办法 如果Java类有包名,你必须建相应的包文件夹并把文件编译或拷贝到到相应的文件夹下: 如下: 1.源文件文件:          E:\test\src\tes ...

  4. STL笔记(3) copy()之绝版应用

    STL笔记(3) copy()之绝版应用 我选用了一个稍稍复杂一点的例子,它的大致功能是:从标准输入设备(一般是键盘)读入一些整型数据,然后对它们进行排序,最终将结果输出到标准输出设备(一般是显示器屏 ...

  5. As of ADT 14, resource fields cannot be used as switch cases

        在导入Android Sample的ApiDemos的时候,发现R.id.xx的文件不能够在 switch cases 中使用 在google查询了下,找到以下答案: As of ADT 14 ...

  6. ubuntu13.04云主机部署gitlab6.6

    GitLab 是何物? GitLab是 GitHub 的山寨版,GitLab几乎包含了GitHub的所有功能,还包含比较有特色的功能:Code Review,Wiki,Merge Requests,最 ...

  7. LA 3177 长城守卫

    n为偶数的时候比较简单,就是相邻两个守卫的礼物和的最大值. 首先这是个下限,其次这个值也满足题目要求,所以这就是答案了. 当n为奇数的时候上限是守卫索要礼物的最大值的三倍. 这也很容易理解,比如n=5 ...

  8. 安装CouchbaseClient的过程中提示 Error 1935.An error occurred during the installation of assembly;Error:-1603 fatal error during installation

    安装过程中提示报错   点击确定后 安装程序会接着回滚,又提示报错如下       Error 1935的解决方法是下载一个微软的补丁. http://support.microsoft.com/de ...

  9. POJ 2395 Out of Hay 草荒 (MST,Kruscal,最小瓶颈树)

    题意:Bessie要从牧场1到达各大牧场去,他从不关心他要走多远,他只关心他的水袋够不够水,他可以在任意牧场补给水,问他走完各大牧场,最多的一次需要多少带多少单位的水? 思路:其实就是要让所带的水尽量 ...

  10. mysql应用存储过程批量插入数据

    --批量插入数据的sql语句 delimiter $$ DROP PROCEDURE IF EXISTS `test.sp_insert_batch` $$ CREATE DEFINER =`root ...