利用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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
JS数据类型判断的几种常用方法
Jul 07 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 UTF8编码内的繁简转换类
2009/07/20 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php读取3389的脚本
2014/05/06 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python实现查询IP地址所在地
2015/03/29 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
2014年妇产科工作总结
2014/12/08 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
vue ref如何获取子组件属性值
2022/03/31 Vue.js