天天看點

jsonp之jQuery.getScript()方法的簡單使用

<code>&lt;!DOCTYPE HTML&gt;</code>

<code>&lt;html lang=</code><code>"en-US"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>    </code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code>

<code>    </code><code>&lt;title&gt;getScript簡單學習&lt;/title&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code> <code>src=</code><code>"http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>        </code><code>/*</code>

<code>            </code><code>參考:http://www.365mini.com/page/jquery_getscript.htm</code>

<code>                  </code><code>http://www.w3school.com.cn/jquery/ajax_getscript.asp</code>

<code>                  </code><code>http://www.css88.com/jqapi-1.9/jQuery.getScript/</code>

<code>                  </code><code>http://www.111cn.net/wy/jquery/83696.htm</code>

<code>                  </code> 

<code>            </code> 

<code>            </code><code>1.jQuery.getScript()函數用于通過HTTP GET形式加載</code>

<code>              </code><code>Javascript檔案并運作它。</code>

<code>            </code><code>2.該函數用于動态加載JS檔案,并在全局作用域下執行檔案中的JS代碼。</code>

<code>            </code><code>3.該函數可以加載跨域的JS檔案。請注意,該函數是通過異步加載資料的。</code>

<code>            </code><code>4.該函數屬于全局的jQuery對象。</code>

<code>            </code><code>5.注意:如果多次加載相同URL的js檔案,即使伺服器對js檔案啟用了緩存,</code>

<code>              </code><code>在第二次及以後加載該js檔案時,jQuery.getScript()仍然不會緩存。</code>

<code>              </code><code>因為該函數會在js檔案的URL後面添加一個時間戳參數字尾,</code>

<code>              </code><code>進而避免浏覽器擷取緩存的js檔案。</code>

<code>            </code><code>6.請注意不要直接在jQuery.getScript()執行後直接調用該js檔案中</code>

<code>              </code><code>的變量或函數,因為jQuery.getScript()是異步加載的,</code>

<code>              </code><code>在你通路其中的某個變量或函數時,可能該js檔案尚未完全加載完畢。</code>

<code>              </code><code>建議你最好在success回調函數中處理,</code>

<code>              </code><code>或者你能夠确認此時該js檔案已經加載完畢。</code>

<code>        </code><code>*/</code>

<code>        </code> 

<code>        </code><code>$.getScript(</code><code>"http://js.tv.itc.cn/kao.js"</code><code>,</code><code>function</code><code>(){</code>

<code>            </code><code>$(</code><code>"#go"</code><code>).click(</code><code>function</code><code>(){</code>

<code>                </code><code>alert(</code><code>"OK"</code><code>);</code>

<code>            </code><code>});</code>

<code>        </code><code>});</code>

<code>        </code><code>//回到函數的三個傳回值,第一個傳回值,第二個是狀态,第三個是狀态碼</code>

<code>        </code><code>$.getScript(</code><code>"http://js.tv.itc.cn/kao.js"</code><code>,</code><code>function</code><code>(data,textStatus,jqxhr){</code>

<code>            </code><code>console.log(data); </code><code>//undefiend  </code>

<code>            </code><code>console.log(textStatus); </code><code>//success</code>

<code>            </code><code>console.log(jqxhr.status); </code><code>// 200</code>

<code>            </code><code>console.log(</code><code>"Load was performed!"</code><code>);</code>

<code>        </code><code>//處理錯誤情況</code>

<code>        </code><code>$.getScript(</code><code>"http://js.tv.itc.cn/dicta.js"</code><code>)</code>

<code>         </code><code>.done(</code><code>function</code><code>(data,textStatus,jqxhr){ </code><code>//也可以隻要前兩個參數或前一個</code>

<code>            </code><code>console.log(</code><code>"Load was performed1--------------!"</code><code>);</code>

<code>            </code><code>console.log(data); </code><code>//undefined</code>

<code>         </code><code>})</code>

<code>         </code><code>.fail(</code><code>function</code><code>(jqxhr, settings, exception){</code>

<code>            </code><code>console.log(</code><code>"***********************************!"</code><code>);</code>

<code>         </code><code>});</code>

<code>    </code> 

<code>        </code><code>$(document).ready(</code><code>function</code><code>(){</code>

<code>    </code><code>&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code><code>&lt;button id=</code><code>"go"</code><code>&gt;Run&lt;/button&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>xml:lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html;charset=UTF-8"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;JSONP之getScript的用法&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>            </code><code>我們在這邊文章中分析了JSONP:http://hanchaohan.blog.51cto.com/2996417/1291927</code>

<code>            </code><code>下面我分析一下使用匿名JSONP的使用方法。</code>

<code>            </code><code>比如:http://store.tv.sohu.com/web/stpc/saveInformation.do</code>

<code>            </code><code>傳回的是:var result={"status":-2} 。</code>

<code>            </code><code>接口又不支援JSONP,我們此時使用匿名JSONP格式就比較好!</code>

<code>        </code><code>$(document).ready(function(){</code>

<code>            </code><code>var t=encodeURIComponent($("#form_name").val()),</code>

<code>                </code><code>a=encodeURIComponent("北京"),</code>

<code>                </code><code>f=encodeURIComponent("北京"),</code>

<code>                </code><code>r=encodeURIComponent("[email protected]"),</code>

<code>                </code><code>l=encodeURIComponent("demo"),</code>

<code>                </code><code>c=encodeURIComponent("13581746914");</code>

<code>                </code> 

<code>                </code><code>$.getScript("http://store.tv.sohu.com/web/stpc/saveInformation.do?type="</code>

<code>                    </code><code>+75+"&amp;name="+t+"&amp;email="+r+"&amp;phone="</code>

<code>                    </code><code>+c+"&amp;province="+a+"&amp;city="+f+"&amp;dealer="+l+"",function(data,textStatus,jqxhr){</code>

<code>                            </code><code>console.log("get--------------!");</code>

<code>                            </code><code>console.log(data); //undefined</code>

<code>                            </code><code>console.log(textStatus); //success</code>

<code>                            </code><code>console.log(jqxhr.status); // 200</code>

<code>                    </code> 

<code>                            </code><code>//接口傳回的是:var result={"status":0}</code>

<code>                            </code><code>console.log(result.status);</code>

<code>                            </code><code>console.log("\u53c2\u6570\u6709\u8bef\uff01");</code>

<code>                            </code><code>alert("\u63d0\u4ea4\u5931\u8d25")</code>

<code>                </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>"#"</code> <code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>""</code> <code>id</code><code>=</code><code>"form_name"</code> <code>value</code><code>=</code><code>"韓超"</code><code>/&gt;</code>

<code>    </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

     本文轉自韓立偉 51CTO部落格,原文連結:http://blog.51cto.com/hanchaohan/1733015,如需轉載請自行聯系原作者

繼續閱讀