Ajax--跨域访问的三种方法

原文地址:http://www.cnblogs.com/mylove103104/p/4600779.html

一、什么是跨域

我们先回顾一下域名地址的组成:

http:// www . google : 8080 / script/jquery.js

      http:// (协议号)

www  (子域名)

google (主域名)

8080 (端口号)

script/jquery.js (请求的地址)

* 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。

* 不同的域之间相互请求资源,就叫“跨域”。

比如:http://www.abc.com/index.html 请求 http://www.def.com/sever.php

二、处理跨域的方法1 -- 代理(这个方法比较“笨” 故不做详细介绍)

比如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/sever.php)各有一个服务器,北京的后端(www.beijing.com/sever.php)直接访问上海的服务,然后把获取的响应值返回给前端。也就是北京的服务在后台做了一个代理,前端只需要访问北京的服务器也就相当与访问了上海的服务器。这种代理属于后台的技术,所以不展开叙述。

三、处理跨域的方法2 -- JSONP

假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求,那么我们在www.aaa.com页面中添加如下代码:

  var eleScript= document.createElement("script"); //创建一个script元素

  eleScript.type = "text/javascript"; //声明类型、

  eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url

  document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.bbb.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子:

在www.aaa.com页面中:

  <script>
    function jsonp( json ){
      document.write( json.name );  //输出周星驰
  }
  <script>

  <script src="http://www.bbb.com/getinfo.php"></script>

在www.bbb.com页面中:

  jsonp({ "name":"周星驰","age":45 });

也就是在www.aaa.com页面中声明,在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求,但不支持 “POST” 请求。

三、处理跨域的方法2 -- XHR2(推荐方法)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,对跨域访问提供了很好的支持,并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码:

  header( "Access-Control-Allow-Origin:*" );

  header( "Access-Control-Allow-Methods:POST,GET" );

关于 “XHR2” 的更多信息大家可以查看官方文档,在这里就不详细叙述了,总之这是这个很好用的方法。

时间: 2024-08-11 03:36:16

Ajax--跨域访问的三种方法的相关文章

jQuery 跨域访问的三种方式 No &#39;Access-Control-Allow-Origin&#39; header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

服务器端解决跨域问题的三种方法

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: - ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域. - ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域. 解决此类问题的方法很多,有需要客户端和服务端都要更改的,例如jsonp,iframe等等:有只需要客户端更改的,这种情况只能出现在hybrid app开发中,即通过调用native方法来进行网络请求:有只需要服务端配置的,

Geoserver通过ajax跨域访问服务数据的方法(含用户名密码认证的配置方式)

Goeserver数据有两种,一种需进行用户密码的权限认证,一种无须用户密码.对于网上跨域访问Geoserver数据的种种方法,对这2种数据并非通用. 笔者将Geoserver官方下载的Geoserver.war包部署到linux服务器,通过前端 ajax 访问geoserver数据失败,其中包含跨域问题和用户名密码认证问题,查询网上各类方法进行尝试,结果浏览器控制台分别报出了401,403和跨域错误提示.其中: 401错误:ajax未进行用户名密码验证导致: 403错误:用户名密码验证失败导致

ASP.NET MVC 实现AJAX跨域请求的两种方法

通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: JQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函

如何跨域访问的两种方法~

1. JSONP,需要客户端与服务端配合    什么是:填充式JSON--JSON with Padding    何时: 今后跨域,首选jsonp    如何:      基本思想:用其它可以跨域请求的元素,代替ajax     程序中都是用<script>元素代替ajax发送请求     方案一:       1. 服务端: 将要返回的数据,填充进一条字符串格式的js语句中,组成一条正确的可执行的js语句,再返回      2. 客户端: 添加<script src="服务

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot oad http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题,服务器端不接受来自另一个不同IP地址的由脚本文件发出的http请求.解决这个问题需要在服务器端进行配置使服务器端可以接受来自不同域的脚本文件的http请求.一个简单的解决方法是

Access-Control-Allow-Origin:ajax 跨域访问

在使用jquery的$.ajax跨域访问的时候,如客户端域名是www.test.com,而服务器端是www.test2.com,在客户端通过ajax访问服务器端的资源将会报跨域错误: XMLHttpRequest cannot load http://www.test2.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.test

浅析JSONP-解决Ajax跨域访问问题

浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaSc

System.Web.Http.Cors配置跨域访问的两种方式

System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心得.在webapi中使用System.Web.Http.Cors配置跨域信息可以有两种方式.  一种是在App_Start.WebApiConfig.cs的Register中配置如下代码,这种方式将在所有的webapi Controller里面起作用. using System; using Sys