學(xué)習(xí)、閱讀筆記——jsonP&Ajax

一、jsonP

jsonP，客戶端瀏覽器不允許跨域訪問，當(dāng)服務(wù)器的協(xié)議、地址、端口號有一個不同時，即為跨域。jsonP是json Padding的縮寫，Padding可理解為后綴或者是填充。jsonP的重要特殊是具有一個回調(diào)函數(shù)，回調(diào)函數(shù)是調(diào)用者調(diào)用被調(diào)用域服務(wù)的標(biāo)記，callback運行在被調(diào)用域服務(wù)器上。jQuery支持jsonP，語法如下：

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
			function(data) {
			    alert("Symbol: " + data.symbol + ", Price: " + data.price);
			});

?為回調(diào)函數(shù)名，默認(rèn)為callback; 

還可以使用Ajax實現(xiàn)，語法如下：

$.ajax({  
        url:"http://localhost:20002/MyService.ashx?callback=?",     
        dataType:"jsonp",  
        jsonpCallback:"person",  
        success:function(data){  
            alert(data.name + " is a a" + data.sex);  
        }  
   });

《使用 JSONP 實現(xiàn)跨域通信，第 1 部分: 結(jié)合 JSONP 和 jQuery 快速構(gòu)建強大的 mashup》還給出了servlet實現(xiàn)，如下：

	@Override
        	protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
        	  throws ServletException, IOException {
        		String jsonData = getDataAsJson(req.getParameter("symbol"));
        		String output = req.getParameter("callback") + "(" + jsonData + ");";

        		resp.setContentType("text/javascript");
        	          
        		PrintWriter out = resp.getWriter();
        		out.println(output);
        		// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
        	}

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

我的一篇博文《json接口格式實現(xiàn)》和《深入理解jsonP》，jsonP的缺點是存在安全問題（客戶端執(zhí)行回調(diào)）和執(zhí)行失敗無提示。

二、Ajax

Ajax即為異步的js和xml，由html、css、js、xml、xmlHtppRequest等組成，除XmlHttpRequest以外，其他技術(shù)都是已熟的web標(biāo)準(zhǔn)技術(shù)。Ajax的優(yōu)點有：1.異動請求；2.局部刷新；3.按需取數(shù)；缺點有：破壞瀏覽器的回退按鈕行為；2.使用js作為驅(qū)動引擎，需考慮js兼容性和debug等。

Ajax的三個優(yōu)點可以讓頁面更加豐富，交互更加自由，用戶體現(xiàn)更佳，jQuery通過$.ajax提供了豐富的ajax功能，$.ajax的常用參數(shù)有data、type、success、beforesend、url、async等等。

 $.ajax({
		  		async: false,
				url : '../dependence/queryPost.action',
				success : function(result) {
					var jobList = result.staffinfoVo.jobList;
					if(jobList != null && $("option", post).length<1){
						post.append('<option value="">-請選擇-</option>');
						$.each(jobList, function(i,item){ 
							if(item.active=="Y"){
								post.append('<option value="'+ item.jobCode +'">'+item.jobName+'</option>').val(val);
							}
						});
					}
				}
			});

參考：

各種AJAX方法的使用比較(1)

輕松掌握AJAX（jQuery）異步通信