1. 程式人生 > >Ajax跨域請求——jsonp獲取json資料

Ajax跨域請求——jsonp獲取json資料

JSONP(JSON with Padding)是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域資料訪問的問題;

例如在同一個系統中,我們進行了分散式分域名的部署,但是在這個域裡面,我們需要通過ajax的方式去訪問獲取另一個域的資料,這時就產生的跨域的請求,但是瀏覽器出去安全考慮,是不允許進行跨域請求的;

json與jsonp的區別:json是一種資料傳輸格式,而jsonp則是資料傳輸的協議或者是說方式。

直接碼程式碼:

前端頁面使用jquery進行ajax請求,當然使用js進行ajax請求的可以自行對應修改:

		$.ajax({
			type:'POST',
			url:  'www.xxx.com/goods/countGoodsNumByCategoryId.json',
			data:{"categoryId":id},
			dataType:'jsonp',
			async:false,
			jsonp:'jsonpCallback',//傳遞給後臺程式,用來獲取jsonp回撥函式名的引數名
			success:function(data){
				var isExistGoods = data.isExistGoods;
				var isNeedChooseCategory = data.isNeedChooseCategory;
				if(isExistGoods == 1){
					alertMsg.error("該類目下已存在商品,不能刪除!");
				}
				if(isNeedChooseCategory == 1){
					alertMsg.error("請選擇一個類目!");
				}
			},
			error:function(){
				alertMsg.error("該類目下已存在商品,不能刪除!");
			}
		});
我們的dataType必須為jsonp,然後比以往常規的ajax請求多了一個jsonp引數,這個引數是用來獲取後臺服務端返回的資料的;

服務端java程式碼:

	@RequestMapping({ "/countGoodsNumByCategoryId.json" })
	public void countGoodsNumByCategoryId(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("text/plain");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		Map<String, Object> paramsMap = new HashMap<String, Object>();
		Long categoryId = null;
		Map<String, Object> resultMap = new HashMap<String, Object>();
		String categoryIdJson = request.getParameter("categoryId");
		if (StringUtils.isNotBlank(categoryIdJson)) {
			categoryId = Long.parseLong(categoryIdJson);
			paramsMap.put("categoryId", categoryId);
			int goodsNum;
			try {
				goodsNum = goodsService.selectCount(paramsMap);
				if (goodsNum > 0) {
					resultMap.put("isExistGoods", BoolStatus.YES);
				} else {
					resultMap.put("isExistGoods", BoolStatus.NO);
				}
			} catch (ServiceException e) {
				LOG.error(e.getMessage(), e);
				resultMap.put("isExistGoods", BoolStatus.YES);
			}
		} else {
			resultMap.put("isNeedChooseCategory", BoolStatus.YES);
		}
		try {
			PrintWriter out = response.getWriter();
			JSONObject resultJSON = JSONObject.fromObject(resultMap); // 根據需要拼裝json
			String jsonpCallback = request.getParameter("jsonpCallback");// 客戶端請求引數
			out.println(jsonpCallback + "(" + resultJSON.toString(1, 1) + ")");// 返回jsonp格式資料
			out.flush();
			out.close();
		} catch (IOException e) {
			LOG.error(e.getMessage(), e);
		}
	}

上面這個程式碼片段,有些是我自己進行了工具類封裝的,根據意思大家就能明白是起什麼作用的。

返回資料是通過response的流來進行直接返回的,這裡從request中間獲取了一個jsonpCallback,這個跟我們的前臺ajax那個jsonp引數是對應的,大家可以自行修改成自己喜歡的名稱。

然後這樣我們就完成了,跨域情況下的ajax請求。