利用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 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
javascript常用对话框小集
Sep 13 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
前端JavaScript大管家 package.json
Nov 02 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简单提示框alert封装函数
2010/08/08 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
React快速入门教程
2017/01/17 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python爬虫容易学吗
2020/06/02 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
施工安全协议书
2013/12/11 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
绿色校园广播稿
2014/10/13 职场文书
感谢信的格式
2015/01/21 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
讲解Python实例练习逆序输出字符串
2022/05/06 Python