利用JQuery和Servlet实现跨域提交请求示例分享


Posted in Javascript onFebruary 12, 2014

原理:JavaScript的Ajax不可以跨域,但是可以通过向本地的一个Servlet发出请求,由Servlet完成跨域。再把远程的结构返回给客户端。这样Ajax就可以跨域了。在后面,再发一个PHP版本的,请大家关注啊。下面是代码

JS代码:

注意:在Post方式时,param1和param2为向远程发送的参数值,可以有多个。

//GET方式
function reqeustCrossDomainProxyGet(){
    var url = "http://www.baidu.com";//远程请求地址
    var param = {'requesturl':url,'typedata':'JSON'};
    var data = getCrossDomainProxyRemote(param,"json");
}
//Post方式
function reqeustCrossDomainProxyPost(param1,param2){
    var url = apiServer+"/api/lucene/query";
    var param = {'requesturl':url,'typedata':'JSON','param1':param1,'param2':param2};
    var data = getCrossDomainProxyRemote(param,"json");
}
/**
 * JS向本址的一个Servlet发送POST请求,所有关于远程请求的参数。
 * 在此处参POST方式发送给Servlet
 * @param param 远程请求参数
 * @param rtype JS返回类型(暂时没有用到)
 * @return
 */
function getCrossDomainProxyRemote(param,rtype){
    var url = "/cross/proxy";//Servlet的URL地址
    var returndata;
    $.ajax({
        url: url,type: 'POST',dataType: rtype,timeout: 40000,data:param, async:false,
        error: function(response,error) {alert(response.status);},
        success: function(data){returndata=data;}
    });
    return returndata;
}

Java代码:

public class CorssDomainProxy extends HttpServlet {    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doPost(req, resp);     
    }
    public void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        boolean requestType = false;//标记远程请求类型,默认为GET方式
        PrintWriter out = resp.getWriter();
        Enumeration keys = req.getParameterNames();//取出客户端传入的所有参数名
        ArrayList<String> params = new ArrayList<String>();
        String url=null;
        while (keys.hasMoreElements()){
            String key = (String) keys.nextElement();
            /**
             * 如果请求参数内有如下几种表示,这此参数不参与远程请求
             */
            if(key.equals("requesturl")){//判断参数是否是,远程请求地址
                url = req.getParameter(key);
            }else if(key.equals("typedata")){//判断请求数据类型,暂时没有用到
            }else if(key.equals("returntype")){//判断请求返回类型,暂时没有用到
            }else{
                params.add(key);//其它加入参数列表,此处为参与远程请求的参数
                requestType = true;//修改标记,表求远程请求为POST方式
            }
        }
        HttpClient client = new HttpClient();
        HttpMethod method = null;
        if(requestType){//判断请求方式,并实例化HttpMethod对象,true:POST,false:GET
            method = new UTF8PostMethod(url);
            for(String name : params){//迭代POST参数,加入到请求中
                String _value = req.getParameter(name);
                ((PostMethod)method).setParameter(name,_value);
            }
        }else{
            method = new GetMethod(url);
        }       
        client.executeMethod(method);//执行请求
        String bodystr = method.getResponseBodyAsString();//返回结果
        out.println(bodystr);//将结果返回给客户端
    }
    /**
     * 内部类,转换URL字符串为UTF-8
     * @author Administrator
     *
     */
    private static class UTF8PostMethod extends PostMethod { 
        public UTF8PostMethod(String url) { 
            super(url); 
        } 
        @Override
        public String getRequestCharSet() { 
            return "UTF-8"; 
        } 
    }
}
Javascript 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
js格式化时间的方法
Dec 18 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 #Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 #Javascript
JavaScript cookie的设置获取删除详解
Feb 11 #Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 #Javascript
jquery绑定事件不生效的解决方法
Feb 11 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP7修改的函数
2021/03/09 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python退出循环的方法
2020/06/18 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
项目合作意向书范本
2014/04/01 职场文书
欢迎横幅标语
2014/06/17 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
营销学习心得体会
2014/09/12 职场文书
四风查摆剖析材料
2014/10/10 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Python实现归一化算法详情
2022/03/18 Python