First name:

Last name:

Gender:

Country of origin:

Send Data

Figure 1-3 输入前的画面.

文件hack3.js中的JavaScript代码使用POST方法向服务器发送请求，然后接收服务器响应的xml格式的数据。字段确认部分在这里跳过去了，当让这是必不可少的。

和本章其他例子相似，服务器程序返回给客户的数据格式为：Bruce.

代码如下：

var request;

var queryString; //用来存储post的数据

function sendData( ){

setQueryString( );

var url=“http://www.parkerriver.com/s/sender”;

httpRequest(“POST”,url,true);

}

//XMLHttpRequest处理函数

function handleResponse( ){

if(request.readyState == 4){

if(request.status == 200){

var doc = request.responseXML;

var info = getDocInfo(doc);

stylizeDiv(info,document.getElementById(““docDisplay“”);

} else {

alert(““A problem occurred with communicating between “”+

““the XMLHttpRequest object and the server program.“”;

}

}//end outer if

}

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

function initReq(reqType,url,bool){

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

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.setRequestHeader(““Content-Type“”,

““application/x-www-form-urlencoded; charset=UTF-8“”;

/* Only works in Mozilla-based browsers */

//request.overrideMimeType(““text/xml“”;

request.send(queryString);

}

/* 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){

//Snipped…See Hack #1

}

function setQueryString( ){

queryString=“”;

var frm = document.forms[0];

var numberElements = frm.elements.length;

for(var i = 0; i < numberElements; i++) {

if(i < numberElements-1) {

queryString = frm.elements[i].name"="+

encodeURIComponent(frm.elements[i].value)+“&”;

} else {

queryString = frm.elements[i].name"="+

encodeURIComponent(frm.elements[i].value);

}

}

}

/* Provide the div element‘s content dynamically. We can add

style information to this function if we want to jazz up the div */

function stylizeDiv(bdyTxt,div){

//reset DIV content

div.innerHTML=“”;

div.style.backgroundColor=“yellow”;

div.innerHTML=bdyTxt;

}

/* Get information about an XML document via a DOM Document object */

function getDocInfo(doc){

var root = doc.documentElement;

var info = ”

Document root element name:

"+ root.nodeName;

var nds;

if(root.hasChildNodes( )) {

nds=root.childNodes;

info+= ”

Root node’s child node names/values:

";

for (var i = 0; i < nds.length; i++){

info+= nds[i].nodeName;

if(nds[i].hasChildNodes( )){

info+= “ : \\“+nds[i].firstChild.nodeValue+“\\”
";

} else {

info+= ” : Empty
";

}

}

}

return info;

}

Mozilla Firefox可是使用request.overrideMimeType( )函数强制格式化象形数据的格式类型，使用 request.overrideMimeType("text/xml"). IE中不必这么做。

在POSTs完数据后接收响应,然后调用函数getDocInfo( ), 该函数用来显示XML文档的信息：

var doc = request.responseXML;

var info = getDocInfo(doc);

geTDocInfo( )函数取得xml的根元素(var root = doc.documentElement; 建立一个string来保存root元素的信息以及其子元素的信息。接下来stylizeDiv( )函数用来显示该string.

function stylizeDiv(bdyTxt,div){

//reset div content

div.innerHTML=“”;

div.style.backgroundColor=“yellow”;

div.innerHTML=bdyTxt;

}

本hack主要讲如何从响应的xml文件中提取信息，使用DOM的文档对象模型来提取信息，然后向浏览器显示信息。