利用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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
Vue3.0数据响应式原理详解
Oct 09 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Python书单 不将就
2017/07/11 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python面向对象编程基础实例分析
2020/01/17 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
详解python with 上下文管理器
2020/09/02 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
25岁生日感言
2014/01/13 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
员工薪酬激励方案
2014/06/13 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
律师催款函范文
2015/06/24 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python