利用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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
document.getElementById介绍
2011/09/13 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
商场中秋节广播稿
2014/01/17 职场文书
公司应聘求职信
2014/06/21 职场文书
土建施工员岗位职责
2014/07/16 职场文书
班级出游活动计划书
2014/08/15 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2015年采购部工作总结
2015/04/23 职场文书
小学生暑假生活总结
2015/07/13 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书