JS 跨域资源共享 -- Ajax CORS / img ping / jsonp

实现跨域请求

最新推荐文章于 2024-02-25 00:00:00 发布

原创最新推荐文章于 2024-02-25 00:00:00 发布 · 816 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #ajax #CORS #JSONP

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用Ajax实现跨域请求的方法，并展示了如何通过设置HTTP响应头来支持跨域资源访问。此外，还探讨了JSONP和图像Ping两种跨域访问方式。

/**
 * Created by ALISURE on 2015/9/19.
 */

function Ajax(post,url){
    this.method = post ? "POST" : "GET";
    this.url = url;

    this.setUrl = function setUrl(url){
        this.url = url;
    }

    this.getXhr = function newXhr(){
        if(this.getXhr == undefined || this.xhr == null){
            return this.createXHR();
        }
    };

    this.createXHR = function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){
            if(typeof  arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
                var i,len;
                for(i = 0,len = versions.length;i<len;i++){
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch (ex){

                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }else{
            throw new Error("No XMLHttpRequest()");
        }
    }

    this.startGetData = function getData(callback,errorCallback){
        var xhr = this.getXhr();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                var status = xhr.status;
                if((status >= 200 && status < 300) || status == 304){
                    callback(status,xhr.responseText);
                }else{
                    errorCallback(status);
                }
            }
        }
        xhr.open(this.method,this.url,true);
        xhr.send(null);
    }
}

/**
 * CORS 实现跨域资源访问（在服务器端设置，见下面JAVA版本的过滤器）
 * @type {Ajax}
 */
var ajax = new Ajax(false,"http://alisure-pc:8080/Job_20150913/job");
ajax.startGetData(function(status,responseText){
    alert("1=" + status + "/n/n"+responseText);
},function(status){
    alert("2=" + status);
});

/**
 * jsonp实现跨域资源访问（在客户端与服务器端结合，本质上是执行一个js函数，即服务器返回“handle(response)”即可。）
 */
/*function handle(response){
    alert(response);
}
var script = document.createElement("script");
script.type="text/javascript";
script.src = "http://alisure-pc:8080/Job_20150913/job/?callback=handle";
document.body.appendChild(script);*/

/**
 * 图像ping 实现跨域资源访问（与服务器单向跨域通信）
 */
/*
var img = new Image();
img.onload = function(){
    alert("OK");
}
img.onerror = function(){
    alert("Error");
}
img.src = "http://alisure-pc:8080/Job_20150913/job";*/

package com.alisure.job.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class JobFilter implements Filter {

	public void doFilter(ServletRequest req, ServletResponse res,
			FilterChain chain) throws IOException, ServletException {
		HttpServletResponse response = (HttpServletResponse) res;
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		chain.doFilter(req, res);
	}

	public void init(FilterConfig filterConfig) {
		
	}

	public void destroy() {
		
	}

}