jQuery ajax的jsonp跨域请求

一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解。(利用jQuery的jsonp)

jQuery使用JSONP跨域

JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法带入服务器,返回结果时回调。

在jQuery中内置了实现JSONP跨域的功能,如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,他首先尝试使用JSON.parse()。如果浏览器不支持,则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

请求页面:http://10.10.0.158:8020/Test/index.html  ,其中jQuery ajax URL:http://10.10.0.158:8080/newBeginning//employeeAction/showEmployeeList.do

比较即可得知他们的端口不同,需要跨域请求,否者会报

jQuery ajax的jsonp跨域请求

全部代码如下:

前端请求页面(index.html):

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>jsonp</title>
<link rel="shortcut icon" href="img/ooopic_1482478961.ico">
</head> <body>
<div id="d1">
<p id="p1">jsonp跨域请求</p>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
//var iframe = document.createElement('iframe'); //动态创建框架
//iframe.src = "iframe.html"; //框架中加载的页面
//document.body.appendChild(iframe); //将框架添加到当前窗体
$(function() {
var param = new Object();
param.act = "area", //表明此次请求需要跨域访问 $.ajax({
type: "post",
url: "http://10.10.0.158:8080/newBeginning//employeeAction/showEmployeeList.do",
data: param,
dataType: "jsonp", //jsonp跨域请求
success: function(data) {
console.log("data1");
console.log(data);
},
error: function(data, type) {
console.log("data2");
console.log(data);
}
})
})
</script> </html>

后台springMVC处理跨域请求代码(employeeAction/showEmployeeList.do)

 package com.sxdx.employee.action;

 import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import java.util.Map.Entry; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSON;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import com.sxdx.employee.dao.employeeDao;
import com.sxdx.employee.domain.employee;
import com.sxdx.employee.service.employeeImpl; @Controller
@RequestMapping(value="/employeeAction")
public class employeeAction {
@RequestMapping(value="/showEmployeeList.do")
public String showEmployeeList(HttpServletRequest request,HttpServletResponse response){
JSONObject jsonboject=new JSONObject();
JSONArray rows = new JSONArray();
System.out.println(request.getParameter("pageNumber"));
System.out.println(request.getParameter("pageSize"));
employeeDao empDao=new employeeImpl();
System.out.println(empDao.selectAll());
for(employee emp:empDao.selectAll()){
JSONObject cell = new JSONObject();
cell.put("eid", emp.getEid());
cell.put("ename", emp.getEname());
cell.put("esex", emp.getEsex());
cell.put("eage", emp.getEage());
rows.add(cell);
}
//jsonboject.put("rows", rows);
//jsonboject.put("total", empDao.selectAll().size()); PrintWriter out = null;
try {
response.setCharacterEncoding("UTF-8"); //设置编码格式
//response.setContentType("text/html"); //设置数据格式
String act = request.getParameter("act");//是否跨域请求,在请求时通过参数传递,以便后面判断是否需要按照跨域请求做返回
out = response.getWriter();
if(act.equals("area")){//如果是跨域请求执行此分支
String callback=request.getParameter("callback");//此处即为跨域请求核心操作,获取回调方法
out.write(callback+"('"+rows.toString()+"')");
}else{
out.write(rows.toString());
}
out.flush();
} catch (IOException e) {
e.printStackTrace();
} finally{
out.close();
}
return null;
}
}

效果:

jQuery ajax的jsonp跨域请求

看一些同学的博客说jsonp跨域请求不支持post方式请求,但是我试了一下,不管是$.ajax({type: "post"})还是$.ajax({type: "get"})都可以跨域请求,难道和jQuery版本有关系,不是很了解~~~请大家指教

关于这个问题已经找到原因:jsonp类型请求数据时,无法使用post方式(你会发现,在JQ中即使你将type设置为POST方式,JQ也会将其转换为get方式请求)。

上一篇:JQuery - Ajax和Tomcat跨域请求问题解决方法!


下一篇:红帽学习笔记[RHCSA] 第十课[计划任务Cron与At、逻辑卷管理]