裝文件public.js完整代碼：

(function(){
        //用于得到一個(gè)dom元素
        var $=function(id){
        				return document.getElementById(id);
        };
        //用于得到一個(gè)ajax對(duì)象
        $.init=function(){
                try{return new XMLHttpRequest()}catch(e){}
                try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
                alert('error');
        };
        //用于發(fā)送ajax的get請(qǐng)求
        $.get=function(url,data,callback,type){
                var xhr=$.init();
                if(data!=null){
                url=url+'?'+data;
        }
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                        if(type==null){
                        type='text';
                        }
                        if(type=='text'){
                        callback(xhr.responseText);
                        }
                        if(type=='xml'){
                        callback(xhr.responseXML);
                        }
                        if(type=='json'){
                        callback(eval('('+xhr.responseText+')'));
                        }
                }
        };
        xhr.open('get',url);
        xhr.setRequestHeader("If-Modified-Since","0");
        xhr.send(null);
        };
        //用于發(fā)送ajax的post請(qǐng)求
        $.post=function(url,data,callback,type){
                var xhr=$.init();
                xhr.onreadystatechange=function(){
                        if(xhr.readyState==4 && xhr.status==200){
                                //如果沒(méi)有傳遞type參數(shù)，讓type的值為text
                                if(type==null){
                                type='text';
                                }
                                if(type=='text'){
                                callback(xhr.responseText);
                                }
                                if(type=='xml'){
                                callback(xhr.responseXML);
                                }
                                if(type=='json'){
                                callback(eval('('+xhr.responseText+')'));
                                }
                        }
                };
                xhr.open('post',url);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send(data);
}
window.$=$;
})();

語(yǔ)言類似于jQuery

理解:

1、添寫一個(gè)自調(diào)用匿名函數(shù)

(function (){
})();

在一個(gè)項(xiàng)目中，可能會(huì)引用多個(gè)js框架，如果函數(shù)名相同，會(huì)有命名沖突，定義匿名函數(shù)沒(méi)有名稱，就不會(huì)沖突，

但匿名函數(shù)不能執(zhí)行，所以需要使用以上格式讓其自動(dòng)執(zhí)行一次。

2、封裝一個(gè)函數(shù)，用于dom元素的獲取

var $=function(id){
return document.getElementById(id);
};

但$是局部變量，外面不能直接使用，所以：

window.$=$;

表示為全局對(duì)象window添加一個(gè)"$"的屬性，這個(gè)屬性的值是當(dāng)前局部變量$的值。

所以在外部，如果想獲取某個(gè)dom元素，可以直接：

$('content');

3、封裝一個(gè)函數(shù)，用于創(chuàng)建ajax對(duì)象

因?yàn)橹埃覀儗⒁粋€(gè)函數(shù)賦值給了$，函數(shù)也是對(duì)象，所以$也就是一個(gè)對(duì)象

$.init=function(){
        try{return new XMLHttpRequest()}catch(e){}
        try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
        alert('error');
};

表示為對(duì)象$添加一個(gè)新的方法：init

當(dāng)然, 也可以添加其它方法

4、封裝ajax的get請(qǐng)求

為對(duì)象 $添加一個(gè)get方法，參數(shù)有三個(gè)

url：表示ajax請(qǐng)求的頁(yè)面地址

data：表示get請(qǐng)求時(shí)所需要傳遞的參數(shù)

callback：當(dāng)ajax得到正確數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。

$.get=function(url,data,callback,type){
        var xhr=$.init();
        if(data!=null){
        				url=url+'?'+data;
        }
        xhr.open('get',url);
        xhr.setRequestHeader("If-Modified-Since","0");
        xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                      if(type==null){
                              type='text';
                      }
                      if(type=='text'){
                              callback(xhr.responseText);
                      }
                      if(type=='xml'){
                              callback(xhr.responseXML);
                      }
                      if(type=='json'){
                              callback(eval('('+xhr.responseText+')'));
                      }
        		}
        };
        xhr.send(null);
};

5、封裝post請(qǐng)求

為對(duì)象 $添加一個(gè)post方法，參數(shù)有三個(gè)

url：表示ajax請(qǐng)求的頁(yè)面地址

data：表示post請(qǐng)求時(shí)所需要傳遞的參數(shù)

callback：當(dāng)ajax得到正確數(shù)據(jù)后，所執(zhí)行的回調(diào)函數(shù)，也就是參數(shù)callback接收的參數(shù)應(yīng)該是一個(gè)函數(shù)。

$.post=function(url,data,callback,type){
var xhr=$.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
                //如果沒(méi)有傳遞type參數(shù)，讓type的值為text
                if(type==null){
                        type='text';
                }
                if(type=='text'){
                        callback(xhr.responseText);
                }
                if(type=='xml'){
                        callback(xhr.responseXML);
                }
                if(type=='json'){
                        callback(eval('('+xhr.responseText+')'));
                }
        }
    };
    xhr.send(data);
}

當(dāng)調(diào)用ajax請(qǐng)求時(shí)，可以使用這種形式：

$.method(頁(yè)面地址,傳遞參數(shù),處理函數(shù));

那么對(duì)應(yīng)的方法中callback參數(shù)就指向了這個(gè)處理函數(shù)，所以

callback(xhr.responseText);

相當(dāng)于

處理函數(shù)(xhr.responseText);

6、添加返回值類型

現(xiàn)在，我們?cè)赼jax程序中，可以使用三種數(shù)據(jù)形式：

1）字符串

2）xml

3）json

我們需要完善這個(gè)框架，可以返回不同類型的數(shù)據(jù)，再進(jìn)行不同的處理。

首先，為get和post方法添加第四個(gè)參數(shù)：type，表示期望得到的返回值類型

$.post=function(url,data,callback,type){}

再根據(jù)type值的不同，返回對(duì)應(yīng)的數(shù)據(jù)

if(type==null){
      type='text';
}
if(type=='text'){
        callback(xhr.responseText);
}
if(type=='xml'){
        callback(xhr.responseXML);
}
if(type=='json'){
        callback(eval('('+xhr.responseText+')'));
}

調(diào)用形式

$.method(請(qǐng)求地址,參數(shù),處理函數(shù),數(shù)據(jù)類型);

TML:完成頁(yè)面的內(nèi)容展示

CSS：完成頁(yè)面樣式的控制，美化頁(yè)面，完成頁(yè)面的布局。

表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。

form:用于定義表單的。可以定義一個(gè)范圍(代表用戶采集數(shù)據(jù)的范圍)

屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)

method:指定提交方式

分類：一共有7種，2種比較常用。

get:1.請(qǐng)求參數(shù)會(huì)在地址欄顯示

2.請(qǐng)求參數(shù)的長(zhǎng)度是有限制的。

3.請(qǐng)求不安全

post:1.請(qǐng)求參數(shù)不會(huì)在地址欄顯示，會(huì)封裝在請(qǐng)求體中。

2.請(qǐng)求參數(shù)的長(zhǎng)度沒(méi)有限制

3.較為安全

表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性