重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jsonp跨域访问服务

前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用

成都创新互联-专业网站定制、快速模板网站建设、高性价比玉溪网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式玉溪网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖玉溪地区。费用合理售后完善,十多年实体公司更值得信赖。

网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过webservice方式进行调用网站接口,问题也很快解决了,当时我就在想

如果需要在js中直接访问的话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢,我上网找了一些资料,最后采用的是jsonp的方式来解决的。下面我来给大家分享下

用jsonp方式解决跨域问题。分为以下步骤:

1、引入jquery.js,使用$.ajax()来定义jsonp,如下:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
%>





$(function(){
$("#jsonp").click(function(){
$.ajax({
url:"/demo/jsonp.action",
type:"GET",
async:false,
dataType:"jsonp",
jsonp:"jsonpCallback",
jsonpCallback:"showAge",
success:function(data){
//alert(data.name);
}
}
);
});
});
function showAge(data){
alert(data.age);
}



使用jsonp

2、服务器端处理:

package com.mall.web.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.alibaba.fastjson.JSONObject;
@Controller
@RequestMapping("/demo/")
public class DemoAction {
private HttpServletRequest request;
private HttpServletResponse response;
@ModelAttribute
public void setRequestAndResponse(HttpServletRequest request,HttpServletResponse response){
this.request = request;
this.response = response;
}
@RequestMapping(value="jsonp",method=RequestMethod.GET)
public void jsonp(){
 try {  
        response.setContentType("text/plain");  
        response.setHeader("Pragma", "No-cache");  
        response.setHeader("Cache-Control", "no-cache");  
        response.setDateHeader("Expires", 0);  
        PrintWriter out = response.getWriter();       
        JSONObject resultJSON = new JSONObject();
        resultJSON.put("name", "wen");
        resultJSON.put("age", "17");
        String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
        System.out.println("-------------------->"+jsonpCallback);
        System.out.println("-------------------->"+resultJSON.toJSONString());
        out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据  
        out.flush();  
        out.close();  
      } catch (IOException e) {  
       e.printStackTrace();  
      }  
}
}

该访问的url地址为:/demo/jsonp.action?jsonpCallback=“showAge”

在上述事例中,需要注意以下几点:

1、jsonp中只能使用get请求,ajax请求中dataType为jsonp

2、jsonp定义的url地址中的参数名默认为callback

3、jsonpCallback定义的时jsonp定义的参数对应的值,也是服务器需要回调的函数,若jsonpCallback为定义值,默认回调success函数

4、服务器接受请求后,需要返回符合参数传递过来的回调函数如: 

out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据

以上就是jsonp的访问过程,这里需要大家好好理解。因为使用jsonp跨域访问,需要客户端和服务端定义一个规则,即回调函数的规则,所以

在开发的过程中需要客户端和服务端的开发人员共同定义一个规则。

其实我们还可以通过$.get()和$.getJson()方式来跨域访问,这里就不跟大家细说了,如果感兴趣的朋友,可以自己去了解下,今天就给大家分享到这,

我们下期再见,接下来会为大家分享android的一些知识。


文章名称:jsonp跨域访问服务
文章位置:http://cqcxhl.cn/article/gieheh.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP