Ajax Hacks-hack9 深入了解HTTP Response

ajax|response

Ajax Hacks-hack9 深入了解HTTP Response

HTTP响应头是描述性的信息,符合HTTP 1.1 协议规范,web服务器向请求端发送精确的页面或数据。如果你已经使用XMLHttpRequest对象编过程(在本章的前面讨论过),你应该知道request.status属性是从服务器返回的响应状态码。它是用来检测HTTP响应状态的重要值。

装态值包括200(请求成功)、404(请求的URL不存在,或页面不存在)500(服务器内部错误)。

然而,你还想看到更多的其他优选请求的响应头信息,例如与响应相关的web服务器软件类型(服务器请求头),或者响应的content类型(Content-Type)。本hack请求用户输入的一个URL。当用户点击输入框以外的部分时,浏览器会显示该URL的响应头信息。作为一个ajax应用,页面是不会出现刷新情况的。

请求对象方法只返回可用的响应头的一个子集,包括Content-Type, Date, Server,和Content-Length.

HTML代码如下:

“http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd”>

Find out the HTTP response headers when you "GET" a Web page

javascript:void%200>

Enter a URL:

::press tab when finished editing the

field::

Figure 1-13 shows the page in the Safari browser.

Figure 1-13. Scoping the response

程序预先使用http://www.parkerriver.com/s/sender?name=guest来填充该text。

当用户输入URL以后点击Tab键,或点击输入框外的部分时,输入框的onblur事件被激发。事件处理函数是getAllHeaders,该函数传递用户输入的RUL进入request对象。request对象向此URL发送请求,并向web页面返回的响应头。

下面的代码是文件hack7.js。显示代码以后,将解释一下如何显示服务器响应头信息。其余的可以参考本章其他hack。

var request;

var urlFragment=“http://www.parkerriver.com/s/sender?name=guest”;

function getAllHeaders(url){

httpRequest(“GET”,url,true);

}

//function for XMLHttpRequest onreadystatechange event handler function handleResponse( ){ try{ if(request.readyState == 4){ if(request.status == 200){ /* All headers received as a single string */ var headers = request.getAllResponseHeaders( ); var div = document.getElementById(“msgDisplay”; div.className=“header”; div.innerHTML=”

"+headers+"

"; } else { //request.status is 503 if the application isn‘t available; //500 if the application has a bug alert(request.status); alert(“A problem occurred with communicating between ”+ “the XMLHttpRequest object and the server program.”; } }//end outer if } catch (err) { alert(“It does not appear that the server is ”+ “available for this application. Please”+ “ try again very soon. \\nError: ”+err.message);

}

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

try{

/* Specify the function that will handle the HTTP response */

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.send(null);

} catch (errv) {

alert(

“The application cannot contact the server at the moment. ”+

“Please try again in a few seconds.” );

}

}

/* Wrapper function for constructing a request object.

Parameters:

reqType: The HTTP request type, such as GET or POST.

url: The URL of the server program.

asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){

//Mozilla-based browsers

if(window.XMLHttpRequest){

request = new XMLHttpRequest( );

} else if (window.ActiveXObject){

request=new ActiveXObject(“Msxml2.XMLHTTP”;

if (! request){

request=new ActiveXObject(“Microsoft.XMLHTTP”;

}

}

//the request could still be null if neither ActiveXObject

//initialization succeeded

if(request){

initReq(reqType,url,asynch);

} else {

alert(“Your browser does not permit the use of all ”+

“of this application‘s features!”;

}

}

令人感兴趣的部分是handleResponse函数。该函数调用request对象的getAllResponseHeaders方法,该方法返回所有的可用的响应头信息,预格式为string。开发者更喜欢这些值作为JSON格式返回,而不是作为一个单一的字符串返回。

为取得一个头信息,也可以使用request.getResponseHeader方法。例如request.getResponseHeader("Content-Type")可以得到响应头的Content类型:

接下来代码将取得div元素,并在其中显示头信息:

if(request.status == 200){ /* All headers received as a single string */ var headers = request.getAllResponseHeaders( ); var div = document.getElementById(“msgDisplay”; div.className=“header”; div.innerHTML=”

"+headers+"

"; }...

为能向信息显示提供CSS格式,代码设置了div的className属性,这个类已经预先定义了,代码如下:

div.header{ border: thin solid black; padding: 10%;

font-size: 0.9em; background-color: yellow}

span.message { font-size: 0.8em; }

以这样的方式,代码会动态地将一个div连向一个特定的CSS类,这个类是单独定义的。这种策略帮助DOM编程者描述区分。最后div的innerHTML属性被设置进返回头值里边。

<

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索xmlhttprequest
, 代码
, function
, request
, http响应头
, Headers
, The
, http.request方法
, 点击div以外
Scoping
ajax hacks pdf、ajax responsetext、ajax response、ajax response header、ajax获取responsetext,以便于您获取更多的相关知识。

时间: 2016-03-25

Ajax Hacks-hack9 深入了解HTTP Response的相关文章

AJAX Hacks 之HACK1. 检测浏览器的兼容性

ajax|浏览器 AJAX Hacks 之HACK1. 检测浏览器的兼容性 本节介绍如何使用JavaScript 建立起IE或Mozilla浏览器相应的请求对象.客户端使用的浏览器是各种各样的.因此也有不同的请求对象.如在Firefox, Netscape, Safari,Opera中是XMLHttpRequest.IE则是Microsoft.XMLHTTP 或 Msxml2.XMLHTTP. 使用AJAX的第一步是检测客户浏览器的类型,根据相应的类型取得request 对象.下面就是取得该对象

AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递

ajax|request|对象|服务器|数据 AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递 以传统的传送表单数据的方式开始,本节介绍使用post方法发送数据,与服务器进行通信,而在这个过程中不会出现页面刷新现象.然后显示服务器相应的信息. 页面很简单,就是一个表单,要求用户输入姓名.性别.国家或地区.输入完毕用户可以提交表单.(具体图示见原文) 页面的HTML代码如下:"http://www.w3.org/TR/1999/REC-html401–1999122

AJAX Hacks之Hack 4. 接收XML格式的数据

ajax|xml|数据 AJAX Hacks之Hack 4. 接收XML格式的数据 当前的许多交换数据的技术都使用XML格式的数据,那是因为XML格式的数据被广泛的使用和支持.因此,不同用户可以已有的技术来生成.发送.接收XML数据而不需要使用别的工具转换数据的格式. 一个典型的例子就是一个GPS设备可以在任何地方共享它需要的数据.无论是在远行.或是户外活动,当把设备插入到计算机的UBS接口后,就可以向web发送数据了.GPS软件被设置为默认支持XML格式的数据.而web也使用xml格式的数据.

AJAX Hacks 之HACK3. 使用独立的文件来取得http request

ajax|request AJAX Hacks 之HACK3. 使用独立的文件来取得http request 本节讲述将初始化request对象的代码从其他代码中抽取出来,作为一个单独的JavaScrip文件来使用. 当一个Ajax应用程序很大的时候,理清每部分的功能是很有必要的.所以把管理XMLHttpRequest对象的代码作为一个独立的js文件保存,如果某个页面使用到它,就将它加载近来,这样做无疑更容易管理.当代码需要修改时,只需修改该文件就是. hack将所有的和request-obje

Ajax Hacks chm文件与源代码 下载_AJAX相关

Aajax探密书籍,收集了100条提示和技巧,并涵盖了Aajax技术的精华. Ajax Hacks  By Bruce W. Perry  本地下载

Ajax hacks 之绪论:告别页面刷新

ajax|刷新|页面         曾记得INTERNET被用户称作"world wide wait"吗? web又回到了新石器时代了么? 在许多应用中, web仍然没有得到很大的改变.充斥着form.按钮,页面转移,等待,页面刷新,纠正错误,点击.等待--这可真够受的.  现在的许多网站,例如许多经过精心设计的网站得到了很大的提高.需要更多的用户响应,这样浏览器会在服务器处理完以后才得到响应. 例如google map就是这样工作的:客户机会将所有的信息缓存起来,这样用户在移动地图

Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息

ajax|css Ajax Hacks-Hack 10. 使用CSS文件产生格式化的信息 让用户选择他们喜爱的消息格式. hack向服务器发送一个请求,服务器返回一个文本信息.而用户的选择将决定信息的内容和表现形式.HTML代码有一个下拉选择,让用户选择结果的表示形式. 下面是HTML代码: "http://www.w3.org/TR/1999/REC-html401–19991224/strict.dtd"> function setSpan( ){ document.getE

Ajax程序开发中常见问题

Ajax程序开发中常见问题,看下文章或许你就少犯了许多错误了. 1.ajax,action中response返回的xml文档格式错误时,eclipse debug进入不到action中.     2.ajax缓存问题,需要加入xmlHttp.setRequestHeader("If-Modified-Since","0");便可解决.     3.如果不是ajax提交,而设置了PrintWriter out = response.getWriter();则jsp会产

Ajax应用中常见问题

1.ajax,action中response返回的xml文档格式错误时,eclipse debug进入不到action中. 2.ajax缓存问题,需要加入xmlHttp.setRequestHeader("If-Modified-Since","0″);便可解决. 3.如果不是ajax提交,而设置了PrintWriter out = response.getWriter();则jsp会产生中文乱码. 4.ajax返回xml乱码的原因 response.setContentTy