利用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技巧总结
Jan 01 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js 通用订单代码
Dec 23 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
tensorflow 模型权重导出实例
2020/01/24 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
校本教研工作制度
2014/01/22 职场文书
幼儿教师工作感言
2014/02/14 职场文书
人事科岗位职责范本
2014/03/02 职场文书
一年级评语大全
2014/04/23 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技