Ajax在實戰中的應用

1.什麼是Ajax？

Ajax是一種Web技術，利用客戶端腳本(javascript)與服務器端進行的異步交互，實現頁面的局部刷新。

同步交互:客戶端與服務端經過HTTP協議，實現Request(請求)與Response(響應)的成對出現。

異步交互:在客戶端與服務端中間存在一個ajax引擎，客戶端在向服務端發送請求的同時，客戶端委託給ajax,能夠有多個Ajax請求發向服務端發送請求。

2.Ajax的優點

經過異步交互，實現頁面的局部刷新。

一面牆上有一個污點，咱們是刷新整面牆效率高仍是針對某個位置局部粉刷效率高。可想而知，ajax極大的提升了數據的效應數據。

視圖頁面加載是很快的，可是數據的加載是比較慢的。經過ajax技術，增長ajax請求的個數，這樣在服務器和瀏覽器之間交換的數據大量減小，服務器響應的速度就更快了。

3.Ajax的用法

3.1 原生用法

全部的Ajax 請求都會基於DOM(HTML元素)事件，經過XHR（XMLHttpRequest）對象實現與服務端異步通信局部更新

第一步：基於dom事件建立XHR對象(XMLHttpRequest對象)

第二步：註冊XHR對象狀態監聽，經過回調函數(callback)處理狀態信息。

第三步：建立與服務端的鏈接

第四步：發送異步請求實現與服務端的通信

//Ajax方式的請求
 function doAjaxGet(){
    //1.建立XHR對象 
    var xhr=new XMLHttpRequest(); 
    //2.設置狀態監聽(將服務端響應的結果更新到ajaxResultId位置) 
    xhr.onreadystatechange=function(){  
       if(xhr.readyState==4&&xhr.status==200){
         console.log(xhr.responseText);
         document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
       }
    };
     //3.創建鏈接         
     xhr.open("GET","http://localhost/doGet",**true**);
     //true表示異步(底層會啓動線程與服務端通信)  
     //4.發送請求 
     xhr.send();

}

這種原始方式，重複代碼過多，極大的下降了咱們的開發效率。接下來咱們使用框架，框架會提取共性而後進行封裝，留出特性接口方便咱們使用。

3.2經過jQuery框架使用Ajax

jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情

get函數應用,代碼以下

//向服務端發送Ajax Get 請求 
function **doGet**(){ 
    //1.定義請求的url 
    var url="doAjaxGet"; 
    //2.定義請求的參數 
    var params="msg=hello jquery ajax get"; 
    //3.發送異步Get請求  
    $.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完之後的結果,還能夠這樣寫 
}

4.AJax總結

$.get(url,params,function(result){}
$.post(url,params,function(result){}
$.ajax() //重點
$("#result").load(url,params,function(){}

咱們關心的是客戶端向服務端發送的url,客戶端向服務端發送的請求參數params,服務器的響應數據resulst結果集。一個原則，寫的更少，乾的更多。框架封裝了共性，咱們寫特性的部分。