利用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简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
实用函数4
2007/11/08 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
python元组操作实例解析
2014/09/23 Python
Python控制Firefox方法总结
2019/06/03 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
应届毕业生自荐书
2014/06/18 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年调度员工作总结
2014/11/19 职场文书
家长对孩子的寄语
2015/02/26 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL