javascript学习笔记 （六）-ajax相关

ajax大多数是通过服务器端语言来获取所需的数据，javascript发出请求，服务器将查询数据库然后返回数据。数据可以通过几种形式返回。如果他是结构化的，你可以用xml或json格式。如果他是非常简单的数据，例如文本，一般人们直接返回这种数据。

创建一个xmlhttp对象

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> if ( typeof (XMLHttpRequest) != 'undefined'){
var getXMLHttpObj = function (){ return new XMLHttpRequest();}
} else {
var getXMLHttpObj = function (){
var activeXObjects = ['Msxml2.XMLHTTP. 6.0 ','Msxml2.XMLHTTP. 5.0 ','Msxml2.XMLHTTP. 4.0 ',
'Msxml2.XMLHTTP. 3.0 ','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
for ( var i = 0 ;i < activeXObjects.length;i ++ ){
try {
return new ActiveXObject(activeXObjects[i]);
} catch (err){}
}
}
}

任何支持XMLHttpRequest对象的浏览器都可以用这个内建的对象。IE7现在支持这个对象，但IE6或较老的版本不能支持，他们只能通过Microsoft的XMLHttpRequest ActiveX对象。

现在用XMLHttp对象向服务器端发送一个请求

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> var oXml = getXMLHttpObj();

oXml.open('GET','getData.php', true );
oXml.onreadystatechange = processingFunction;
oXml.send();

function processingFunction(){
if (oXml.readyState != 4 ) return ; // ourrequestisnotdone
// weprocesstheresultshere.Moreonthatlater!
}

创建XMLHttp后，用open函数指定连接的参数，一共有3个参数：请求类型，url，是否为异步传输
第一个参数通常是GET或POST。如果你是要获取数据，通常使用GET，若是提交数据，则用POST

如何以何种数据格式传输呢？
XML vs JSON vs Text
XML是一个被普遍接受的标准。JSON是一个新的标准，他的数据更容易被我们理解且体积要小。
XML

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < xml >
< contacts >
< person firstname ="Joe" lastname ="Smith" phone ="555-1212" />
< person firstname ="Sam" lastname ="Stevens" phone ="123-4567" />
</ contacts >
</ xml >

JSON:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> {contacts:[
{"firstname":"Joe","lastname":"Smith","phone":"555-1212"},
{"firstname":"Sam","lastname":"Stevens","phone":"123-4567"}
]}

JSON看起来像javascript代码
XML中以下的标签要被替代
& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> '
服务器端传过来的代码必须带有值为text/xml的content-type ，如果你获取的文件是xml扩展名，系统会自动添加。如果不是则应该手动添加信息。
PHP
<?php header('Content-type: text/xml'); ?>
ASP
<% response.contentType = "text/xml" %>

JSON的规则
对象以{}封闭
数组以[]封闭
所有的字符串加双引号
使用双引号需要用\转义

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> function processingFunction(){
if (oXml.readyState != 4 ) return ; // ourrequestisnotdone

// weprocesstheresultshere.Moreonthatlater!
}

当XMLHttp请求完毕，XMLHttp提供两个方法来返回数据： responseXML和 responseText。

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> function processingFunction(){
if (oXml.readyState != 4 ) return ;

var xmlDoc = oXml.responseXML;
var contacts = xmlDoc.selectNodes(' / xml / contacts / person');

alert('Thereare' + contacts.length + 'contacts ! ');

for ( var i = 0 ;i < contacts.length;i ++ ){
alert('Contact#' + (i + 1 ) + ':\n\n' +
'FirstName:' + contacts[i].getAttribute('firstname') + '\n' +
'LastName:' + contacts[i].getAttribute('lastname') + '\n' +
'Phone#:' + contacts[i].getAttribute('phone') + '\n');
}
}

使用JSON格式

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> function processingFunction(){
if (oXml.readyState != 4 ) return ;

var json = eval('(' + oXml.responseText + ')');

alert('Thereare' + json.contacts.length + 'contacts ! ');

for ( var i = 0 ;i < json.contacts.length;i ++ ){
alert('Contact#' + (i + 1 ) + ':\n\n' +
'FirstName:' + json.contacts[i].firstname + '\n' +
'LastName:' + json.contacts[i].lastname + '\n' +
'Phone#:' + json.contacts[i].phone + '\n');
}
}

JSON字符串可以使用eval()函数来转换。如果你信任数据的来源，你可以直接这样转换，若数据是从其他地方来，你应该进行JSON分析，以确保安全。

下面是一个示例

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < tablecellspacing = " 1 " cellpadding = " 3 " bgcolor = " #000000 " style = " font-family:tahoma;font-size:10px; " >
< tbodyid = " contactListTable " >
< trstyle = " background-color:#CCF; " >
< th > FirstName </ th >
< th > LastName </ th >
< th > Phone# </ th >
</ tr >
</ tbody >
</ table >

function loadContactListPage(n){
var oXML = getXMLHttpObj();
oXML.open('GET',' / img / 10_json_file' + n + '.txt', true );
oXML.onreadystatechange = function (){doneLoading(oXML);}
oXML.send('');
}

function doneLoading(oXML){
if (oXML.readyState != 4 ) return ;

var json = eval('(' + oXML.responseText + ')');
var table = document.getElementById('contactListTable');

for ( var i = table.childNodes.length - 1 ;i > 1 ;i -- ){
table.removeChild(table.childNodes[i]);
}

for ( var i = 0 ;i < json.contacts.length;i ++ ){
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');

tr.style.backgroundColor = i % 2 ? '#FFF':'#E6E6E6';

table.appendChild(tr);

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

td1.appendChild(document.createTextNode(json.contacts[i].firstname));
td2.appendChild(document.createTextNode(json.contacts[i].lastname));
td3.appendChild(document.createTextNode(json.contacts[i].phone));
}
}