一直在听“跨域跨域”，但是什么是跨域呢？今天做了一些了解。（利用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

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

全部代码如下：

前端请求页面（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;

     }

 }

效果：

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

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

jQuery ajax的jsonp跨域请求的更多相关文章

  1. JQuery - Ajax和Tomcat跨域请求问题解决方法！

    在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...

  2. jquery ajax GET POST 跨域请求实现

    同一段逻辑代码需要在多个网站中使用, 每个网站都新建一个ashx真是扯蛋的作法,  所以想只请求一处的ashx, 这样便于维护和修改, 那么,ajax跨域问题就来了. 废话少说, 直接上代码,  我现 ...

  3. ajax之jsonp跨域请求

    前端ajax请求代码 后台php处理代码

  4. 06: AJAX全套 & jsonp跨域AJAX

    目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornad ...

  5. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  6. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  7. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  8. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  9. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

随机推荐

  1. Python和JavaScript间代码转换4个工具-乾颐堂

    Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 ...

  2. Socket-IO 系列（三）基于 NIO 的同步非阻塞式编程

    Socket-IO 系列(三)基于 NIO 的同步非阻塞式编程 缓冲区(Buffer) 用于存储数据 通道(Channel) 用于传输数据 多路复用器(Selector) 用于轮询 Channel 状 ...

  3. linux 静态链接库demo

    目录结构 ./main.c        #include<stdio.h> #include "./lib/jtlib1.h" int main() {     pr ...

  4. 2018.10.16 spoj Can you answer these queries V（线段树）

    传送门 线段树经典题. 就是让你求左端点在[l1,r1][l1,r1][l1,r1]之间,右端点在[l2,r2][l2,r2][l2,r2]之间且满足l1≤l2,r1≤r2l1\le l2,r1 \l ...

  5. 2018.09.07 bzoj1096: [ZJOI2007]仓库建设（斜率优化dp）

    传送门 斜率优化dp经典题. 令f[i]表示i这个地方修建仓库的最优值,那么答案就是f[n]. 用dis[i]表示i到1的距离,sump[i]表示1~i所有工厂的p之和,sum[i]表示1~i所有工厂 ...

  6. 2018.07.26NOIP模拟 魔法数字（数位dp）

    魔法数字 题目背景 ASDFZ-NOIP2016模拟 题目描述 在数论领域中,人们研究的基础莫过于数字的整除关系.一般情况下,我们说整除总在两个数字间进行,例如 a | b(a能整除b)表示 b 除以 ...

  7. Python特殊方法

    # __slots__如果要限制添加的属性,例如,Student类只允许添加 name.gender和score 这3个属性,就可以利用Python的一个特殊的__slots__来实现. # __sl ...

  8. 删除k8s中一直处于Terminating的资源

    1.将所有的etcd中的key值取到一个keys.yam里面,便于查询 ETCDCTL_API=3 etcdctl get "" --from-key > keys.yaml ...

  9. UVaLive 2796 Concert Hall Scheduling (最小费用流)

    题意:个著名的音乐厅因为财务状况恶化快要破产,你临危受命,试图通过管理的手段来拯救它,方法之一就是优化演出安排,既聪明的决定接受或拒绝哪些乐团的演出申请,使得音乐厅的收益最大化.该音乐厅有两个完全相同 ...

  10. VBA替换函数

    Sub test() On Error Resume Next Dim arr1, arr2, i, j arr1 = Range("T1:EI3") arr2 = Range(& ...