jquery ajax跨域用jsonp方式調用web服務的例子

ajax跨域對于許多的朋友來講還是用到的比較少了,但在一些大的應用開發時會用到了ajax跨域用jsonp了,下面我們就來看一篇jquery ajax跨域用jsonp方式調用web服務的代碼實例,希望文章能夠幫助到各位朋友。

在做一個demo的專案,需要將php,.net的幾個人,加起來一起做個web系統。考慮到語言不通,demo要的急。就直接web使用html+js+asmx服務的方式進行開發。

數據請求及返回流程是這樣的:

jquery ajax跨域用jsonp方式調用web服務的例子
理解了上面的流程圖,其實實現起來是很簡單的。

1、html中引用jquery

2、jquery使用ajax調用遠程web服務,這裏需要定義爲JSONP格式,並且加上callback參數

$.ajax({
//url:"http://y.com/ceshi.php",
url:"http://192.168.3.5:8880/stat.asmx/Login",
dataType:'jsonp',
data: {
name:"a",
pwd:"a"
},
jsonp:'callback',
success:function(result) {
alert(JSON.stringify(result));
},
timeout:3000
});
其中?jsoncallback=?是必須的,需要在伺服器端,針對這個參數對返回的jsonp進行參數組合。

這裏需要注意,web服務的真正地址是:服務.asmx/Login參數。login是.net的函數名稱

3、伺服器端獲取數據庫數據後,對返回值進行封裝

public void Login(string name, string pwd)
{
AP.Model.TB_User user = new TB_User();
AP.BLL.TB_User userbll=new AP.BLL.TB_User();
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
string jsoncallback = CheckResponse.GetResponse("callback");
user = userbll.GetModel(name, pwd);
string rehtml = CheckResponse.Cleaner(CheckResponse.GetObjectJson(user));
string returnvalue = "";
returnvalue = returnvalue + (jsoncallback + "({\"jsondata\":\"" + rehtml + "\"})");
// return returnvalue;
HttpContext.Current.htm = htm&(returnvalue);
HttpContext.Current.Response.End();
}

這使用了Newtonsoft的序列化組件


/// <summary>
/// 序列化數據到json
/// </summary>
/// <param name="value"></param>
/// <returns></returns>
public static string GetObjectJson(object value)
{
return Newtonsoft.Json.JsonConvert.SerializeObject(value);
}

其中,jsonp的字符串可能會有特殊字符串,需要轉移一下。


/// <summary>
/// json html字符串轉義
/// </summary>
/// <param name="_s"></param>
/// <returns></returns>
public static string Cleaner(string _s)
{
if (_s == null) return "";
System.Text.StringBuilder sb = new System.Text.StringBuilder(_s);
sb.Replace(@"\", @"\\");
sb.Replace(@"'", @"\'");
sb.Replace(@"""", @"\""");
sb.Replace(Environment.NewLine, @"\n"); //替換連在一起的\r\n
sb.Replace("\n", @"\n"); //單個替換
sb.Replace("\r", @"\n");
return sb.ToString();
}

可以看到這段代碼根據callback參數進行了封裝。

context.Response.ContentType = "text/json";
returnvalue = returnvalue + (jsoncallback + "({\"datata\":\"" + rehtml + "\"})");


跨域調用不是很困難的事情。

跨域相關問題及同源策略

域這麽麻煩爲什麽浏覽器或者系統直接允許不就行了?跨域的初衷是什麽?

初衷主要是浏覽器的安全策略:同源策略。

受同源策略限制,JavaScript不能跨域! 這裏提到了同源策略,那麽什麽是同源策略呢?

同源策略(Same Origin Policy),它是由Netscape提出的一個著名的安全策略。 現在所有支持JavaScript 的浏覽器都會使用這個策略。同源策略阻止從一個域上載入的腳本去獲取或操作另一個域上的文檔屬性。也就是說,受到請求的 URL 的域必須與當前 Web 頁面的域相同。這說明浏覽器隔離來自不同源的內容,以防止它們之間的操作。

爲何要使用同源策略?
答案:安全! 一個簡單的例子:比如一個黑客,他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶名,密碼登錄時,他的頁面就可以通過Javascript讀取到你的表單中input中的內容,這樣用戶名,密碼就輕松到手了。後果會非常嚴重!

那麽什麽才是同源?
所謂同源是指域名,協定,端口均相同。

同源的幾種情況:

1.不同域名屬于跨域,如:www.a.com和www.b.com,另外www.a.com 和www.a.com.cn 也屬于不同域名。

2.主域名和子域名(二級域名、三級域名等)跨域,如:www.a.com 和 sub.a.com
屬于跨域,sub.a.com 和 sub1.a.com 之間也是跨域。

3.不同協定屬于跨域,如:http://www.a.com 和 https://www.a.com。

4.不同端口,如: www.a.com:80和 www.a.com:81 。

5.IP和域名屬于跨域,如:123.125.106.16 和 t.suchso.com。

更多相關文章
  • 關于跨域問題一直是我們比較糾結的地方,下面我來總結一下關于ajax跨域訪問及JQuery的跨域的原理與解決辦法,希望此方法對各位同學有所幫助.JS的跨域問題,我想很多程序員的腦海裏面還認爲JS是不能跨域的,其實這是一
  • JSONP(JSON with Padding)是JSON的一種"使用模式",可用于解決主流浏覽器的跨域數據訪問的問題.現在我們來用JSONP解決Ajax跨域訪問問題.前幾天,工作上有一新需求,需要前端web頁面異步調用後台的Webservice方法返回信息.實現方法有多種,本例 ...
  • ajax跨域對于現在的web開發來講用到非常的多同時現在關于ajax跨域的實現方法也不少了,下文來爲各位整理4種ajax跨域實現方法.關于ajax跨域問題,今天整理了一下,其實還有其他辦法了,個人推薦以下4種.請參考:ajax 跨域實例一,傳統的ajax方法1,js代碼$("#ajax&q ...
  • JSON這種輕量級的數據交換格式,易于人閱讀和編寫,同時也易于機器解析和生成(網路傳輸速度快),所以在移動開發中應用特別廣範,以前我們講過PHP JSON數據的創建和解析程序代碼,現在我們來講講AJAX 跨域請求 - JSONP獲取JSON數據.相關文章:PHP JSON數據的創建和解析程序代碼JS ...
  • ajax跨域之cors我以前有介紹過,因爲安全限制JavaScript或Cookie只能訪問同域下的內容而不能訪問其它域下的內容了,但我們可以通過像jsonp或CORS來實現了,下面看幾個測試例子.由于安全限制(同源
  • Js中啓用CORS實現Ajax跨域請求
    CORS 允許一個域上的網路應用向另一個域提交跨域 AJAX 請求.實現此功能非常簡單,下
  • 對于ajax跨域時碰到session頁面值無效了,但這個問題只在ie浏覽器中失效在其它浏覽器都是沒有問題的,後來在網上發現有一句話可以搞定呀,下面來給大家分享一下.折騰了好久,發現一行這個搞定. 代碼如下 header('P3P: CP="CURa ADMa DEVa PSAo PSDo ...
  • 一般情況下AJAX跨域是不能跨域實現的,我們要實現ajax跨域就得采取一些辦法.本文我們來看看在nginx添加add_header Access-Control*指令實現AJAX跨域請求.AJAX從一個域請求另一個域會有跨域的問題.那麽如何在nginx上實現ajax跨域請求呢?要在nginx上啓用跨 ...
一周排行
  • ecshop連接mysql數據庫時會出現Can't select MySQL database錯誤了,下面我們一起來看看出現此問題的解決辦法,具體的操作步驟如下所示.錯誤提示 ECSHOP info: Can't s ...
  • distinct函數在sql中的應用
    distinct在sql中是過濾重複的數據了,下面我們一起來看一篇關于distinct在s
  • LIST BOX 真心有點蛋疼... 滾來滾去 你就是不知掉 他滾在那裏 ... 對于 在移動 設備上經常需要使用 列表 並且 滾動載入 這可蛋疼 .編輯過 Listbox 的template 人肯定知道 ListB
  • jquery 超級select 插件 v3.0.0.0插件 支持漢字.拼音.英文快速定位查詢的超級select插件.可方向鍵.tab 鍵快速選擇.<!doctype ><html ><h ...
  • oracle數據庫在多cpu環境中運行root.sh失敗,asm報ORA-04031
    oracle數據庫在多cpu環境中運行root.sh失敗,asm報ORA-04031問題是 ...
  • 來我們一起來看一篇關于Knockoutjs之Computed Observables的例子,對于各位初學Knockoutjs會有所幫助,具體如.如果你有一個firstName和一個lastName兩個觀察者,然後你想
  • 上周五吧,在vsphere上新上了一台CentOS6.5,進到系統裏後發現重啓網卡會直接返回shell,啓動日志如下錯誤日志如下 代碼如下 cat /var/log/boot.log Welcome to CentO
  • 愛情是一種包容,是接受對方,而不是改變對方.愛情是一種責任,是對你負責,而不是對愛情負責:愛情是一種堅守,不是缺了就找,累了就換.祝你幸福!愛情就是一魔咒,可將百煉鋼化爲繞指柔,任你蓋世英雄美人關難走,一旦愛了覆水難
  • 今天一個客戶說它的magento 1.6後台無法登錄,找了好久才找到解決辦法 ,這是從網上找到,希望同樣出現這種問題朋友能夠參考一下.magento 1.4.x stable has a problem on the
  • 今天需要做一個功能就是用戶選擇城市之後我們再根據用戶的選擇城市來返回城市區域了,開始使用的是onclick綁定select結果發現只要一點擊就執行了查詢,每次返回的都不一樣,後來改成change事件就解決了,下面一起 ...