AJAX经典应用之读取响应首部

最新推荐文章于 2022-05-22 19:55:47 发布

NonShan

最新推荐文章于 2022-05-22 19:55:47 发布

阅读量503

点赞数

分类专栏： java学习文章标签： ajax

本文链接：https://blog.csdn.net/NonShan/article/details/40830179

版权

java学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

通过之前的几个例子，对于AJAX掌握逐渐深入。现在来介绍AJAX的经典应用。

表单验证这个我们之前有实现过。在客户端提交一些数据，利用AJAX对其进行验证

读取响应首部，有时我们需要了解服务器的一些信息。这个时候，只要读取响应首部即可。

读取响应首部，我们可以得到Conten-Type 、Server 、Date等信息。

在HTML中的代码和之前的例子有少许的区别。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
	var xhr ;
	var requestType;
	function createXMLHttpRequest()
	{
		if(window.ActiveXObject)
			{
				xhr = new ActiveXObject("Microsoft.XMLHttpRequest");
			}
		else if(window.XMLHttpRequest)
			{
				xhr = new XMLHttpRequest();
			}
	}
	
	//这里传入特定的request
	function doRequest(request,url)
	{
		createXMLHttpRequest();
		requestType = request;
		xhr.onreadystatechange = callback;
		xhr.open("GET", url, true)	
		xhr.send(null);
	}
	
	//根据requestType不同的种类，调用不同的函数
	function callback()
	{	
		if(xhr.readyState == 4){
			if(requestType == "allResponseHeaders")
			{
				getAllResponseHeaders();
			}
		if(requestType == "lastModified")
			{
				getLastModified();
			}
		if(requestType == "isResourceAvailable")
			{
				isResourceAvailable();
			}
		}		
	}
	
	function getAllResponseHeaders()
	{
		alert(xhr.getAllResponseHeaders());
	}
	function getLastModified()
	{	
		//现在这个方法已经拿不到值
		alert(xhr.getResponseHeader("Last-Modified"));
	}
	function isResourceAvailable()
	{		
			if(xhr.status == 200)
				{
				alert("successful response");
				}
			else if(xhr.status == 404)
				{
				alert("Resource is unavilable");
				}
			else {
				alert("Unexcept Error :"+xhr.status);
			}
	}
</script>
</head>
<body>
<h1> Reading Response Head</h1>
//在超链接间中调用javascript中的函数
<a href = "javascript:doRequest('allResponseHeaders','readingResponse')"> get all response headers</a>
<a href = "javascript:doRequest('lastModified','readingResponse')"> get last modified</a>
<a href = "javascript:doRequest('isResourceAvailable','readingResponse')"> get available resource</a>
<a href = "javascript:doRequest('isResourceAvailable','reading')"> get unavailable resource</a>
</body>
</html>