Ajax实现跨域访问的三种方法

本文给大家介绍了ajax实现跨域访问的3种解决方案,非常的实用,个人比较推荐第三种,小伙伴们可以着重看下。
 
 

一、什么是跨域

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

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页面中添加如下代码:

?

1
2
3
4
5
6
7

  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页面中:

?

1
2
3
4
5
6
7
8
9
10
11

<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-09-09 08:54:17

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

Ajax实现跨域访问的三种方法_AJAX相关

一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)                www  (子域名)              google (主域名)                8080 (端口号) script/jquery.js (请求的地址) * 当协议.子域名.主域名.端口号中任意一各不相同时,都算不同的"域". * 不同的域之间相互请求资源,就叫&

浅谈JQuery+ajax+jsonp 跨域访问_jquery

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q

ajax跨域访问-ajax的跨域访问快递接口

问题描述 ajax的跨域访问快递接口 访问一个快递查询接口:html如下: <!DOCTYPE html><html><head><meta charset=""UTF-8""><title>Insert title here</title><script type=""text/javascript"" src=""js/jqu

AJAX的跨域访问-两种有效的解决方法介绍_php技巧

新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可.比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet.代码如下:HTML的JS的

ajax js 跨域访问问题

问题描述 我现在就遇到了你说的ajax跨域的问题,我的是一个静态的html的网页,通过js想去请求一个action 或者一个servlet 将值在返回到页面上,由于跨域得不到返回来的值.我看人家例子用jsonp 是这么用吗?想请教一下.. <script type="text/javascript"> var url = "http://192.168.1.181:8080/PisWeb/login!getstr.action"; function ca

ASP.NET AJAX Advance Tips &amp;amp; Tricks(11) 三种方法动态创建Tooltip

前言 如何动态创建提示框(Tooltip)是ASP.NET Forum里的常见问题之一,在做技术支持时,我曾在英文 博客上总结过ASP.NET和ASP.NET AJAX环境下如何动态创建提示框的三种常见方法,比较基础,收到了蛮 多老外们的commend,如今英文博客被墙,特转到这里来与大家分享. 原文地址: http://lancezhang.wordpress.com/2008/12/04/create-tooltip-dynamically/ http://lancezhang.wordpr

浅析JSONP解决Ajax跨域访问问题的思路详解_AJAX相关

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

AJax与Jsonp跨域访问问题小结_AJAX相关

####JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // F

Ajax 设置Access-Control-Allow-Origin实现跨域访问

ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jQuery的jsonp方法,type设为POST,也会自动变为GET. 官方问题说明: "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query s