JQUERY+AJAX+JSONP Cross-domain Access
Last Update:2016-06-24
Source: Internet
Author: User
<span id="Label3"></p><p><p>Jsonp (json with Padding) is a "usage pattern" of data format JSON that allows Web pages to obtain data from other Domains.</p></p><p><p>For more detailed information on jsonp, please refer to http://baike.baidu.com/view/2131174.htm, below is an example:</p></p><p><p></p></p><p><p>I. Client</p></p>HTML code <ol class="dp-xml" start="1"> <li><li><! DOCTYPE HTML public "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3.org/TR/html4/loose.dtd"<span class="tag">></span></li></li> <li><li><span class="tag"><<span class="tag-name">html<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">head<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">Meta <span class="attribute">http-equiv= "<span class="attribute-value">content-type" <span class="attribute">content= "<span class="attribute-value">text/html; Charset=utf-8 "<span class="tag">></span> </span> </span> </span> </span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">title<span class="tag">>insert title here<span class="tag"></<span class="tag-name">title<span class="tag">></span> </span> </span> </span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">script <span class="attribute">type=<span class="attribute-value">"text/javascript" <span class="attribute">src=<span class="attribute-value">"resource/js/jquery-1.7.2.js"<span class="tag">><span class="tag"></ <span class="tag-name"> Script<span class="tag">></span> </span> </span> </span> </span> </span> </span> </span> </span></span></li></li> <li><li><span class="tag"></<span class="tag-name">head<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">script <span class="attribute">type=<span class="attribute-value">"text/javascript"<span class="tag">></span> </span> </span> </span></span></li></li> <li><li>$ (function () {</li></li> <li><li>/*</li></li> <li><li>Abbreviated form, The effect is the same</li></li> <li><li>$.getjson ("http://app.example.com/base/json.do? <span class="attribute"> sid=<span class="attribute-value">1494&<span class="attribute">busiid=<span class="attribute-value">101&<span class="attribute">jsonpcallback=? ",</span> </span> </span> </span> </span></li></li> <li><li>function (data) {</li></li> <li><li>$ ("#showcontent"). Text ("Result:" +data.result)</li></li> <li><li>});</li></li> <li><li>*/</li></li> <li><li>$.ajax ({</li></li> <li><li>Type: "get",</li></li> <li><li>async:false,</li></li> <li><li>Url: "http://app.example.com/base/json.do?" <span class="attribute">sid=<span class="attribute-value">1494&<span class="attribute">busiid=<span class="attribute-value">101 ",</span> </span> </span> </span></li></li> <li><li>DataType: "jsonp",//data type is JSONP</li></li> <li><li>Jsonp: "jsonpcallback",//parameter for the server to receive the function name of the callback call</li></li> <li><li>Success:function (data) {</li></li> <li><li>$ ("#showcontent"). Text ("Result:" +data.result)</li></li> <li><li>},</li></li> <li><li>Error:function () {</li></li> <li><li>Alert (' fail ');</li></li> <li><li>}</li></li> <li><li>});</li></li> <li><li>});</li></li> <li><li><span class="tag"></<span class="tag-name">Script<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">body<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"><<span class="tag-name">div <span class="attribute">id=<span class="attribute-value">"showcontent"<span class="tag">>result:<span class="tag"></<span class="tag-name">div<span class="tag">></span> </span> </span> </span> </span> </span></span></span></li></li> <li><li><span class="tag"></<span class="tag-name">body<span class="tag">></span> </span></span></li></li> <li><li><span class="tag"></<span class="tag-name">html<span class="tag">></span> </span></span></li></li> </ol><p><p>Two. Server-side</p></p>Java code <ol class="dp-j" start="1"> <li><li><span class="keyword">Import java.io.IOException;</span></li></li> <li><li><span class="keyword">Import java.io.PrintWriter;</span></li></li> <li><li><span class="keyword">Import java.util.HashMap;</span></li></li> <li><li><span class="keyword">Import java.util.Map;</span></li></li> <li><li><span class="keyword">Import javax.servlet.http.HttpServletRequest;</span></li></li> <li><li><span class="keyword">Import javax.servlet.http.HttpServletResponse;</span></li></li> <li><li><span class="keyword">Import net.sf.json.JSONObject;</span></li></li> <li><li><span class="keyword">Import org.springframework.stereotype.Controller;</span></li></li> <li><li><span class="keyword">Import org.springframework.web.bind.annotation.RequestMapping;</span></li></li> <li><li></li></li> <li><li><span class="annotation">@Controller</span></li></li> <li><li><span class="keyword">Public <span class="keyword">class Exchangejsoncontroller {</span></span></li></li> <li><li><span class="annotation">@RequestMapping (<span class="string">"/base/json.do")</span> </span></li></li> <li><li><span class="keyword">public <span class="keyword">void Exchangejson (httpservletrequest request,httpservletresponse response) {</span> </span></li></li> <li><li><span class="keyword">try {</span></li></li> <li><li>Response.setcontenttype (<span class="string">"text/plain"); </span></li></li> <li><li>Response.setheader (<span class="string">"Pragma", <span class="string">"no-cache"); </span></span></li></li> <li><li>Response.setheader (<span class="string">"cache-control", <span class="string">"no-cache"); </span></span></li></li> <li><li>Response.setdateheader (<span class="string">"Expires", <span class="number">0); </span></span></li></li> <li><li>map<string,string> map = <span class="keyword">new hashmap<string,string> (); </span></li></li> <li><li>Map.put (<span class="string">"result", <span class="string">"content"); </span></span></li></li> <li><li>PrintWriter out = Response.getwriter ();</li></li> <li><li>Jsonobject Resultjson = Jsonobject.fromobject (map); <span class="comment">//assemble JSON as needed</span></li></li> <li><li>String jsonpcallback = Request.getparameter (<span class="string">"jsonpcallback"); <span class="comment"> Client Request Parameters</span> </span></li></li> <li><li>Out.println (jsonpcallback+<span class="string">"(" +resultjson.tostring (<span class="number">1,<span class="number">1) +<span class="string">")"); <span class="comment"> Return JSONP Format Data</span> </span> </span> </span> </span></li></li> <li><li>Out.flush ();</li></li> <li><li>Out.close ();</li></li> <li><li>} <span class="keyword">catch (ioexception e) {</span></li></li> <li><li>E.printstacktrace ();</li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>}</li></li> </ol><p><p>JQUERY+AJAX+JSONP Cross-domain Access</p></p></span>
