學習、閱讀筆記——jsonP&Ajax各種AJAX方法的使用比較(1)輕松掌握AJAX（jQuery）異步通信

一、jsonP

jsonP，用戶端浏覽器不允許跨域通路，當伺服器的協定、位址、端口号有一個不同時，即為跨域。jsonP是json Padding的縮寫，Padding可了解為字尾或者是填充。jsonP的重要特殊是具有一個回調函數，回調函數是調用者調用被調用域服務的标記，callback運作在被調用域伺服器上。jQuery支援jsonP，文法如下：

1

2

3

4

<code>jQuery.getJSON(</code><code>"http://www.yourdomain.com/jsonp/ticker?symbol=IBM&amp;callback=?"</code><code>, </code>

<code>            </code><code>function</code><code>(data) {</code>

<code>                </code><code>alert(</code><code>"Symbol: "</code> <code>+ data.symbol + </code><code>", Price: "</code> <code>+ data.price);</code>

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

?為回調函數名，預設為callback; 

還可以使用Ajax實作，文法如下：

5

6

7

8

<code>$.ajax({  </code>

<code>        </code><code>url:</code><code>"http://localhost:20002/MyService.ashx?callback=?"</code><code>,     </code>

<code>        </code><code>dataType:</code><code>"jsonp"</code><code>,  </code>

<code>        </code><code>jsonpCallback:</code><code>"person"</code><code>,  </code>

<code>        </code><code>success:function(data){  </code>

<code>            </code><code>alert(data.name + </code><code>" is a a"</code> <code>+ data.sex);  </code>

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

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

9

10

11

12

<code>    </code><code>@Override</code>

<code>            </code><code>protected</code> <code>void</code> <code>doGet(HttpServletRequest req, HttpServletResponse resp) </code>

<code>              </code><code>throws</code> <code>ServletException, IOException {</code>

<code>                </code><code>String jsonData = getDataAsJson(req.getParameter(</code><code>"symbol"</code><code>));</code>

<code>                </code><code>String output = req.getParameter(</code><code>"callback"</code><code>) + </code><code>"("</code> <code>+ jsonData + </code><code>");"</code><code>;</code>

<code>                </code><code>resp.setContentType(</code><code>"text/javascript"</code><code>);</code>

<code>                      </code> 

<code>                </code><code>PrintWriter out = resp.getWriter();</code>

<code>                </code><code>out.println(output);</code>

<code>                </code><code>// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});</code>

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

另外兩篇參考文章，分别是：

二、Ajax

Ajax即為異步的js和xml，由html、css、js、xml、xmlHtppRequest等組成，除XmlHttpRequest以外，其他技術都是已熟的web标準技術。Ajax的優點有：1.異動請求；2.局部重新整理；3.按需取數；缺點有：破壞浏覽器的回退按鈕行為；2.使用js作為驅動引擎，需考慮js相容性和debug等。

13

14

15

<code> </code><code>$.ajax({</code>

<code>                  </code><code>async: </code><code>false</code><code>,</code>

<code>                </code><code>url : </code><code>'../dependence/queryPost.action'</code><code>,</code>

<code>                </code><code>success : </code><code>function</code><code>(result) {</code>

<code>                    </code><code>var</code> <code>jobList = result.staffinfoVo.jobList;</code>

<code>                    </code><code>if</code><code>(jobList != </code><code>null</code> <code>&amp;&amp; $(</code><code>"option"</code><code>, post).length&lt;1){</code>

<code>                        </code><code>post.append(</code><code>'&lt;option value=""&gt;-請選擇-&lt;/option&gt;'</code><code>);</code>

<code>                        </code><code>$.each(jobList, </code><code>function</code><code>(i,item){ </code>

<code>                            </code><code>if</code><code>(item.active==</code><code>"Y"</code><code>){</code>

<code>                                </code><code>post.append(</code><code>'&lt;option value="'</code><code>+ item.jobCode +</code><code>'"&gt;'</code><code>+item.jobName+</code><code>'&lt;/option&gt;'</code><code>).val(val);</code>

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

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

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

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

參考：

     本文轉自 gaochaojs 51CTO部落格，原文連結：http://blog.51cto.com/jncumter/1754829，如需轉載請自行聯系原作者