用JSONP实现的跨域访问的解决方案 - 面向对象网,web开发,脚本,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > 脚本语言 > 正文

用JSONP实现的跨域访问的解决方案

来源: www.bianceng.cn 阅读:

跨域访问一直是困扰很多开发者的问题之一。因为涉及到安全性问题,所以跨域访问默认是不可以进行的,否则假设今天我写了一段js去更改google的图标,明天他写了一段代码去吧google首页的文字全部变成梵文,那还得了?

首先,讲下什么是相同的域。域是这样定义的,协议名+host名+端口号,只有这3个都一样,才能说是同样的域,同样的域里面的访问不受到同源策略限制,你可以用你的js代码任意的去操作资源,但是不同域你就不能这样做了。

解决跨域访问有很多方法,最常见的一种“单向”跨域访问方式是用JSONP(Json with Padding),它解决思路就是如果域A (充当客户端)上的js 要操作域B(充当服务器端)上的资源,那么只要吧域A上的js函数名传递给域B,然后在域B进行封装,它解析来自域A的函数名,并且将域B上的资源转为json对象,并且两者进行组合,组合后的字符串就是 域A函数名(域B json对象) 这种函数调用的形式,然后当域A上用script src=\'#\'">域A函数名(域B json对象)的形式,于是就达到了域A函数处理域B资源的效果。

为了更有说服力,我们这里做一个非常简单的实验,假定域A(客户端)有个应用部署在http://localhost:8180上,域B(服务器端)有个应用部署在http://localhost:8080上,显然这2个域由于端口不同,所以域A如果要访问域B必定是跨域访问的。域A 有一段js函数,域B提供了一个json对象,我们想要域A的js函数操作域B的json对象。会怎样呢?

服务端(我们部署在http://localhost:8080上):

先贴上域B(服务器端的代码),它用一个java servlet,负责接收来自客户端的带回调函数名参数的请求,并且与自己端提供的json对象包装,包装为一个jsonp后然后放入响应输出流。

package com.charles.jsonp; 
     
import java.io.IOException; 
import java.io.PrintWriter; 
     
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
     
import org.json.simple.JSONObject; 
     
/** 
 * Servlet implementation class JSONPServlet 
 */
public class JSONPServlet extends HttpServlet { 
    private static final long serialVersionUID = 1L; 
            
    /** 
     * @see HttpServlet#HttpServlet() 
     */
    public JSONPServlet() { 
        super(); 
        // TODO Auto-generated constructor stub 
    } 
     
    /** 
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        // TODO Auto-generated method stub 
             
        //get the callback function which comes from client 
        String callbackFuncFromClient= request.getParameter("callbackFunc"); 
        //create a json object 
        JSONObject jsonInfo = new JSONObject(); 
        jsonInfo.put("name","charles"); 
        jsonInfo.put("title", "technical lead"); 
        jsonInfo.put("info","talent man"); 
        //create a string which stands for a javascript with the format func(jsonobject) 
        StringBuffer jsonpString = new StringBuffer(); 
        jsonpString.append(callbackFuncFromClient).append("(").append(jsonInfo.toJSONString()).append(")"); 
             
             
        //construct the output jsonp and output to the client 
        response.setCharacterEncoding("utf-8"); 
        PrintWriter out = response.getWriter(); 
        out.println(jsonpString); 
        out.flush(); 
    } 
     
    /** 
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        // TODO Auto-generated method stub 
    } 
     
}

然后我们把这个servlet映射到某个url上,见web.xml:

<servlet> 
    <description>This servlet will create a jsonp object,it wraps the js function and the json object</description> 
    <display-name>JSONPServlet</display-name> 
    <servlet-name>JSONPServlet</servlet-name> 
    <servlet-class>com.charles.jsonp.JSONPServlet</servlet-class> 
  </servlet> 
  <servlet-mapping> 
    <servlet-name>JSONPServlet</servlet-name> 
    <url-pattern>/JSONPServlet</url-pattern> 
  </servlet-mapping>

Tags:
相关文章列表: