欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jsonp跨域请求实现示例

程序员文章站 2022-06-02 14:44:22
网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例; 前言: ajax请求地址: 服务...

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

前言:

ajax请求地址:

服务端要返回的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);
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!