AJAX学习笔记

iptton

＝－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＝
＝－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＝
现状：　　DHTML基础　（Javascript  CSS  HTML  DOM）

参考书：   《 Foundations of AJAX 》《AJAX In Action》
(AJAX基础，AJAX实战，两本书的中文版都可以在图书馆借到（大学城），电子书目前只知道有E文版下载)      

＝－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＝
＝－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＝

AJAX:           异步JAVASCRIPT＋XML   (Asynchronous Javascript XML)

　1，AJAX是客户端技术
　2，与AJAX同时出现的最频繁的字眼是：“用户体验”
　3，学AJAX所要学的“新”东西是：　XMLHTTPRequest　

一个最简单的AJAX封装应用：
(注意，必须要放在服务器目录下，不能本地访问)

xhrclass.js

/**
*   class XmlHTTPRequest
*
*      这个是我浏览完Foundations of AJAX后写的一个HTTPRequest封装
*
*
*
*
*
*
*
*
*
**/
function xhrclass(method,url,asyn,callback){
        var m_method=method;
        var m_url=url;
        var m_asyn=asyn;
        this.xhrcallback=callback;
        this.startXHR=function(){
                this.creatXHR();
                xhr.onreadystatechange=function(){
                        if(xhr.readyState==4){
                                if(xhr.status==200){
                                        this.xhrcallback();
                                }       
                        }       
                }
                try{
                        xhr.open(m_method,m_url,m_asyn);
                }catch(e){
                        alert("cannot open");       
                }
                if(m_method=="POST"){
                          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                }
                if (xhr.overrideMimeType) {
                        xhr.overrideMimeType('text/xml');
                }
                if(xhr==null)
                        alert("cannot create xhr");
        };
        this.creatXHR=function(){
                if(window.ActiveXObject)
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");       
                else
                        xhr=new XMLHttpRequest();
        };
        this.sendit=function(t){
                xhr.send(t);       
        };
        this.getText=function(){
                var ret;
                try{
                        ret=xhr.responseText;       
                }catch(e){
                        alert("xhr.responseText wrong!");
                }
                return ret;
        };
        this.getXML=function(){
                return xhr.respon***ML;       
        }
}

　　
使用例子：
test.htm

<script language="javascript" src="xhrclass.js"></script>
<script language="javascript">
    function xhrcallback(){
          alert(xhr1.getText());
    }

    function showIntro(teacherid){
               //未做兼容处理
               try{
                       创建xhrclass实例
          xhr1=new xhrclass("GET","TEST.xml",true,xhrcallback);
              }catch(e){
        alert("cannot create class");       
              }
              //启动xmlHTTPRequest接接       
              xhr1.startXHR();
              
             xhr1.sendit(null);               
    }
</script>
<div id="a"></div>
<table>
<tr>
    <td onmouseover="javascript:showIntro();" >把鼠标放在上面！</td>
</tr>
</table>

test.xml
这个文件可以是php文件,如此例可写为：<?PHP echo("This is from server"); ?>

this is from server

powerwind

原帖由 iptton 于 2006-11-1 13:07 发表
AJAX基础，AJAX实战，两本书的中文版都可以在图书馆借到（大学城)

是不是都给你借了?我没有看到AJAX实战这本啊!
不过算了,应该没有时间看了.



应该不只是一本吧，我借了一本时记得还有的。。。建议去二楼查下。。。

　　　　　　　　　　　　　　　-----------by Iptton

[ 本帖最后由 iptton 于 2006-11-1 22:37 编辑 ]

iptton

GMail 上的XMLRequest兼容性应该很强的了。。。

1. 
   
2. function SendJS(url) {
   
3.   var xhr;
   
4.   try {
   
5.     xhr = new XMLHttpRequest();
   
6.   } catch (e) {
   
7.     var a = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
   
8.       'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'MICROSOFT.XMLHTTP.1.0',
   
9.       'MICROSOFT.XMLHTTP.1', 'MICROSOFT.XMLHTTP'];
   
10.     for (var i = 0; i < a.length; i++) {
    
11.       try {
    
12.         xhr = new ActiveXObject(a[i]);
    
13.         break;
    
14.       } catch (e) {
    
15.       }
    
16.     }
    
17.   }
    
18.   if (xhr) {
    
19.     xhr.open("POST", url, true);
    
20.     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
21.     var data = '&js=' + encodeURIComponent(top.js.document.body.innerHTML);
    
22.     xhr.send(data);
    
23.   }
    
24. }
    

复制代码