<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>