整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
裝文件public.js完整代碼：
(function(){
//用于得到一個dom元素
var $=function(id){
return document.getElementById(id);
};
//用于得到一個ajax對象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};
//用于發送ajax的get請求
$.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);
};
//用于發送ajax的post請求
$.post=function(url,data,callback,type){
var xhr=$.init();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//如果沒有傳遞type參數，讓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、添寫一個自調用匿名函數
(function (){
})();在一個項目中，可能會引用多個js框架，如果函數名相同，會有命名沖突，定義匿名函數沒有名稱，就不會沖突，
但匿名函數不能執行，所以需要使用以上格式讓其自動執行一次。
2、封裝一個函數，用于dom元素的獲取
var $=function(id){
return document.getElementById(id);
};但$是局部變量，外面不能直接使用，所以：
window.$=$;
表示為全局對象window添加一個"$"的屬性，這個屬性的值是當前局部變量$的值。
所以在外部，如果想獲取某個dom元素，可以直接：
$('content');
3、封裝一個函數，用于創建ajax對象
因為之前，我們將一個函數賦值給了$，函數也是對象，所以$也就是一個對象
$.init=function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('error');
};表示為對象$添加一個新的方法：init
當然, 也可以添加其它方法
4、封裝ajax的get請求
為對象 $添加一個get方法，參數有三個
url：表示ajax請求的頁面地址
data：表示get請求時所需要傳遞的參數
callback：當ajax得到正確數據后，所執行的回調函數，也就是參數callback接收的參數應該是一個函數。
$.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請求
為對象 $添加一個post方法，參數有三個
url：表示ajax請求的頁面地址
data：表示post請求時所需要傳遞的參數
callback：當ajax得到正確數據后，所執行的回調函數，也就是參數callback接收的參數應該是一個函數。
$.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參數，讓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);
}當調用ajax請求時，可以使用這種形式：
$.method(頁面地址,傳遞參數,處理函數);
那么對應的方法中callback參數就指向了這個處理函數，所以
callback(xhr.responseText);
相當于
處理函數(xhr.responseText);
6、添加返回值類型
現在，我們在ajax程序中，可以使用三種數據形式：
1）字符串
2）xml
3）json
我們需要完善這個框架，可以返回不同類型的數據，再進行不同的處理。
首先，為get和post方法添加第四個參數：type，表示期望得到的返回值類型
$.post=function(url,data,callback,type){}
再根據type值的不同，返回對應的數據
if(type==null){
type='text';
}
if(type=='text'){
callback(xhr.responseText);
}
if(type=='xml'){
callback(xhr.responseXML);
}
if(type=='json'){
callback(eval('('+xhr.responseText+')'));
}調用形式
$.method(請求地址,參數,處理函數,數據類型);
TML:完成頁面的內容展示
CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。
表單：用于采集用戶輸入的數據。用于和服務器進行交互。
form:用于定義表單的。可以定義一個范圍(代表用戶采集數據的范圍)
屬性：action:指定提交數據的url(指的就是把數據提交到哪里)
method:指定提交方式
分類：一共有7種，2種比較常用。
get:1.請求參數會在地址欄顯示
2.請求參數的長度是有限制的。
3.請求不安全
post:1.請求參數不會在地址欄顯示，會封裝在請求體中。
2.請求參數的長度沒有限制
3.較為安全
表單里面的數據要想被提交，必須指定它的name屬性
Query get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求數據。
HTTP 請求：GET vs. POST
兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。
GET - 從指定的資源請求數據
POST - 向指定的資源提交要處理的數據
GET 基本上用于從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據。
POST 也可用于從服務器獲取數據。不過，POST 方法不會緩存數據，并且常用于連同請求一起發送數據。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務器上請求數據。
語法：
$.get(URL,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 callback 參數是請求成功后所執行的函數名。
下面的例子使用 $.get() 方法從服務器上的一個文件中取回數據：
實例
$("button").click(function(){ $.get("demo_test.php",function(data,status){alert("數據: " + data + "\n狀態: " + status); });});
$.get() 的第一個參數是我們希望請求的 URL（"demo_test.php"）。
第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。
提示： 這個 PHP 文件 ("demo_test.php") 類似這樣：
demo_test.php 文件代碼:
<?phpecho'這是個從PHP文件中讀取的數據。';?>
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求從服務器上請求數據。
語法:
$.post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的數據。
可選的 callback 參數是請求成功后所執行的函數名。
下面的例子使用 $.post() 連同請求一起發送數據：
實例
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", {name:"菜鳥教程", url:"http://www.runoob.com"}, function(data,status){alert("數據: \n" + data + "\n狀態: " + status); });});
$.post() 的第一個參數是我們希望請求的 URL ("demo_test_post.php")。
然后我們連同請求（name 和 url）一起發送數據。
"demo_test_post.php" 中的 PHP 腳本讀取這些參數，對它們進行處理，然后返回結果。
第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。
提示： 這個 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'網站名: ' . $name;echo"\n";echo'URL 地址: ' .$url;?>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
