jsonp跨域请求实现示例

Posted tapt

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsonp跨域请求实现示例相关的知识,希望对你有一定的参考价值。

  网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;

前言:

ajax请求地址:http://192.168.1.102:8080/carop/jsonp

服务端要返回的jsonp字符串:jsonpCallback({"name":"刘德华","电话":"17688888888"})

jsonp写法,写法上可以理解成一个javascript函数的执行,例如alert("hello world")会弹出hello world的窗口,再例如alert({"name":"刘德华"})会弹出[object Object]的窗口。(注意这里参数两端没加双引号,它是一个有属性的对象而不是一个字符串)

那么本示例的jsonp中,可以将jsonpCallback理解成函数名,{"name":"刘德华","电话":"17688888888"}这个对象是这个函数执行时所要传递的参数。 


客户端:

$.ajax({
              type: "get",
              async:false,
              url: "http://192.168.1.102:8080/carop/jsonp",
              dataType: "jsonp",
              jsonpCallback:"jsonpCallback",             
              success: function(data){
              alert(data.name+"\n "+data.tel);
              }
          }); 

其他的ajax方法比如getjson亦可,写法上有区别,这里仅采用一种方法。

说明:jsonpCallback:"jsonpCallback",前一个ajax参数表示要执行的函数,后面的”jsonpCallback“,这个是服务器返回jsonp的javascript函数名。(网上有相关资料这个参数写的是jsonp而不是jsonpCallback,经实际测试要写成jsonpCallback,jquery版本1.8,所测试浏览器为火狐和edge)

 


服务端

servlet控制器层直接返回jsonp;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/jsonp")
public class jsonp extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 resp.setCharacterEncoding("UTF-8");
 //System.out.println("进入jsonp");
 resp.setContentType("text/json;charset=utf-8");
 String json="{\"name\":\"刘德华\",\"tel\":\"17688888888\"}";
 String jsonp="jsonpCallback("+json+")";
 PrintWriter pw=resp.getWriter();
 System.out.println(jsonp);
 pw.print(jsonp);
}
@Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(req, resp);
 }
}

 



































以上是关于jsonp跨域请求实现示例的主要内容,如果未能解决你的问题,请参考以下文章

jQuery使用JSONP实现跨域请求

Jsonp的js实现,跨域请求,同源策略机制

跨域请求之jsonp的实现方式

JSONP跨域ajax请求

ajax 跨域

AJAX 跨域请求 - JSONP获取JSON数据