整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
javascript開發(fā)中我們會(huì)經(jīng)常獲取頁(yè)面中的事件對(duì)象，然后來處理這些事件，例如下面的getEvent函數(shù)就是獲取javascript下的頁(yè)面事件對(duì)象。
function getEvent(event){
return event || window.event;
}
裝文件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){
//如果沒有傳遞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ù)沒有名稱，就不會(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){
//如果沒有傳遞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ù)類型);
avascript使用document.getElementById操作div
javascript中經(jīng)常會(huì)操作div，大家在網(wǎng)上看到的各種酷炫的前端效果，很多都是通過操作div來實(shí)現(xiàn)的，下面通過實(shí)例代碼和注釋來講解：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
