iptton 发表于 2006-11-1 13:07

AJAX学习笔记

=---------------------------------------------=
=---------------------------------------------=
现状:  DHTML基础 (JavascriptCSSHTMLDOM)

参考书:   《 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 发表于 2006-11-1 16:43

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

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



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

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

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

iptton 发表于 2006-11-1 22:33

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


function SendJS(url) {
var xhr;
try {
    xhr = new XMLHttpRequest();
} catch (e) {
    var a = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
      'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'MICROSOFT.XMLHTTP.1.0',
      'MICROSOFT.XMLHTTP.1', 'MICROSOFT.XMLHTTP'];
    for (var i = 0; i < a.length; i++) {
      try {
      xhr = new ActiveXObject(a);
      break;
      } catch (e) {
      }
    }
}
if (xhr) {
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = '&js=' + encodeURIComponent(top.js.document.body.innerHTML);
    xhr.send(data);
}
}
页: [1]
查看完整版本: AJAX学习笔记