利用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 相关文章推荐
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
Vue的自定义组件不能使用click方法的解决
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中的插件机制原理和实例
2014/07/08 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
十大使用PHP框架的理由
2015/09/26 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
js解决movebox移动问题
2016/03/29 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
大学自荐信
2013/12/12 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
推广普通话演讲稿
2014/05/23 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
老乡会致辞
2015/07/28 职场文书