һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 򿪷ݿ⡬

dzJSONP--ajax

[]
20052 websjy 2012-3-27 12:47:45
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע

x
ȡݣ

ܿͻ˷ԭھɵķϷſͻWebҳϢһ̨(asp.net)ڿͻҳһ̬ʾϢĴͨajax첽Ǹ̨ȡõġֹµķͻwebҳǸֿ̨̨򱻲µķϡĿҵͬСͬ־ģҲѳֿȻһЩСĶ

"ôϢȡˣ첽urlҲѾ·ĵַ(http://xxxx.com/.../news.ashx)..."Сһ߱Թҿ˿IE7»˸ű"ܷ񤵤ޤ"Ĵ(ĵģ˼Ƿʱܾ)ϲĻӦ"ûȨ"ɡFirefoxChromeǿκνűģͨFirebug߲"Permission denied to call method XMLHttpRequest.open"

ͬԴ

ΪʲôĴأΪ֧JavascriptʹͬԴȫԡٶĽͣ

ͬԴԣNetscapeһİȫԡ֧JavaScript ʹԡνͬԴָЭ飬˿ͬһtabҳзֱ ٶȺ͹ȸҳ浱һٶִһűʱűĸҳģǷͬԴֻкͰٶͬԴĽűŻᱻִС

ΪȡݵԭˣβܽأûڿԽ⣬˽ʲôJSONPˡ

JSONJSONP

JSONPJSON񰡣֮ʲôϵ

JSON(JavaScript Object Notation) һݽʽJSONӦǺ˽˰ɣǺѿȥjson.org˽£׶

JSONPJSON with PaddingԳơһǹٷЭ飬ڷ˼Script tagsͻˣͨjavascript callbackʽʵֿʣJSONP򵥵ʵʽ--Դٶ

JSONPJSON+Paddingһ(PaddingΪ) ȿСȻϸܡ

ļԭ

⿴廹Ǻףֶ׶Сԡ½һasp.netwebsample.htmlҳһtest.jsļ£

sample.htmlĴ

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>test</title>
  5. <script type="text/javascript" src="test.js"></script>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
ƴ

test.jsĴ

  1. alert("success");
ƴ

sample.html"successϢƺ˵ʲô ⵽ôأãģ·ͬԴĻղDzѾVisual Studio½һWeb(ǽA)ٴһµVisual Studio½һWeb(B)ǵ֮ǰtest.jsļAƳȻ󿽱BСVisual Studio÷Alocalhost:20001,Blocalhost:20002ģһͬԴĻ(Ȼͬ˿ںŲͬǷͬԴ)

OKǽӦøsample.htmlĴ룬Ϊtest.jsļBˣurlҲͱlocalhost:20002


sample.htmlִ

  1. <script type="text/javascript" src="http://localhost:20002/test.js"></script>
ƴ

뱣ABWeb״̬ٴˢlocalhost:20001/sample.htmlʱ򣬺ԭһ"success"ĶԻǵģɹʵ˷ͬԴlocalhost:20002/test.jsνԶ̷ˡһŴӦѾο˵ԭˡ

<script>ǩsrcԲͬԴԼԿԻȡκηϽűִС


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| websjy 2012-3-27 12:53:15
| ʾȫ¥
2F
JSONPʵģʽ--CallBack

ղŵСӽ˿ԭǻȥٿJSONPĶ˵нjavascript callbackʽǾ޸´룬ʵJSONPjavascript callbackʽ

AsampleIJִ룺

  1. <script type="text/javascript">
  2. //ص
  3. function callback(data) {
  4.     alert(data.message);
  5. }
  6. </script>
  7. <script type="text/javascript" src="http://localhost:20002/test.js"></script>
ƴ


Btest.jsĴ룺


  1. //callbackjsonʽΪݣɻص
  2. callback({message:"success"});
ƴ

ʵJSONPļʵģʽ˵JSONPԭͣһصȻԶ̷ϵҽJSON ʽΪݣɻص

JSONصJSONPJSON+Paddingĺɡ

һ£ϣscriptǩܹ̬ĵãΪ̶htmlûҳʾִˣܲǿͨjavascript̬ĴscriptǩǾͿԶ̷ˡ

AsampleIJִ룺

  1. <script type="text/javascript">
  2. function callback(data) {
  3.      alert(data.message);
  4.     }
  5.      //<script>ǩķ
  6.     function addScriptTag(src){
  7. var script = document.createElement('script');
  8.        script.setAttribute("type","text/javascript");
  9.       script.src = src;
  10.         document.body.appendChild(script);
  11.   }

  12.      window.onload = function(){
  13.         addScriptTag("http://localhost:20002/test.js");
  14.    }
  15. </script>
ƴ

Btest.js벻䣬ִ³DzǺԭһءһԶ̷ĻֻҪaddScriptTagԶ̷srcֵͿˡ˵ΪʲôҪaddScriptTag뵽window.onloadķԭaddScriptTagоdocument.body.appendChild(script);scriptǩDZӵbodyģдjavascriptheadǩУdocument.bodyûгʼأҪͨwindow.onloadȳʼҳ棬Ų

򵥵JSONPʵģͣ㲻һJSONPһJSONPôģGoogleajaxӿڣhttp://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

q=?ʺDZʾҪݣҪǵڶcallback=?ʾصƣҲǽԼڿͻ˶Ļصĺ͸ˣ᷵㶨Ļصķȡjsonݴɻصеˣǿʵִɣ


  1. <script type="text/javascript">
  2.     //<script>ǩķ
  3.      function addScriptTag(src){
  4.         var script = document.createElement('script');
  5.         script.setAttribute("type","text/javascript");
  6.         script.src = src;
  7.        document.body.appendChild(script);
  8.      }
  9.      
  10.      window.onload = function(){
  11.          //appleԶĻصresultcallback
  12.          addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
  13.          
  14.    }
  15.      //ԶĻصresult
  16.      function result(data) {
  17.         //Ǿͼ򵥵Ļȡappleĵһ¼url
  18.         alert(data.responseData.results[0].unescapedUrl);
  19.      }
  20. </script>
ƴ


JSONPкܶ(Ϣʹ JSONP ʵֿͨţ 1 : JSONP jQuery ٹǿ mashup)

Digg API Digg ͷţ
Geonames APIʱλϢ
Flickr JSONP APIèͼƬ
Yahoo Local Search APIʱΪ 10504 ĵ

Լһ򵥵Զ̷ʵֺһJSONP񡣻WebAͳBʾڳBϴһMyService.ashxļ


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| websjy 2012-3-27 12:56:43
| ʾȫ¥
3F
BMyService.ashx
  1. public class MyService : IHttpHandler
  2.       {
  3.           public void ProcessRequest(HttpContext context)
  4.           {
  5.               //ȡص
  6.               string callback = context.Request.QueryString["callback"];
  7.               //json
  8.               string json = "{"name":"chopper","sex":"man"}";
  9.   
  10.              context.Response.ContentType = "application/json";
  11.             //ص(json)
  12.              context.Response.Write(callback + "(" + json + ")");
  13.          }
  14.         public bool IsReusable
  15.          {
  16.              get
  17.             {
  18.                  return false;
  19.             }
  20.          }
  21.      }
ƴ
Asampleеĵã
  1. <script type="text/javascript">
  2.       function addScriptTag(src){
  3.          var script = document.createElement('script');
  4.          script.setAttribute("type","text/javascript");
  5.           script.src = src;
  6.          document.body.appendChild(script);
  7.       }
  8.    
  9.     window.onload = function(){
  10.          //Զ̷
  11.          addScriptTag("http://localhost:20002/MyService.ashx?callback=person");
  12.       
  13.     }
  14.      //صperson
  15.      function person(data) {
  16.          alert(data.name + " is a " + data.sex);
  17.      }
  18. </script>
ƴ
һJSONPˣDzǺܼ򵥣˽JQueryεJSONPġ

jQueryJSONPʵ

jQueryҲȻ֧JSONPʹ$.getJSON(url,[data],[callback])(ϸԲοhttp://api.jquery.com/jQuery.getJSON/)Ǿ޸³AĴ룬jQuerygetJSONʵ(ûõ񴫲ΣֻдgetJSON(url,[callback]))
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script type="text/javascript">
  3.     $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
  4.         alert(data.name + " is a a" + data.sex);
  5.     });
  6. </script>
ƴ
һģҪעurlĺһcallbackgetJSONŻ֪JSONPʽȥʷcallbackǸʺڲԶɵһصҿdebugһ¿jQuery17207481773362960666_1332575486681

Ȼ˵ָԼĻص˵Ϲ涨˹̶صôأǿʹ$.ajaxʵ(϶࣬ϸԲοhttp://api.jquery.com/jQuery.ajax)ʵְɣ
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script type="text/javascript">
  3.    $.ajax({
  4.         url:"http://localhost:20002/MyService.ashx?callback=?",   
  5.         dataType:"jsonp",
  6.         jsonpCallback:"person",
  7.         success:function(data){
  8.             alert(data.name + " is a a" + data.sex);
  9.         }
  10.    });
  11. </script>
ƴ
ûjsonpCallbackǿָԼĻصpersonԶ̷callbackֵͲԶɵĻصpersondataTypeָJSOPNʽԶ̷

jQueryԺܷʵJSONPпʡʱдɡ

ߣǰ
http://www.cnblogs.com/chopper/
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ-̳ ( ICP19023897-2 )

GMT+8, 2022-7-2 03:11

ٻظ ض б