通过script标签实现JSONP跨域调用-白红宇

为了演示通过script标签实现JSONP跨域调用，在VS的解决方案中有两个不同域的网站，客户端网站ClientJSONP的域是http://localhost:50926/ClientJSONP.aspx，处理JSONP请求的服务器网站ServerJSONP的域是http://localhost:50854/ServerPage.aspx，本示例就是为了演示从ClientJSONP跨域调用ServerJSONP，解决方案如下图所示：

客户端ClientPage.aspx的前端代码：

                         
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientJSONP.aspx.cs" Inherits="ClientJSONP.ClientJSONP" %>
<!DOCTYPE html>
<
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
type
=
"text/javascript"
>  
        
function CallCrossDomainJSONPServer(url) {  
            
var oldScript = document.getElementById(url); // 如果页面中注册了调用的服务器，则重新调用  
            
if (oldScript) {  
                
oldScript.setAttribute("src", url);  
                
return;  
            
}  
            
var newScript = document.createElement("script");// 如果未注册该服务器，则注册并请求之  
            
newScript.setAttribute("type", "text/javascript");  
            
newScript.setAttribute("src", url + "?JSONP=OnJSONPServerResponse");  
            
newScript.setAttribute("id", url);  
            
document.head.appendChild(newScript);  
            
//注意，此处也可以写成document.body.appendChild，但是不能写成document.appendChild  
            
//因为脚本只能位于head部分或者body部分  
        
}  
        
function OnJSONPServerResponse(result) {  
            
alert(result);  
            
console.log(result);  
        
}  
    
</
script
>  
</
head
>
<
body
>
    
<
form
id
=
"form1"
runat
=
"server"
>
    
<
div
>
        
<
input
type
=
"button"
value
=
"跨域调用"
onclick
=
"CallCrossDomainJSONPServer('http://localhost:50854/ServerPage.aspx');"
/>
    
</
div
>
    
</
form
>
</
body
>
</
html
>
        
      

服务器ServerPage.aspx的后台代码：

                         
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ServerJSONP
{ 
    
public partial class ServerPage : System.Web.UI.Page
    
{ 
        
protected void Page_Load(object sender, EventArgs e)
        
{ 
            
Response.Charset = "utf-8";
            
Response.ContentType = "text/javascript";
            
//此例中客户端的回调函数为OnJSONPServerResponse  
            
string callback = Request["JSONP"];
            
string json = "{'state':'0','msg':'hello world!'}";
            
//OnJSONPServerResponse({'state':'0','msg':'hello world!'})  
            
string result = string.Format("{0}({1})", callback, json);
            
Response.Write(result);
            
Response.End();  
        
}
    
}
}

参考：

http://blog.csdn.net/iispring/article/details/7428069

本文转自 stock0991 51CTO博客，原文链接:http://blog.51cto.com/qing0991/1717017