javascript ajax 脚本跨域调用全解析

今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂。由是转到jquery.chm用户手册当中找到一些代码片段关于ajax跨域调用的问题。代码片段如下:

crossDomain                                                                            mapV1.5

默认: 同域请求为false

跨域请求为true如果你想强制跨域请求(如JSONP形式)同一域,设置crossDomain为true。这使得例如,服务器端重定向到另一个域。

这里强调如是ajax的跨域调用,dataType一定要是jsonp的格式。(什么是jsonp这里不做解释,可以google一下。)

令外还有一些代码片段:如下所示:

dataType                                     String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串

jsonp                                       String

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

jsonpCallback                String

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。

以上几个重要代码片段,重点是红色字的部分,要求跨域调用ajax要指定一个callback handler函数。

看了这么多大家也一定是看腻了,直接将上述的代码组合。此段代码在域:test.com中,现在要调用http://jks.com/JsTest.aspx进行ajax验证。代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript"> function invokeRemoteMethod() {
$.ajax({
url: 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=' + Math.random(),
type: 'get',
dataType: 'jsonp',
jsonp: "callback",
data: '',
success: function (data) {
alert(data.msg);
},
error: function (message) {
alert(message);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="but_invoke" value="调用" onclick="invokeRemoteMethod();" />
</form>
</body>
</html>

jks.com/JsTest.aspx后台代码如下:

namespace WebApplication1
{
public partial class JsTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var time = Request["time"];
var callback = Request["callback"];
string responseData = callback + "({msg:'成功'})";
Response.Write(responseData);
Response.Flush();
Response.End();
}
}
}

大家看明白了吗?返回结果是通过"callback"进行返回的。什么原理呢?由于翻开jquery的源码:

ajax: function (origSettings) {
.....
// If we're requesting a remote document
// and trying to load JSON or Script with a GET
if ( s.dataType === "script" && type === "GET" && remote ) {
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
script.src = s.url;
if ( s.scriptCharset ) {
script.charset = s.scriptCharset;
} // Handle Script loading
if ( !jsonp ) {
var done = false; // Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState === "loaded" || this.readyState === "complete") ) {
done = true;
success();
complete(); // Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
} // Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild ); // We handle everything using the script element injection
return undefined;
}
.....
});

最最关键的代码:

if ( s.dataType === "script" && type === "GET" && remote ) {
   var head = document.getElementsByTagName("head")[0] || document.documentElement;
   var script = document.createElement("script");
   script.src = s.url;

..................

head.insertBefore( script, head.firstChild );

......

}

由于可将这段代码  function invokeRemoteMethod() {
            $.ajax({
                url: 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=' + Math.random(),
                type: 'get',
                dataType: 'jsonp',
                jsonp: "callback",
                data: '',
                success: function (data) {
                    alert(data.msg);
                },
                error: function (message) {
                    alert(message);
                }
            });
        }

简单理解成:

function invokeRemoteMethod() {

    var head = document.getElementsByTagName("head")[0] || document.documentElement;

    var script = document.createElement("script");

    script.src = 'http://jks.com/JsTest.aspx?type=invoke&method=add&time=563&callback=callbackMegthod';

    head.insertBefore(script, head.firstChild);
        }

以上的代码相关于在head头上加了一个脚本的引用:

<script src="http://jks.com/JsTest.aspx? type=invoke&method=add&time=563&callback=callbackMegthod" type="text/javascript"></script>

当然还要指定一个callback的方法:

function callbackMegthod(data) {
            alert('callbackMegthod');
            alert(data.msg);
        }

还可以最白痴的理解成:

<html xmlns="http://www.w.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript">
function callbackMegthod(data) {
alert(data.msg);
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="but_invoke" value="调用" onclick="invokeRemoteMethod();" />
<script src="http://jks.com/JsTest.aspx?type=invoke&method=add&time=563&callback=callbackMegthod" type="text/javascript"></script>
</form>
</body>
</html>

就哪大家分享到这里,希望大家要遇到类似问题时候能有所帮助。哈哈~~

 
 

javascript ajax 脚本跨域调用全解析的更多相关文章

  1. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  2. Javascript实现简单跨域调用

    什么是JSONP? 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面 ...

  3. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  4. 改变mvc web api 支持android ,ios ,ajax等方式跨域调用

    公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...

  5. jquery ajax 无法跨域调用的解决办法

    今天要用到jquery ajax 跨域调用,但是ajax是禁止跨域调用的,所以只能先在php文件使用函数取得跨域的值,然后用ajax调用本地php文件.

  6. ajax jsonp跨域 【转】

    跨域的基本原理:    JSONP跨域GET请求是一个常用的解决方案,    JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...

  7. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  8. 总结Ajax跨域调用问题

    原文:http://blog.csdn.net/wangxiaohu__/article/details/7294842 (一):动态脚本注入的方法.即在页面中动态生成<script>脚本 ...

  9. AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

    问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...

随机推荐

  1. Oracle Data Provider for .NET now on NuGet

    Oracle Data Provider for .NET now on NuGet 时间 2015-03-02 22:30:00  Oracle Bloggers原文  http://cshay.b ...

  2. BZOJ 3282 Tree Link-Cut-Tree(LCT)

    题目大意: 给定N个点以及每一个点的权值,要你处理接下来的M个操作.操作有4种.操作从0到3编号.点从1到N编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor和.保证x到y ...

  3. WebApi及Fiddler工具

    WebApi及Fiddler工具 1.概述 曾经有人问:asp.net mvc和asp.net webapi区别在哪?这个其实不好回答的.可能因为mvc模式盛行的原因,webapi显得孤芳自赏了,让人 ...

  4. 修改 dll

    由于没有源码,想改dll,就要依靠反汇编了. 输入 ildasm.exe 据说也可以直接 C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin 找到该软件 ...

  5. css mainDiv和popbox居中

    <style>     .beCenter {         width:460px;         height:212px;         background:#ccc;    ...

  6. PHP 2:从一个实例介绍学习方法

    原文:PHP 2:从一个实例介绍学习方法 在前面我已经描述了PHP,Apache以及MySQL的安装与配置.下面将介绍一下我如何学习PHP.首先我自己已经有了一些编程经验,就拿我自己而言,已经熟悉C/ ...

  7. CSS知识点:选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  8. 查询职责分离(CQRS)模式

    查询职责分离(CQRS)模式 在常用的三层架构中,通常都是通过数据访问层来修改或者查询数据,一般修改和查询使用的是相同的实体.在一些业务逻辑简单的系统中可能没有什么问题,但是随着系统逻辑变得复杂,用户 ...

  9. sql内置函数pivot强大的行转列功能

    原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...

  10. 领域模型(Domain Model)

    领域模型(Domain Model) 一:面向对象设计中最简单的部分与最难的部分 如果说事务脚本是 面向过程 的,那么领域模型就是 面向对象 的.面向对象的一个很重要的点就是:“把事情交给最适合的类去 ...