9月5號-總結-Ajax應用和Jquery介紹

Ajax 技術進階實現

Ajax 關鍵代碼的封裝

第一步:封裝AJax Get請求，關鍵代碼分析以下：

function doAjaxGet(url,params,callback){ //1.建立XmlHttpRequest對象  var xhr=new XMLHttpRequest(); //2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程(例如鏈接是否創建，請求是否在處理，響應是否已產生) xhr.onreadystatechange=function(){//callback(回調函數)  //基於xhr對象獲取的通信狀態，對響應數據進行處理

 //readyState狀態說明

 //0：未初始化，還沒有調用open() 方法

 //1：啓動。已經調用open() 方法，但還沒有調用send() 方法

 //2：發送。已經調用send() 方法，但還沒有接收到響應

 //3：接收。已經接收到部分響應

 //4：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了

 if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了  //服務端響應的結果會傳遞給XHR對象，咱們能夠藉助responseText獲取響應結果 callback(xhr.responseText);  
         }  
     } //3.建立與服務端的鏈接 xhr.open("GET",url+"?"+params,true);//true表示異步  //4.發送請求 xhr.send(null); //Get請求，send方法不傳內容  //5.對響應結果進行處理(在回調函數中處理)。  
}

第二步:封裝AJax Post請求，關鍵代碼分析以下：

function doAjaxPost(url,params,callback){ //1.建立XmlHttpRequest對象 var xhr=new XMLHttpRequest(); //2.設置狀態監聽，監聽XmlHttpRequest對象與服務端通信的過程. xhr.onreadystatechange=function(){//callback(回調函數)  //基於xhr對象獲取的通信狀態，對響應數據進行處理  if(xhr.readyState==4&&xhr.status==200){//500表示服務端出錯了  //服務端響應的結果會傳遞給XHR對象，  //咱們能夠藉助xhr.responseText獲取響應結果 callback(xhr.responseText);  
                 }  
         } //3.建立與服務端的鏈接 xhr.open("POST",url,true);//true表示異步 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //4.發送請求 xhr.send(params); //post請求將參數寫到send方法  //5.對響應結果進行處理(在回調函數中處理)。  
}

第三步:在業務方法中應用封裝好的代碼,例如:

保存業務的關鍵客戶端代碼分析及實現.

function doSave(){ //1.定義請求url var url="doSave"; //2.定義請求參數 var params="name="+document.forms[0].name.value; //3.發送異步的post請求 doAjaxPost(url,params,function(result){  
                   document.getElementById("result").innerHTML=result;  
           })  
    }

檢查名字是否存在的關鍵客戶端代碼實現

function doCheck(){//在此函數中向服務端發起異步請求,檢測name是否存在  //1.定義請求url var url="doCheck"; //2.定義請求參數 var name=document.forms[0].name.value;  
        var params="name="+name; //3.發送異步Get請求 doAjaxGet(url,params,function(result){  
                document.getElementById("result").innerHTML=result;  
        })  
    }

Ajax 編程框架基本實現(瞭解)

咱們在實際的js編程中常常會以面向對象的方式進行實現，例如2.3章節中doAjaxGet函數如何以對象方法進行應用呢？關鍵代碼分析以下：

(function(){ //定義一個函數，能夠將其鏈接爲java中的類 var ajax=function(){} //在變量ajax指向的類中添加成員，例如doAjaxGet函數，doAjaxPost函數 ajax.prototype={  
           doAjaxGet:function(url,params,callback){ //建立XMLHttpRequest對象，基於此對象發送請求 var xhr=new XMLHttpRequest(); //設置狀態監聽(監聽客戶端與服務端通信的狀態) xhr.onreadystatechange=function(){//回調函數，事件處理函數  if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }  
                      }; //創建鏈接(請求方式爲Get,請求url,異步仍是同步-true表示異步) xhr.open("GET",url+"?"+params,true); //發送請求 xhr.send(null);//GET請求send方法不寫內容 },  
  
              doAjaxPost:function(url,params,callback){ //建立XMLHttpRequest對象，基於此對象發送請求 var xhr=new XMLHttpRequest(); //設置狀態監聽(監聽客戶端與服務端通信的狀態) xhr.onreadystatechange=function(){//回調函數，事件處理函數  if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr }  
                      }; //創建鏈接(請求方式爲POST,請求url,異步仍是同步-true表示異步) xhr.open("POST",url,true); //post請求傳參時必須設置此請求頭 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //發送請求 xhr.send(params);//post請求send方法中傳遞參數 }  
        }  
        window.Ajax=new ajax();  
})()

Ajax 技術在Jquery中應用

Jquery 簡介

jQuery是一個快速、簡潔的JavaScript框架，是一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

get函數應用,代碼以下

//向服務端發送Ajax Get 請求 function doGet(){ //1.定義請求的url var url="doAjaxGet"; //2.定義請求的參數 var params="msg=hello jquery ajax get"; //3.發送異步Get請求  //這裏的$符號爲jQuery中的一個對象  //get(url[,params][,callback][,dataType])爲jquery中的一個ajax函數 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result);  
             },"text");//在這個函數中你看到ajax的代碼了嗎? }

post函數應用,代碼以下

//向服務端發送Ajax Post 請求 function doPost(){ //1.定義請求的url var url="doAjaxPost"; //2.定義請求的參數 var params="msg=hello jquery ajax Post"; //3.發送異步POST請求  //這裏的$符號爲jQuery中的一個對象  //post(url[,params][,callback][,dataType])爲jquery中的一個ajax函數 $.post(url,params,function(result){//post請求通常用於向服務端提交數據 $("#result").html(result);  
             });//在這個函數中你看到ajax的代碼了嗎? }

ajax函數應用

//向服務端發送Ajax Post 請求 function doAjax(){ //1.定義請求的url var url="doAjaxGet"; //2.定義請求的參數 var params="msg=hello jquery ajax request"; //3.發送異步Get請求  //這裏的$符號爲jQuery中的一個對象 $.ajax({  
                     type:"GET",//表示get請求(默認爲get),省略不寫爲Get url:url,//":"左邊的內容爲語法定義,咱們不能修改.":"右邊爲咱們本身定義 data:params,//請求參數 async:true,//true表示異步 success:function(result){ //回調函數 $("#result").html(result);  
                     }  
             });//在這個函數中你看到ajax的代碼了嗎? }

load函數應用

function doLoad(){ //1.定義請求的url var url="doAjaxGet"; //2.定義請求的參數 var params="msg=hello jquery ajax request"; //3.發送異步Get請求  //在指定位置異步加載url對象的資源,  //在當前應用中表示把url對象的資源呈現到#result位置.  //$("#result").load(url,params,function(){//回調函數,資源加載完成執行此函數  //  console.log("load complete");  //}); $("#result").load(url);//假如不向服務端傳值,不須要處理load完之後的結果,還能夠這樣寫 }