標籤：
客服端：
在A項目下面 建立一個 JsonpClient.aspx頁面，代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonpClient.aspx.cs" Inherits="WebFrom.JsonpClient" %><!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 src="http://localhost:16908/Script/jquery-2.1.1.js"></script> <script type="text/javascript"> $(function () { $(document).on("click", "#btn", function () { $.ajax({ type: ‘post‘, url: ‘http://localhost:16908/JsonpServer.aspx‘,// 注意一：伺服器位址 data:{name:"Cupid",age:18}, dataType: ‘jsonp‘, jsonp: "callback", //注意二：回呼函數 success: function (data) {
console.log(data); } }); }); }) //注意三：回呼函數要做的事情 function callback(data) {
data=eval("("+data+")");
return data; } </script></head><body> <form id="form1" runat="server"> <div> <input type="button" id="btn" value="點擊" /> </div> </form></body></html>伺服器端：
在B項目下面 建立一個 JsonpServer.aspx頁面，代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using MVCDemoUtility;namespace _20150319_WeFrom{ public partial class JsonpServer : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.DisableKernelCache(); Response.Cache.SetNoStore(); string name = "name".QueryStrings();//也可以 Request.QueryString["name"].ToSTring() int age = "age".QueryStrings().ToInt32(); Response.Write("callback("+string.Format("{{Name:\‘{0}\‘,Age:{1}}}",name,age)+");");
// 注意四：callback 名字必須與 注意二中的 jsonp:"callback"一致 Response.End(); } }}
運行 服務端 然後在運行客服端 點擊 查看結果
補充幾個知識
$.ajax({ async:false, url: http://跨域的 type: "GET", dataType: ‘jsonp‘, jsonp: ‘callback‘, data: qsData, timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被觸發.原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了 }, success: function (json) { //用戶端jquery預先定義好的callback函數,成功擷取跨網域服務器上的json資料後,會動態執行這個callback函數 if(json.actionErrors.length!=0){ alert(json.actionErrors); } genDynamicContent(qsData,type,json); }, complete: function(XMLHttpRequest, textStatus){ $.unblockUI({ fadeOut: 10 }); }, error: function(xhr){ //jsonp 方式此方法不被觸發.原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了 //請求出錯處理 alert("請求出錯(請檢查相關度網路狀況.)"); }});
function callback(json){
return json;
}
jsonp的最基本的原理是:動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實與ajax XmlHttpRequest協議無關了.
這樣其實"jQuery AJAX跨域問題"就成了個偽命題了,jquery $.ajax方法名有誤導人之嫌.
如果設為dataType: ‘jsonp‘, 這個$.ajax方法就和ajax XmlHttpRequest沒什麼關係了,取而代之的則是JSONP協議.
JSONP是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過javascript callback的形式實現跨域訪問JSONP即JSON with Padding。由於同源策略的限制，XmlHttpRequest只允許請求當前源（網域名稱、協議、連接埠）的資源。如果要進行跨域請求，我們可以通過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。
jsonCallback 函數jsonp1236827957501(....): 是瀏覽器用戶端註冊的，擷取跨網域服務器上的json資料後，回調的函數
首先在用戶端註冊一個callback (如:‘jsoncallback‘), 然後把callback的名字(如:jsonp1236827957501)傳給伺服器。注意：服務端得到callback的數值後，要用jsonp1236827957501(......)把將要輸出的json內容包括起來，此時，伺服器產生 json 資料才能被用戶端正確接收。
然後以 javascript 文法的方式，產生一個function , function 名字就是傳遞上來的參數 ‘jsoncallback‘的值 jsonp1236827957501 .
最後將 json 資料直接以入參的方式，放置到 function 中，這樣就產生了一段 js 文法的文檔，返回給用戶端。
用戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時javascript文檔資料,作為參數，
傳入到了用戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裡.（動態執行回呼函數）
可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量採用這種方式來實現跨域資料交換的) .JSONP是一種指令碼注入(Script Injection)行為,所以也有一定的安全隱患.
C# 和Jsonp的一個小demo 用jQuery與JSONP輕鬆解決跨域訪問的問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
