JavaScript跨域请求和jsonp请求实例

Posted 2020-09-20 newAdmin

<script type="text/javascript" src="./whenReady.js"></script>
<script type="text/javascript">
/**
 * 一：跨域请求
 * 
 * 这个常见的JavaScript模块查询有href属性但没有title属性的所有<a>元素
 * 并给他们注册onmouseover事件处理程序
 * 这个事件处理程序使用XMLHttpRequest HEAD请求取得链接资源的详细信息
 * 然后把这些详细信息设置为链接的title属性
 * 这样他们将会在工具提示中显示
 */

whenReady(function(){
	//是否有机会使用跨域请求
	var supportCORS = (new XMLHttpRequest()).withCredentials !==undefined;

	//遍历文档中的所有链接
	var links = document.getElementsByTagName(‘a‘);
	for(var i = 0 ; i < links.length ; i++){
		var link = links[i];
		if(!link.href)
			continue;		//跳过没有超链接的锚点
		if(link.title)
			continue;		//跳过已经有工具提示的链接

		//如果这是一个跨域链接
		if(link.host !== location.host || link.protocol !== location.protocol){
			link.title = "站外链接"; 	//假设我们不能得到任何信息
			if(!supportCORS)
				continue;				//如果没有CORS支持就退出
			//否则，我们能了解这个链接的更多信息
			//所以继续前进，注册事件处理程序，于是我们可以尝试
		}

		//注册事件处理程序，当鼠标悬停下载链接详细信息
		if(link.addEventListener)
			link.addEventListener("mouseover",mouseoverHandler,false);
		else
			link.attachEvent("mouseover",mouseoverHandler);
	}

	function mouseoverHandler(e){
		var link = e.target || e.srcElement; 		//<a>元素
		var url = link.href;						//链接url

		var req = new XMLHttpRequest();				//新请求
		req.open("HEAD",url);						//仅仅询问头信息
		req.onreadystatechange = function(){		//事件处理程序
			if(req.readyState !== 4)
				return;						//如果未完成，直接返回
			if(req.status ===200){		//如果成功
				var type = req.getResponseHeader("Content-Type");	//获取链接的详细情况
				var size = req.getResponseHeader("Content-Length");
				var data = req.getResponseHeader("Last-Modified");

				//在工具提示中显示详细信息
				link.title = "类型："+type+"\n"+"大小："+size+"\n"+"时间："+date;
			}else{
				//如果请求失败，且链接没有“站外链接”的工具提示
				//那么显示这个错误
				if(!link.title)
					link.title = "Couldn‘t fetch details:\n"+req.status+" "+req.statusText;
			}
		};
		req.send(null);

		//移除处理程序，仅想一次获取这些头信息
		if(link.removeEventListener)
			link.removeEventListener("mouseover",mouseoverHandler,handler);
		else
			link.detachEvent("onmouseover",mouseoverHandler);
	}
});

/**
 * 二：借助<script>发送http请求：JSONP
 *根据指定的url发送一个JSONP请求
 *然后把解析得到的响应数据传递给回调函数
 *在URL添加一个名为jsonp的查询参数，用于指定请求的回调函数的名称
 */
function getJSONP(url,callback){
	//为本次请求创建一个唯一的回调函数名称
	var cbnum = "cb"+getJSONP.counter+++; 	//每次自增计数器
	var cbname = "getJSONP."+cbnum;			//作为JSONP函数的属性

	//将回调函数名称一以表单编码的形式添加到URL的查询部分中
	//使用jsonp作为参数名，一些支持JSONP的服务
	//可能使用其他的参数名，比如：callback
	if(url.indexOf("?") === -1 ) //url没有查询部分
		url+="?jsonp="+cbname;		//作为查询部分添加参数
	else 	//否则
		url += "&jsonp"+cbname; 	//作为新的参数添加它

	//创建script元素用于发送请求
	var script = document.createElement("script");

	//定义将被脚本执行的回调函数
	getJSONP[cbnum] = function(response){
		try{
			callback(response);			//处理响应数据
		}
		finally{				//即使回调函数或响应抛出错误
			delete	getJSONP[cbnum];		//删除给函数
			script.parentNode.removeChild(script);	//移除script元素
		}
	};
	//立即出发http请求
	script.src = url;			//设置脚本的url
	document.body.appendChild(script);	//把它添加都文档中
}
getJSONP.counter = 0;	//用于创建唯一回调函数名称的计数器
</script>