利用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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
JS函数重载的解决方案
May 13 Javascript
Node.js文件操作详解
Aug 16 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
vue+element实现打印页面功能
May 20 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
node crawler如何添加promise支持
Feb 01 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设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php验证码生成器
2017/05/24 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
js select常用操作控制代码
2010/03/16 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
python实现复制整个目录的方法
2015/05/12 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
解决Django连接db遇到的问题
2019/08/29 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
爱国口号
2014/06/19 职场文书
初中重阳节活动总结
2015/05/05 职场文书
政审证明材料
2015/06/19 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
vue组件vue-esign实现电子签名
2022/04/21 Vue.js