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

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

创建一个xmlhttp对象

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对象向服务器端发送一个请求

var  oXml  =  getXMLHttpObj();

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

< xml >
  < contacts >
   < person  firstname ="Joe"  lastname ="Smith"  phone ="555-1212"   />
   < person  firstname ="Sam"  lastname ="Stevens"  phone ="123-4567"   />
  </ contacts >
</ xml >

JSON:

{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的规则
对象以{}封闭
数组以[]封闭
所有的字符串加双引号
使用双引号需要用/转义

function  processingFunction(){
     if (oXml.readyState != 4 )  return ;  //  our request is not done

     //  we process the results here.  More on that later!
}

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

function  processingFunction(){
     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格式

function  processingFunction(){
     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分析，以确保安全。

下面是一个示例

< table cellspacing = " 1 "  cellpadding = " 3 "  bgcolor = " #000000 "  style = " font-family:tahoma;font-size:10px; " >
  < 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));
    }
}