利用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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php利用header函数下载各种文件
2016/08/24 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python 实现单通道转3通道
2019/12/03 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
Linux的文件类型
2016/07/05 面试题
远程调用的原理
2014/07/05 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2015年统战工作总结
2015/05/19 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
Python实现滑雪小游戏
2021/09/25 Python
四十九个javascript小知识实用技巧
2021/11/20 Javascript