ajax大多数是通过服务器端语言来获取所需的数据,javascript发出请求,服务器将查询数据库然后返回数据。数据可以通过几种形式返回。如果他是结构化的,你可以用xml或json格式。如果他是非常简单的数据,例如文本,一般人们直接返回这种数据。
创建一个xmlhttp对象
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对象向服务器端发送一个请求
oXml.open('GET', 'getData.php', true );
oXml.onreadystatechange = processingFunction;
oXml.send();
function processingFunction(){
if (oXml.readyState != 4 ) return ; // our request is not done
// we process the results here. More on that later!
}
创建XMLHttp后,用open函数指定连接的参数,一共有3个参数:请求类型,url,是否为异步传输
第一个参数通常是GET或POST。如果你是要获取数据,通常使用GET,若是提交数据,则用POST
如何以何种数据格式传输呢?
XML vs JSON vs Text
XML是一个被普遍接受的标准。JSON是一个新的标准,他的数据更容易被我们理解且体积要小。
XML
< contacts >
< person firstname ="Joe" lastname ="Smith" phone ="555-1212" />
< person firstname ="Sam" lastname ="Stevens" phone ="123-4567" />
</ contacts >
</ xml >
JSON:
{"firstname":"Joe", "lastname":"Smith", "phone":"555-1212"},
{"firstname":"Sam", "lastname":"Stevens", "phone":"123-4567"}
]}
JSON看起来像javascript代码
XML中以下的标签要被替代
& --> &
< --> <
> --> >
" --> "
' --> '
服务器端传过来的代码必须带有值为text/xml的content-type ,如果你获取的文件是xml扩展名,系统会自动添加。如果不是则应该手动添加信息。
PHP
<?php header('Content-type: text/xml'); ?>
ASP
<% response.contentType = "text/xml" %>
JSON的规则
对象以{}封闭
数组以[]封闭
所有的字符串加双引号
使用双引号需要用/转义
if (oXml.readyState != 4 ) return ; // our request is not done
// we process the results here. More on that later!
}
当XMLHttp请求完毕,XMLHttp提供两个方法来返回数据: responseXML和 responseText。
if (oXml.readyState != 4 ) return ;
var xmlDoc = oXml.responseXML;
var contacts = xmlDoc.selectNodes(' / xml / contacts / person');
alert('There are ' + contacts.length + ' contacts ! ');
for ( var i = 0 ; i < contacts.length; i ++ ){
alert('Contact #' + (i + 1 ) + ':/n/n' +
'First Name: ' + contacts[i].getAttribute('firstname') + '/n' +
'Last Name: ' + contacts[i].getAttribute('lastname') + '/n' +
'Phone #: ' + contacts[i].getAttribute('phone') + '/n');
}
}
使用JSON格式
if (oXml.readyState != 4 ) return ;
var json = eval('(' + oXml.responseText + ')');
alert('There are ' + json.contacts.length + ' contacts ! ');
for ( var i = 0 ; i < json.contacts.length; i ++ ){
alert('Contact #' + (i + 1 ) + ':/n/n' +
'First Name: ' + json.contacts[i].firstname + '/n' +
'Last Name: ' + json.contacts[i].lastname + '/n' +
'Phone #: ' + json.contacts[i].phone + '/n');
}
}
JSON字符串可以使用eval()函数来转换。如果你信任数据的来源,你可以直接这样转换,若数据是从其他地方来,你应该进行JSON分析,以确保安全。
下面是一个示例
< tbody id = " contactListTable " >
< tr style = " background-color:#CCF; " >
< th > First Name </ th >
< th > Last Name </ 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));
}
}