Ajax与JSON的一些总结

Ajax与JSON的一些总结1.1.1摘要Ajax技术的核心是XMLHttpRequest对象(简称XHR)，可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：在不重新加载页面的情况下更新网页在页面巳加载后从服务器请求数据在页面巳加载后从服务器接收数据在后台向服务器发送数据本文目录XMLHttpRequest的用法Ajax同源请求同源策略与跨源策略Ajax跨源请求1.1.2正文XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和Google采纳，W3C正在标准化它。它提供了一种简单的方法来检索URL中的数据。我们要创建一个XMLHttpRequest实例，只需new一个就OK了：////CreatesaXMLHttpRequestobject.varreq=newXMLHttpRequest。；也许有人会说：“这可不行啊！IE6不支持原始的XHR对象”，确实是这样，我们在后面将会介绍支持IE6或更老版本创建XHR对象的方法。XMLHttpRequest的用法在创建XHR对象后，接着我们要调用一个初始化方法open()，它接受五个参数具体定义如下:voidopen(DOMStringmethod,//"GET","POST”,"PUT","DELETE"DOMStringurl,optionalbooleanasync,optionalDOMStringuser,optionalDOMStringpassword)；通过上面的定义我们知道open()方法的签名包含五个参数，其中有参数method和url地址是必填的，假设我们针对URL:myxhrtest.aspx发送GET请求获取数据，具体定义如下：varreq=newXMLHttpRequest();req.open("GET","myxhrtest.aspx",false)；通过上述代码会启动一个针对myxhrtest.aspx的GET请求，这里有两点要注意：一是URL相对于执行代码的当前页面(使用绝对路径)；二是调用open()方法并不会真正发送请求，而只是启动一个请求准备发送。只能向同一个域中使用相同端口和协议的URL中发送请求；如果URL与启动请求的页面有任何差别，都会引发安全错误。要真正发送请求要使用send()方法，send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，我们必须传递一个null值。在调用send()之后，请求就会被分派到服务器，完整Ajax请求代码如下：varreq=newXMLHttpRequest();req.open("GET","myxhrtest.aspx",false)；req.send(null);在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，一般来说，可以将HTTP状态代码为200作为成功标志。这时，响应主体内容会保存到responseText中。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据，Ajax的同步请求代码如下:if(req!=null)(req.onreadystatechange=function()(if((req.status>=200&&req.status<300)||req.status////Dosomething.}else(alert("Requestwasunsuccessful:"+req.status);}}；req.open(〃GET〃，"www.myxhrtest.aspx”,true);req.send(null);}前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState=4时，表示收到全部响应数据，属性值的定义如下：readyState®描述0末初始化：尚未两用口p函。方法1启劫；尚未调用*nd。方法2已发送：值尚未收到响应3接收：巳经收到部分响应数据4完成:收到全都响应数据表1readyState属性值同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。现在我们要增加判断readyState属性值，当readyState=4时，表示全部数据接收完成，所以Ajax的异步请求代码如下：if(req!=null)(req.onreadystatechange=function()(////Checkstheasynrequestcompletedornot.if(req.readyState==4)(if((req.status>=200&&req.status<300)||req.status==304)(////Dosomething.}else(alert(〃Requestwasunsuccessful:"+req.status);}}}；req.open(〃GET〃，"www.myxhrtest.aspx”,true);req.send(null);}Ajax同源请求现在我们对Ajax的请求实现有了初步的了解，接下来我们将通过具体的例子说明Ajax请求的应用场合和局限。在日常网络生活中，我们在浏览器的地址中输入要访问的URL并且回车，浏览器会向服务器发送请求，当服务器收到请求后，把相应的请求页面发送回浏览器，我们会发现页面大部分加载完毕，有些还没有加载完毕。总得来说，采用异步加载方式不会影响已加载完毕的页面浏览，我们可以通过Ajax实现异步加载。这里我们以AdventureWorks数据库为例，把产品表(Product)中的数据通过报表呈现给用户，我们可以通过多种方法实现该报表需求，这里我们将通过Ajax实现该功能。首先，我们要把后台数据转换为JSON格式，接下来我们定义Product表的数据库访问对象(DAO)，具体的实现代码如下：///<summary>///Theproductdatatabledao.///</summary>publicclassProductDao(///<summary>///Initializesanewinstanceofthe<seecref="ProductDao"/>///</summary>publicProductDao()(}///<summary>///Getsorsetstheproductid.///</summary>publicintId(get;set;}///<summary>///Getsorsetstheproductname.///</summary>publicstringName(get;set;}///<summary>///Getsorsetstheproductserialnumber.///</summary>publicstringSerialNumber(get;set;}///<summary>///Getsorsetstheproductqty.///</summary>publicshortQty(get;set;}}前面我们定义了Product表的数据库访问对象一一ProductDao，它包含四个属性分别是产品的Id,名称，序列号和销售数量。接下来，让我们实现Product表的数据库操作类。///<summary>///Producttabledataaccessmanager.///</summary>publicclassProductManager(///<summary>///Thequerysql.///</summary>privateconststringQuery="SELECTProductID,Name,ProductNumber,SafetyStockLevelFRProduction.Product";///<summary>///Storestheobjectof<seecref="ProductDao"/>intolist.///</summary>privateIList<ProductDao>_products=newList<ProductDao>();///<summary>///Getsallproductsinproducttable.///</summary>///<returns>///Thelistof<seecref="ProductDao"/>object.///</returns>publicIList<ProductDao>GetAllProducts()(using(varcon=newSqlConnection(ConfigurationManager.ConnectionStrings[〃SQLCONN〃].ToString()))using(varcom=newSqlCommand(Query,con))(con.Open();using(varreader=com.ExecuteReader(CommandBehavior.CloseConnectic(while(reader.Read())(varproduct=newProductDao(Id=(int)reader[〃ProductID〃],Name=(string)reader[〃Name〃],SerialNumber=(string)reader[〃ProductNumber〃],Qty=(short)reader[〃SafetyStockLevel〃]};_products.Add(product);}}}return_products;}}前面我们实现了Product表的数据库操作类 ProductManager，它包含两个私有字段Quey和_products，还有一个获取Product表中数据的方法 GetAllProducts()。通过实现ProductDao和ProductManager，而且我们提供GetAllProducts()方法，获取Product表中的数据，接下来我们要调用该方法获取数据。为了使数据通过JSON格式传递给页面，这里我们要创建一般处理程序(ASHX文件)，一般处理程序适用场合：创建动态图片返回REST风格的XML或JSON数据自定义HTML

图1一般处理程序把一般处理程序文件添加到项目中时，会添加一个扩展名为.ashx的文件，现在我们创建一个一般处理程序ProductInfo，具体代码如下：<%@WebHandlerLanguage=〃C#〃Class=〃ProductInfo”%>usingSystem.Runtime.Serialization.Json;usingSystem.Web;usingASP.App_Code;///<summary>///Theproductdatahandler.///</summary>publicclassProductInfo:IHttpHandler(publicvoidProcessRequest(HttpContextcontext)(context.Response.ContentType="application/json";//Createsa<seecref="ProductManager"/>oject.varmanager=newProductManager();//InvokestheGetAllProductsmethod.varproducts=manager.GetAllProducts();//Serializesdatatojsonformat.varjson=newDataContractJsonSerializer(products.GetType());json.WriteObject(context.Response.OutputStream,products);}//Whethercanresuablebyotherhandlerornot.publicboolIsReusable(get(returnfalse;}}}大家注意到ProductInfo类实现了IHttpHandler接口，该接口包含一个方法ProcessRequest()方法和一个属性IsReusable。ProcessRequest()方法用于处理入站的Http请求。在默认情况下，ProductInfo类会把内容类型改为application/json，然后我们把数据通过JSON格式写入输入流中；IsReusable属性表示相同的处理程序是否可以用于多个请求，这里我们设置为false，如果为了提高性能也可以设置为true如下图所示，我们通过ProductInfo类成功地实现获取数据到响应流中，并且以JSON格式显示出来。=*LJIocaIh&5t:3452/ExceIU5ingXSLT：Productlnfo.a5hx巧禁用±竺kie宁Z无CSS错误-昼表单•口图片，V网页信息，口其它功能•,

［〔"Id”：1,"Naint”:^AdjustableR日。牛：1000,^SeriaLNuinber^:"AR -捋&《》=-控制台HTMLCSSfj本DOMIF?鳍『hl清除保持所有HTMLCSSJSKHR图片Flash媒体-GETProductlnfo.ashx 200OK localhost!34头蓿息肩史蒙存JSOMCache-ControlConnectionContent-LengthCache-ControlConnectionContent-LengthContent-lypeOateServerX-AspMet-VersionprivateCl；=日3SL53ajjuLisaticiL/jsQJiSat.；LZXav2CLZ03ASP.NETDevelapzaen-tZ.:.5<J7J717:2£G-M7Server/9.0.0.CAcceptAccept-EncodingAccept-LanguageConne<tionUser-Agentteat/litaLja：ppli^n/:;htaLi;aljAcceptAccept-EncodingAccept-LanguageConne<tionUser-Agentteat/litaLja：ppli^n/:;htaLi;aljapplica.tisn/iisl:a=0.3®W:i：wzdjijdeflatezh-crijzh二ii=-0.3jen~ue:si=G-5^etl二q_=0.3lreej5-aliw@laoalhnst:3452MsEillaj-'s.:(Windo^sNt;..:xv:.Z.DjG-ecX^€.；^_；.FXe场;图2Http请求当我们请求ProductInfo时，首先它会调用ProcessRequest()方法，接着调用

GetAllProducts()方法从数据库中获取数据，然后把数据通过JSON格式写入到响应流中。现在，我们已经成功地把数据通过JSON格式写入到响应流当中，接着我们将通过Ajax方式请求数据并且把数据显示到页面中。首先，我们定义方法createXHR()用来创建XMLHttpRequest对象，前面我们提到IE6或者更老的版本不支持XMLHttpRequest()方法来创建XMLHttpRequest对象，所以我们要在createXHR()方法中，增加判断当前浏览器是否IE6或更老的版本，如果是，就要通过MSXML库的一个ActiveX对象实现。因此，在IE中可能遇到三种不同版本的XHR对象(MSXML2.XMLHttp6.0，MSXML2.XMLHttp3.0和MSXML2.XMLHttp)。//CheckswhethersupportXMLHttpRequestornot.if(typeofXMLHttpRequest!="undefined")(returnnewXMLHttpRequest。；}//IE6andelderversion.elseif(typeofActiveXObject!="undefined")(if(typeofarguments.callee.activeXString!="string")(varversions=["MSXML2.XMLHttp6.0","MSXML2.XMLHttp3.0","MSXML2.XMLHttp"];for(vari=0;i<versions.length;i++)(try(varxhr=newActiveXObject(versions[i]);arguments.callee.activeXString=versions[i];returnxhr;}catch(ex)(thrownewError(ex.toString());}}returnnewActiveXObject(arguments.callee.activeXString);}else(thrownewError("NoXHRobjectavailable");}}returnnull;}$(document).ready(function()(GetDataFromServer();});前面我们定义了一个比较通用的方法用来创建XMLHttpRequest对象，并且它支持IE6或更老版本创建XMLHttpRequest对象，接下来我们将通过Ajax方法请求数据。functionGetDataFromServer()(//CreatesaXMLHttpRequestobject.varreq=newcreateXHR();明凿浇胆吉回堕’申A卬噎Y馨辑麻帝纣窖’毒快adijQSPAPf区谢轴辑麻某辨NOSf帝¥*%()°smd国虱纣繇，(某辨NOS1")辑麻辛xogsuods由油程，市辛冬％()工第工冲皿工旺或⑲叫fif>?^JMW'工弱不直重ibk尚坦’¥*%切拿鼻市咨XT2卬国方不叫准回典土甲:([[nu)puss,bsj:(snjq.，〃xqs"ojujq.onpo工d〃，〃的f)〃)uodo.阮二,q.s9nt)9juAsv2spusg//：(snq_即s•阮工+〃:-[njsssoonsuns即算。。阮可〃)]工。[2}9S-[9{{:(A[p)p[wopuoddg,AiQq.xsxuosC!jsqmn^^ijss,msq.i+〃:jsqmnu工d:〃+心。皿叫！+〃p：os〃+。山即皿洱！=q^iHJ9UUT，ATP•[uiq_q即q.oq.ui珥即sq-jssuj//:(〃皿叫[珥即〃 9q.nqijq.q_vq.ss,Aip:(z/Aip/z)q.u9m9_[g9q.^9J0,q.usmnoop=Aip:口]珥即=m9q.iJTOA}(++[：qq_Wu0[.即即>i!g=i工")joj：(q.xM°suodso工・b勺osjredNOS]=即即jtoa,sn^Aq.dijog^A^f2do工doq.q_x洱(NOSf)uo[q_即onq.osCqoq-diJOg^A^fsszi^ijqssq//：(〃q_xo』uos「〃)piAqq_uouio[qq.o3•[uoiunoop=aiq^xq^uosC:(q-XQ^ssuodssj,bsj)]工叫2////Og==snq_即s•阮二||(QOS>snq_2q.s•阮二椭002=<snq_即s•阮二))只}(衣==叫即s^p四二-t)9J)JI}()uoiq.ounj=弱ireip叫即sAp四工uo•阮工}(i：nu=jd)JiL.jIocaIhost:3452/EscelU5ingXSLT/AjaxSample.aspx0禁用-±Cookies/无CSS错误-旦表单-3图片-❼网页信息，□其它功能-■AdjustableRacesold1000;Productnuin'ber:AK-53S1BearingBallsold1000,Pro-du-ctnuinbex;BA-8327BEBallBearingsold800;Productnumber:BE-2349HeadsetBallBearingssold300;Productnumber:BE-290SBlad已sold800;Productnumber!BL-2036LLCrankarm sold 500; Product number: CA-5965MLCrankarm sold 500; Product number: CA-673SHLCrankarid sold 500; Product number: CA-745TChainringBoltssoldlOQOjProductnumber;CB-2903ChainringNutsold1000;Productnumber:CbT-6137Chainringsold1000;Productnumber:CR-7833CrownRac已sold1000;Productnumb已:r：CR-9981ChainStayssold1000;Productnumber:CS-2812Decal1sold1000;Productnumber:DC-8732Decal2sold1000;ProductrLvmbeT:DC-9824rriTrr^y^v^7-^nrjrrjn?rwrrB图3Ajax请求结果现在，我们成功地把数据输出到页面当中，也许用户还会觉得用户体验不好，那么我们给就该页面增加CSS样式。由于时间的关系，我们已经把CSS样式定义好了，具体如下：#header(width:100%;margin-left:10px;margin-right:10px;background-color:#480082;color:#FFFFFF;body(margin-left:40px;margin-right:40px;div#jsonText(background-color:#d9d9d9;-webkit-border-radius:6px;border-radius:6px;margin:10px0px0px0px;padding:0px;border:1pxsolid#d9d9d9;}div.dataltem(font-family:Verdana,Helvetica,sans-serif;color:#434343;padding:10px;}div.dataItem:nth-child(2n)(background-color:#fafafa;}div.dataItem:first-child(-webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;}div.dataItem:last-child(-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;}我们刷新一下页面，OK现在页面效果好多了。LJIocalhcist;3452/ExcelUsingX^LT/AjasSample.aspx0禁用xcookiez无错误，a表单，u图片•&网页信息-a其它功能-,AdjustableRacesaid1000;Productnumber:AR-5381BearingBallsold1000;Productnumber:BA-8327BBBallBearingsold800;Productnumber:BE-2349HeadsetBallBearingssold800;Productnumber:BIE-29Bladesold800;Productnumber:BL-2036LLCrankarmsold500;Productnumber:CA-5965图4Ajax请求结果同源策略与跨源策略上面我们获取页面和数据都是在同源请求情况下，也就是说，客户端浏览器请求的页面和数据都是属于同一域名、同一端口和同协议。同源策略：阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的URL的域必须与当前Web页面的域相同、相同端口。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。Webdomain图5同源请求过程在一些情况下，我们不可以避免地要地需要从其他域名或服务器中跨域请求数据，但前面提到Ajax只能向同一个域中使用相同端口和协议的URL中发送请求；如果URL与启动请求的页面有任何差别，都会引发安全错误。跨源策略（CORS）:是一个Web浏览器技术规范，它定义了一个方法让Web服务器允许其他域名页面访问它的资源。跨源策略定义了一个方法让浏览器和服务器可以交互决定是否允许跨源请求。

图6跨源请求过程大家注意到同源请求中我们使用的是JSON格式，但在跨源请求中却是使用JSONP，这时大家可能有点困惑，坦然我刚开始学习的时候也是这样的。首先我们必须理解JSON和JSONP的区别：JSON是一种数据格式，而JSONP像是通过一个方法名来封装JSON格式；由于浏览器允许跨源请求＜script＞资源，如我们的HTML页面代码中使用了Google的jQuery库，当我们Web程序发送跨源请求后，服务器给我们提供响应数据，但服务器无法预知接受JSON数据的方法名，所以我们要提供一个方法名。Ajax跨源请求跨域请求数据解决方案主要有如下解决方法：JSONP方式表单POST方式服务器代理Html5的XDomainRequestFlashrequest在介绍JSONP方式解决跨域请求数据之前，首先我们看看JSONP的定义。JSONP(JSONwithPadding)是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过Javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。由于同源策略的限制，XMLHttpRequest只允许请求当前源(域名、协议、端口)的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。假设博客园提供一个API接口：/hotblogs/json?，供开发者调用获取热门博文。这里我们可以通过两种方式调用该接口：用Javascript定义回调函数其实，通过Javascript定义回调函数调用该接口比较直观，我们只需告诉服务器接收数据的方法名就OK了，比如/hotblogs/json?callback=myFunction其中myFunction是我们在页面自定义的函数用来接收服务器回传的数据，myFunction的定义如下：//Thecallbackfunction.functionmyFunction(data)(//Yourcodehere.}使用jQuery的Ajax方法假设我们想在博客中增加显示浪微博的公共微博信息，我们可以在博客中调用微博提供的API获取跨源数据，接下来，我们将使用jQuery的Ajax方法获取跨域数据。首先，查看微博API文档找到了公共微博的API接口statuses/public_timeline获取最新的公共微博消息，它支持JSON或XML格式数据。参故必选建及范围sourcetruestring:courtfalseint,缺省值2。,最大值200courtfalseint,睐首值2CI,最大值200说明申请应用时分画AppK^y,调用表应用的唯一度用OAuth授殴此参数)每次返回的记昴每次返回的记歹表2请求参数上面的请求参数只有source(AppKey)是必须的，所以我们需要向微博申请AppKey，在调用API时，只需把我们的AppKey传递给接口就OK了。接下来让我们看一下微博数据组成，这里我们使用JSONviewer查看微博的数据组成，具体数据如下：j[]JS-Ohlj{}ocreated_^t:"SunMay132C:12:4E-0300戏12"id:3445S17F11134+95text:，不是的中国与司闰！！和却！！！：强熟推春好性而岸的％的这宫£歌白牛烧source:吉悦三f'avcrited:false4truncated:falsein_peply_tp_status_id:""in_neply_tn'_uaer_id:""in_r'ep^_tD_scrsen_nflnnE:geo:nullI・mid;3—17^111B44K-"J[Juser■id:17SB406217■scr55-n_nanrie:',Drin-knc_0IGBAMQ-D"■na™:mDrin-kod_B\GBANALT■province：-M- 锤甲『所呵用-如可叫二如前口并■city:7■Iccation: 辽'■:■description: ，用亡玩三，用•上生活・“■url:"http:/rblDg.xins.D/wuhuizhsn■profils_imsge_url:httpMg2./17S840621了*由562748839祁D”■domain:wuhuizhen■gender:T'■foliowers_ccunt:4fi6■friends_count:&67■st日tus牌_sunt;5525■favouritea_CDunt:53■created_at:'FriAugO6-C0:CC:00-080C201Cfoliowing:false=allQW_all_act_rns-g;怡曲-geD_=nabled:true■jarilied:false图7微博JSON数据通过上图，我们知道微博的数据信息很丰富，它是由一些基础数据类型和复杂数据类型user组成的，接下来我们将使用jQuery实现调用微博接口方法。首先，我们定义一个全局的对象，它包含三个属性分别是：numWeibo、appendTo和appKey，还有三个方法loadWeibo()、timeAgo()和clean()，具体定义如下：JQWeibo=(//Thenumberofweibosdisplayinthepage.//Setsthenumberofweibos,appendclassandappkey.numWeibo:15,appendTo:'#jsWeibo',//Theappkeyyouapplyfromweibo.appKey:YourAppKey,//Thefunctiontogetweibodata.loadWeibo:function()(},/**Convertthetimetorelativetime.@return(string}relativetimelike"8minutesago"*/timeAgo:function(dateString)(},ify:(clean:function(weibo)(returnthis.hash(this.at(this.list(this.link(weibo))));}}//ify};上面我们定义了一个对象JQWeibo,其中loadWeibo()方法使用jQuery的Ajax方法向微博API发送跨源请求，接下来让我们实现该方法吧。//Thefunctiontogetweibodata.loadWeibo:function()($.ajax((//WeiboAPI.url:"/statuses/public_timeline.jstype:"GET",dataType:"jsonp",data:(source:JQWeibo.appKey,count:JQWeibo.numWeibo},//Whentherequetcompleted,theninvokessuccessfunctiosuccess:function(data,textStatus,xhr)(//Setshtmlstructure.varhtml='<divclass=〃weibo〃>'+'<ahref=〃/DOMAIN"target=〃_blank〃>USER</a>'+'：WEIBO_TEXT<divclass="time">AGO</div>';//Appendsweibosintohtmlpage.for(vari=0;i<data.length;i++)($(JQWeibo.appendTo).append(html.replace('WEIBO_TEXT',JQWeibo.ify.clean(data[i].text))//UsesregexanddeclareDOMAINasglobal,iffoundreplaceal.replace(/DOMAIN/g,data[i].user.domain).replace(/USER/g,data[i].user.screen_name).replace('AGO',JQWeibo.timeAgo(data[i].created_at)));}}})}现在，我们使用$.ajax()方法向微博API发送跨源请求，而且我们向API传递了JQWeibo.appKey和JQWeibo.numWeibo，当请求完成后，调用Success()方法把JSON数据插入的页面当中。页面的HTML代码如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset二UTF-<title>WeiboFeed</title><scripttype="text/javascript"src="http://ajax.googleapis.cOm/ajax/libs/jquery/1.6.1/jquery.min.j<linkrel="stylesheet"type="text/css"href="css/WeiboFeed.css"</head><body><divid="jsWeibo"></div></body></html>COfile:///F:/MyWork/Enterprtse%ZODesic怪盗基德爱^bigbang：此时此刻，我泪流满面，微博给我颁表了【三好学生】勋章，我终于成为一名有身份的人！快去完善你的教育信息颌取三好学生勋章吧！http://'/zOEmRpT3minutesagop讴谢尧：最近心情很差因为陶要走了亲爱的福耍走了好好珍惜这几天通宵到死［悲伤］［熊潴］3minutes<wjdJessie-gft：老头感冒了，稍微有点发烧，我拿开水给他嚎他闭着眼睛，我说，他们叫你打麻将去误，你猜他怎么说，报头［偷笑］［偷笑］［偷美］贱吧@小小务他妈3mtwutesagoFCREATR-SIL-QIU-:老婆老婆，我好爱好爱你啊［爱你］［爱徐］我的糖糖最大最可爱了［害羞］［害着］老婆，我会好好爱你，不会辜员你的〜呵呵，5.M，我们领结婚证的日孑哟〜好开心，好激动呀〜我们永远永远都不离婚，最斐老婆了〜嘻嘻，其实糖糖我不舍得吃误，.那是老婆的［心族〜真可爱-Eva薇—兔子Baby-薇纸_Low电〜3minutesago时卯啊™TEFJ缸阳沪也I17WE曰H图8跨源数据如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。1.1.3总结本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。回答qianlifeng关于跨源请求的几个问题:一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？(可能对ajax了解不深）答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flashrequest等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。关于“用Javascript定义回调函数”那块看的不是很明白。传递当前页面的一个js方法给跨源服务器，为什么就能跨源请求了呢？（JSONP？）服务端根据这个js方法做了什么操作啊？答:首先我们理解JSON是一种数据格式，而JSONP像似通过一个方法名来封装JSON格式;而跨源请求不是说指定一个回调函数实现的，而是我们利用了浏览器允许跨源请求＜script＞资源，你也可以我的HTML代码中使用的是Google提供的jQuery库，这也说明了＜script＞资源可以跨源请求。当我们发送跨源请求后，服务器会返回JSONP，但服务器无法预知接受JSON数据的方法名，所有我们要把函数名告诉（传递）服务器。//JSON{"name〃:〃JK_Rush〃,〃id〃:23}//JSONPfunc（{"name":"JK_Rush","id":23}）;看你新浪微博的那个例子，是jquery的ajax对跨源做了处理？能不能说说您提到的两种跨源方式的区别或者不同的应用场景，还是随便都一样？答：是通过$.ajax（）方法实现的，如果