学习、阅读笔记——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，如需转载请自行联系原作者