Java、jQuery和JSONP都是前端開發(fā)中非常重要的技術(shù)，通過這些技術(shù)，我們能夠更好地實(shí)現(xiàn)數(shù)據(jù)的交互和展示。下面就來介紹一下Java、jQuery和JSONP的實(shí)例。

首先是Java的部分，假如我們有一個名為Person的類，它包括id、name和age三個屬性，我們可以通過Java來實(shí)現(xiàn)一個返回List類型的接口，代碼如下：

@RequestMapping(value = "/getPerson", method = RequestMethod.GET)
@ResponseBody
public ListgetPerson() {
ListpersonList = new ArrayList<>();
personList.add(new Person(1, "John", 20));
personList.add(new Person(2, "Mary", 25));
personList.add(new Person(3, "Tom", 30));
return personList;
}

接下來是jQuery的部分，我們可以通過jQuery的ajax方法來獲取到Java返回的List數(shù)據(jù)，代碼如下：

$.ajax({
type: "GET",
url: "http://localhost:8080/getPerson",
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr);
console.log(textStatus);
console.log(errorThrown);
}
});

需要注意的是，dataType為jsonp時，需要設(shè)置jsonp參數(shù)和callback的值，這里我設(shè)置的是callback和一個自動生成的隨機(jī)數(shù)。如果Java和jQuery不在同一個服務(wù)器下，則需要在Java端設(shè)置允許跨域訪問，代碼如下：

@RequestMapping(value = "/getPerson", method = RequestMethod.GET)
@ResponseBody
public String getPerson(String callback) {
ListpersonList = new ArrayList<>();
personList.add(new Person(1, "John", 20));
personList.add(new Person(2, "Mary", 25));
personList.add(new Person(3, "Tom", 30));
return callback + "(" + new Gson().toJson(personList) + ")";
}

這里使用了Gson將List轉(zhuǎn)換成JSON格式的數(shù)據(jù)，然后加上callback拼成一個字符串返回給客戶端。

最后是JSONP的部分，JSONP即JSON with Padding，它是一種動態(tài)跨域訪問數(shù)據(jù)的方式。相比于XMLHttpRequest的同域限制，JSONP可以實(shí)現(xiàn)跨域訪問數(shù)據(jù)，代碼如下：

function getPerson(data) {
console.log(data);
}
var script = document.createElement("script");
script.src = "http://localhost:8080/getPerson?callback=getPerson";
document.body.appendChild(script);

通過動態(tài)創(chuàng)建Script標(biāo)簽，設(shè)置src為Java接口地址，并傳入callback參數(shù)名，然后將Script標(biāo)簽插入body標(biāo)簽中，就可以實(shí)現(xiàn)JSONP的數(shù)據(jù)獲取。在Java端同樣需要實(shí)現(xiàn)上面的跨域訪問設(shè)置。