一,页面的代码
function getData( ) {
$.ajax({
var d1=$("#d11").val();
url : "test/demoPage1.do",
type : "GET",
async:false,
beforeSend : function(request) {
},
data : {
dtp1:d1,
},
dataType:'jsonp',
jsonp:'callback',
crossDomain:true,/*默认是false,记住要改为true,不然无法成功获取数据数据并跳转至success*/
jsonpCallback:"callback",
success:function(data){
alert("success");
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
二,Java后台代码(后台我用的是struts2,如果你们的框架是其他的,可做相应修改)
@Action(value = "demoPage1", results = @Result(type = "json", params = {
"root", "result" }))
public String getPage1Data() {
Map
map.put("result", "content");
JSONObject resultJSON = JSONObject.fromObject(map);
HttpServletResponse response=ServletActionContext.getResponse();
HttpServletRequest resquest=ServletActionContext.getRequest();
response.setContentType("text/plain");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Origin", "*");//添加跨域访问
response.setDateHeader("Expires", 0);
//String callback= request.getParameter("callback");//如果你在请求后面添加了callback,可以用自己传入的参数,没有添加则默认为callback,这里我使用默认
try {
PrintWriter out = response.getWriter();
out.println("callback"+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据 ,要用callback包装下
out.flush();
out.close();
System.out.print("1");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
e.getMessage();
}
return null;
}
三,Jsonp原理
Jsonp跨域是通过动态创建script标签来实现跨域的,script标签的src属性是没有跨域的限制的,jsonp请求相当于将我们的请求通过script标签的src发送出去,后台返回的数据是callback(名字可以是发送请求时自己命名)包装起来的,前端获取到数据后就会调用页面callback(该函数也是jquery动态生成的function),json的格式的数据直接入参,这就是为什么我们后台要返回的数据是callback包装起来的了。
四,如果您用这个实例时有问题欢迎提出问题,大家共同交流。