readingResponseHeaders.html中的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp ;
var requestType = "";
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function doHeadRequest(request,url){
createXMLHttpRequest();
requestType = request;
xmlHttp.onreadystatechange= handleStateChange;
xmlHttp.open("HEAD",url,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(requestType == "allResponseHeaders"){
getAllResponseHeaders();
} else if(requestType == "lastModified") {
getLastModified();
} else if(requestType == "isResourceAvaiable") {
getIsResourceAvailable();
}
}
}
function getAllResponseHeaders(){
alert(xmlHttp.getAllResponseHeaders());
}
function getLastModified(){
alert("Last Modified " + xmlHttp.getResponseHeader("LAST-Modified"));
}
function getIsResourceAvailable(){
if(xmlHttp.status == 200) {
alert("successful response ");
} else if(xmlHttp.status == 404) {
alert("resource is unavailable ");
} else {
alert("unexcepted response status : " + xmlHttp.status);
}
}
function parseResults(){
var responseDiv = document.getElementById("serverResponse");
if (responseDiv.hasChildNodes()){
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>reading response headers </h1><br><br>
<a href="javascript:doHeadRequest('allResponseHeaders','readingResponseHeaders.xml');">getAllResponseHeaders</a><br/><br/>
<a href="javascript:doHeadRequest('lastModified','readingResponseHeaders.xml');">lastModified</a><br/><br/>
<a href="javascript:doHeadRequest('isResourceAvaiable','readingResponseHeaders.xml');">getIsResourceAvailable</a><br/><br/>
<a href="javascript:doHeadRequest('isResourceAvaiable','notAvailableResource.xml');">getIsResourceAvailable</a><br/><br/>
</body>
</html>
做为客户端请求文件:readingResponseHeaders.xml,只是为了表明这个文件在服务端存在,内容可以为空。
有一点很奇怪,xmlHttp.open("HEAD",url,true); 我把"HEAD"改为"head",alert弹出的内容会有点不一致。
分享到:
相关推荐
服务器在响应OPTIONS请求时,会在Access-Control-Allow-*系列头部设置合适的值,表明允许的来源、方法、头部等信息。 3. **实际请求** 如果预检请求得到允许,浏览器将发送实际的请求。此时,浏览器会在请求头中...
HEAD请求类似于GET请求,但服务器只返回HTTP头部信息,不包含实际的内容。这在检查资源是否存在或验证资源是否被修改时非常有用。 #### 三、Ajax数据传输格式 ##### 3.1 文本 文本是最简单的数据传输格式,适用于...
在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于构建响应迅速、用户体验友好的动态网页应用。通过Ajax,Web应用可以无需重新加载整个页面的情况下,仅更新部分数据,这极大地提高了网页...
- XMLHttpRequest对象是AJAX的核心,用于在客户端与服务器之间发送异步请求和接收响应。 - 它支持多种HTTP请求方法,如GET、POST等,用于获取或发送数据。 4. **工作原理:** - 创建XMLHttpRequest对象。 - ...
CORS通过在HTTP头部增加特定字段来允许跨域请求,这种方式不仅灵活度高,而且安全性也较好。 #### 三、扩展思考 **Q1:浏览器在执行跨域请求时,是先执行后判断,还是先判断后执行?** - **答案**:这取决于请求...
同源策略规定,来自不同源的“文档”或脚本只能读取或设置当前文档的属性。这里的“源”是指协议、域名和端口三者的组合。例如,http://example.com 和 https://example.com 被视为不同的源。 当使用Ajax发起请求时...
同源策略是浏览器为了保障用户安全而实施的一种机制,它限制了Web页面只能读取同源(协议+域名+端口相同)的资源。当Ajax尝试向不同源发送请求时,浏览器会阻止这一行为,导致请求失败。 二、解决跨域的常见方法 1...
- **原理**:在服务器端返回特定的HTTP头部信息,指示客户端不要缓存响应结果。 - **实现**:在服务器端(如.NET应用)中修改响应头,加入`Cache-Control`和`Pragma`字段。 ```csharp public string ...
- `<html>`、`<head>`和`<body>`是HTML的基本结构元素,分别代表整个文档、文档头部和文档主体。 - `<title>`设置页面标题,显示在浏览器标签上。 - `<form>`用于创建表单,表单内的元素才能提交到服务器。 - `...
在`function.php`文件中,虽然执行了JavaScript的`alert()`函数,但由于该文件本身未声明其字符编码,导致其内部的中文字符在被读取时采用了默认的或错误的编码方式,从而在alert弹出框中显示为乱码。 #### 2. 解决...
JavaScript则提供了丰富的API和库,如jQuery,用于处理用户的交互、DOM操作、Ajax请求等,实现动态更新内容、响应式设计、表单验证等功能。 在实际开发中,了解和熟练运用这三者的关系至关重要。HTML提供结构,CSS...
例如,`<head>`标签定义了文档头部,`<body>`标签包含了用户可见的内容,`<nav>`定义导航部分,`<img>`引入图片,而`<a>`则创建了超链接。 JavaScript是一种客户端脚本语言,它增强了网页的交互性。在web网页大作业...
在Web开发中,跨域(CORS)是一个常见的问题,特别是在使用JavaScript进行AJAX请求时。跨域限制是浏览器为了安全而实施的一项策略,它阻止了一个源(origin)的文档或脚本请求另一个源的资源。标题“web项目跨域jar...
- 页面结构:HTML代码首先定义了网页的基本结构,包括`<head>`(头部)、`<body>`(主体)和各种段落、标题(`<h1>`至`<h6>`)、链接(`<a>`)、图像(`<img>`)、列表(`<ul>`、`<ol>`、`<li>`)等元素。...
3. 联系方式和位置:提供详细的联系方式和地图,便于客户联系。 4. 产品/服务展示:突出公司主要产品或服务,配以图文介绍。 5. 新闻与动态:展示公司最新动态,增加网站的活性。 综上所述,这个项目涵盖了创建静态...
HEAD请求则是请求资源的头部信息,不包含响应体。 对于GET请求,服务器将读取相应的HTML文件并返回给客户端。POST请求则需要对客户端发送的数据进行处理,比如验证用户名和密码,然后创建并设置cookie。HEAD请求...
DOCTYPE html>`声明、`<html>`根元素、`<head>`头部信息和`<body>`主体内容。 2. CSS基础概念: - 选择器:如`h1`(选择所有一级标题)或`.class`(选择具有特定类名的元素)。 - 属性与值:如`color: red;`设置...
CORS分为简单请求和预检请求(OPTIONS请求),对POST、PUT等非GET、HEAD、OPTIONS方法,以及自定义头部的使用需要预检请求。 在Vue.js项目中,前端可以使用axios等库进行HTTP请求,配置代理服务器或者让后端配合...
- **基本结构**: HTML 文件由头部 `<head>` 和主体 `<body>` 两大部分组成。 - `<head>` 区域用于定义网页的元数据,如标题、使用的字符集以及链接外部样式表或脚本文件。 - `<body>` 区域则包含网页的所有可见...
4. JavaScript读取响应结果,并根据需要更新DOM元素。 #### 5. 如何适配移动端 为了确保网页在各种尺寸的移动设备上都能良好显示,开发者需要采用响应式布局技术。这里列出了几种常见的适配移动端的方法: - **...