整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
裝文件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.$=$;
})();語言類似于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)求的頁面地址
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)求的頁面地址
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(頁面地址,傳遞參數(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:完成頁面的內(nèi)容展示
CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。
表單：用于采集用戶輸入的數(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)度沒有限制
3.較為安全
表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性
Query get() 和 post() 方法用于通過 HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。
HTTP 請(qǐng)求：GET vs. POST
兩種在客戶端和服務(wù)器端進(jìn)行請(qǐng)求-響應(yīng)的常用方法是：GET 和 POST。
GET - 從指定的資源請(qǐng)求數(shù)據(jù)
POST - 向指定的資源提交要處理的數(shù)據(jù)
GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
語法：
$.get(URL,callback);
必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.get() 方法從服務(wù)器上的一個(gè)文件中取回?cái)?shù)據(jù)：
實(shí)例
$("button").click(function(){ $.get("demo_test.php",function(data,status){alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status); });});
$.get() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的 URL（"demo_test.php"）。
第二個(gè)參數(shù)是回調(diào)函數(shù)。第一個(gè)回調(diào)參數(shù)存有被請(qǐng)求頁面的內(nèi)容，第二個(gè)回調(diào)參數(shù)存有請(qǐng)求的狀態(tài)。
提示： 這個(gè) PHP 文件 ("demo_test.php") 類似這樣：
demo_test.php 文件代碼:
<?phpecho'這是個(gè)從PHP文件中讀取的數(shù)據(jù)。';?>
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
語法:
$.post(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
可選的 data 參數(shù)規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.post() 連同請(qǐng)求一起發(fā)送數(shù)據(jù)：
實(shí)例
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", {name:"菜鳥教程", url:"http://www.runoob.com"}, function(data,status){alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status); });});
$.post() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的 URL ("demo_test_post.php")。
然后我們連同請(qǐng)求（name 和 url）一起發(fā)送數(shù)據(jù)。
"demo_test_post.php" 中的 PHP 腳本讀取這些參數(shù)，對(duì)它們進(jìn)行處理，然后返回結(jié)果。
第三個(gè)參數(shù)是回調(diào)函數(shù)。第一個(gè)回調(diào)參數(shù)存有被請(qǐng)求頁面的內(nèi)容，而第二個(gè)參數(shù)存有請(qǐng)求的狀態(tài)。
提示： 這個(gè) PHP 文件 ("demo_test_post.php") 類似這樣：
demo_test_post.php 文件代碼:
<?php$name=isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';$url=isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';echo'網(wǎng)站名: ' . $name;echo"\n";echo'URL 地址: ' .$url;?>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
