第六章 1、 JavaScript的Ajax的實現步驟： 1) 定義一個函數用來非同步獲取信息 2) 聲明： 3) 賦值(實現瀏覽器相容)： 4) 初始化 5) 設置回調函數。因為要做非同步調用，所以需要註冊一個XMLHttpRequest對象將調用的回調事件處理器當它的readyState值改變時調用 ...
第六章
1、 JavaScript的Ajax的實現步驟：
1) 定義一個函數用來非同步獲取信息
function Ajax(){ }
2) 聲明：
var xmlHttpReq = null;
3) 賦值(實現瀏覽器相容)：
if(window.ActiveXObject){ xmlHttpReq = new ActiveXObject(“Microsoft.XMLHttp”); }else if(window. XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest(); }
4) 初始化
xmlHttpReq.open(“GET”,”test.php”,true);//第三個參數是是否非同步的
5) 設置回調函數。因為要做非同步調用，所以需要註冊一個XMLHttpRequest對象將調用的回調事件處理器當它的readyState值改變時調用。
xmlHttpReq.onreadystatechange = RequestCallBack;
6) 發送請求，因為剛纔發送的是GET，所以可以不指定參數或使用null
xmlHttpReq.send(null)
7)
function RequestCallBack(){ if(xmlHttpReq. readyState == 4){ if(xmlHttpReq.status == 200){ document.getElementById(“resText”).innerHTML= xmlHttpReq.responseText; } { }
2、 load()
1) 載入HTML方法：load(【url】,【data,可選】,【function,可選】)
2) 篩選載入的HTML方法：load(“test.html .class”)
3) 傳遞方式：無參是GET方式傳遞，有參會自動轉為POST
(1) 無參(GET方式)：load(“test.html .class”,function(){})
(2) 有參(POST方式)：load(“test.html .class”,{name:”ccl”,age:”23”},function(){})
4) 回調參數：load(“test.html .class”,function(responseText,textStatus,XMLHttpReq){})
3、 $.get()和$.post()方法
1) $.get(url,【data,可選】,【function(data,textStatus){},可選】,【type(伺服器返回的內容格式xml/html/script/json/text/_default) ,可選】)
(1) 【data】可以使用{ username:$(“#username”).val(),content:$(“#content”).val()}
(2) 【function(data,textStatus){}】:data返回的類型可以是xml/html/ json……
eg：接下來的內容寫在function裡面
(1st) html格式：（最簡單）
$("#res”).html(data)
(2nd) xml格式
var username = $(data).find(“comment”).attr(“username”); var content = $(data).find(“comment content”).text(); var txtHtml = “<div class=”comment”><h6>”+username+”:</h6><p class=’para’>”+ content+”</p></div>”; $("#res”).html(txtHtml);
(3rd) json格式（可數據重用）
var username = $(data). username; var content = $(data). content; var txtHtml = “<div class=”comment”><h6>”+username+”:</h6><p class=’para’>”+ content+”</p></div>”; $("#res”).html(txtHtml);
2) $.post()傳輸的數據不受限制，相對比較安全，結構和使用方法和$.get相同
4、 $.getScript()直接載入js文件
$.getScript(‘test.js’,【function(){}，可選】)
5、 $.getJSON()直接載入JSON文件
$. getJSON (‘test.json’,【function(data){}，可選】)
6、 $.each(【data】,【function(){}】)，遍歷的方法
7、 $.ajax(【只放一個參數，但是參數是可選的，參數是以key:value】)
//放多個參數，$.ajax({key:value, key:value, key:value})
8、 序列化元素
1) serialize() 能夠將元素內容序列化為字元串，表單、其他選擇器選取的元素都能用
$.get(url,$(“#forrm1”).serialize(),function(){}) $(“:checkbox,:radio”) .serialize()
2) serializeArray() 將DOM元素序列化後，返回JSON格式的數據，之後可以使用$.each()迭代輸出
fields = $(“:checkbox,:radio”) . serializeArray (); $.each(fields,function(I, field){ $(“#res”).append(field.value+”,”); });
3) $.param()
eg:
obj = {a:1,b:2}
k = $.param(obj)//a=1&b=2
9、 全局事件
1) ajaxStart和 ajaxStop
<div id=”loading”>載入中……</div> $(“#loading”).ajaxStart(function(){ $(this).show() }) $(“#loading”).ajaxStop (function(){ $(this).hide() })
2) ajaxCompele()//請求完成時執行
3) ajaxError()
4) ajaxSend()
5) ajaxSuccess()
6) global設置為false，讓某個ajax不受全局影響
$.ajax({global:false})
第七章
1、 驗證
1) 自定義驗證信息
(1) 在jQuery代碼中增加
errorELement:"em", success:function(lable){ //lable指向上面的em標簽 lable.text(" ").addClass("success"); }
(2) 在css中增加
em.error{ background: url(../img/exit.png) no-repeat 0px 0px; padding-left: 16px; } em.success{ background: url(../img/icon_success.png) no-repeat 0px 0px; padding-left: 16px; }
2) 自定義驗證方法
$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;
return this.optional(element)||(postcode.test(value));
},"請填寫正確的郵編");
2、 表單
1) ajaxForm()能接受0個或1個參數，單個參數可以是回調函數，也可以是options
2) ajaxSubmit()能接受0個或1個參數，單個參數可以是回調函數，也可以是options
var options = { target:’#out’//伺服器返回來的內容放在這個元素中 brforeSubmit:showRequest //提交前的回調函數 success:showResponse//提交後的回調函數 url: //預設是form的action，申明則覆蓋 type://預設是form的method，申明則覆蓋 dataType：null//伺服器返回來的類型，html、xml、json clearFrom：true//提交成功後清除所有表單的值 resetFrom：true//提交成功後重置所有表單的值 timeout：3000//限制請求時間，大於這個時間，跳出請求 } function showRequest(formData,jqForm,options){ var queryString = $.param(formData); //var formElement = jqForm[0];// jqForm封裝了表單的元素 //var address = formElement.address.value; return true; } function showResponse((responseText, statusText,xhr,$form){ // statusText【success/error】 }
3、 模擬視窗插件
1) 調用靜態視窗
(1) 法一：$(“#element-id”).modal();
(2) 法二：$(“#element-id”).modal({options});
$.modal(“<div><h1>XXXX</h1></div>”,{options});
2) 定義有樣式的靜態視窗：
(1) 通過外部的css,選項對象或者兩個一起來應用樣式，modal overlay、container、data元素的css選項分別是overlayCss、containerCss、dataCss，它們都是鍵值對屬性，
(2) 內部定義瞭如下的css樣式：simplemodal-overlay、simplemodal-container、simplemodal-data
4、 cookie
1) 寫入cookie：$.cookie(‘the_cookie’,’the_value’);
2) 讀取Cookie：$.cookie(‘the_cookie’);
3) 刪除cookie：$.cookie(‘the_cookie’,null);
4) 其他可選參數：
cookie：$.cookie(‘the_cookie’,’the_value’，{ expires:7,//有效期 path:’/’,//cookie的路徑屬性 domain:’jquery.com’,//cookie的功能變數名稱屬性 secure:true//如果設為true，那cookie的傳輸會要求一個安全協議，例如HTTPS });
5、 UI插件：分為交互、微件、效果庫
