利用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 相关文章推荐
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
工作中常用js功能汇总
Nov 07 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php解析json数据实例
2014/08/19 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
phpStorm2020 注册码
2020/09/17 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
用原生js做单页应用
2017/01/17 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python实现的字典值比较功能示例
2018/01/08 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python实现局域网内实时通信代码
2019/12/22 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
前台领班岗位职责
2013/12/04 职场文书
法学院方阵解说词
2014/01/29 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
工作推荐信范文
2014/05/10 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
理财计划书
2014/08/14 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书