利用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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
详解Puppeteer 入门教程
May 09 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
一个php作的文本留言本的例子(六)
2006/10/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php实现文件预览功能
2017/05/23 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
搭建vue开发环境
2018/07/19 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
小程序实现搜索框功能
2020/03/26 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python连接mysql实例分享
2016/10/09 Python
Python3生成手写体数字方法
2018/01/30 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL