利用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 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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事务回滚简单实现方法示例
2017/03/28 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript 一些用法小结
2009/09/11 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序事件流原理解析
2019/11/27 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
十佳大学生村官事迹
2014/01/09 职场文书
组织关系转移介绍信
2014/01/16 职场文书
成绩单家长评语大全
2014/04/16 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
无私奉献演讲稿
2014/09/04 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
网吧员工管理制度
2015/08/05 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript