DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 利用JQuery和Servlet實現跨域提交請求示例分享
利用JQuery和Servlet實現跨域提交請求示例分享
編輯:JQuery特效代碼     

原理: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";
        }
    }

}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved