Ajax進行中。。

03-04

來自度娘：

Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種創建互動式網頁應用的網頁開發技術。

Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。

Ajax 是一種用於創建快速動態網頁的技術。

Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術

通過在後台與伺服器進行少量數據交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

個人理解：

傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。(同步)

ajax是實現瀏覽器和伺服器的通信的方式（非同步的）

所以需要伺服器，可以在電腦虛擬一個伺服器：

這裡需要用到nodejs，如果安裝了php或者python，也ok，因為他們自帶了http-server。

http-server是一個簡單的零配置命令行http伺服器,他對於生產使用來說足夠強大，他是簡單和可刪節足以用於測試，足夠簡單易用，而且可用於本地開發

1、首先你要安裝node 先下載

Node.js

選擇符合系統的版本，一直點下一步就ok

2、然後可以通過npm來全局安裝

先確認是否安裝好 npm -v

安裝server --global 安裝到電腦全局即安裝本地虛擬伺服器

然後再文件目錄下按shift+右鍵打開命令行輸入 http-server 啟動伺服器

給出了兩個地址，兩個都可以，第一個是本地，第二個是本機所在的區域網。

#bug 遇到404問題是因為沒有網頁圖標，在頁面中給個圖標就ok

#瀏覽器有跨域請求的安全限制，所以用本地文件打開的，無法用到ajax

cdn可以是因為人家在服務端允許我們調用他們的公共資源

頁面打開後說明連接成功，就ok了。

下面實現一個小效果：

點擊按鈕，出現卡片

再點一次，卡片消失

為加快下載速度，卡片只需要載入一次

1.在index.html加入jquery的鏈接，cdn或者下載到本地，用min. 即壓縮版的，內容不變但載入更快，在其後加上效果的js文件，因為要載入完jquery，才能使用它裡面的對象和方法。

//主頁面，排版我就盡量簡單一點

<body> <h1>Yo.</h1> <div id="trigger" stylex="background: #bbb;width: 100px;height: 50px;text-align: center;font-size:25px;line-height: 50px;">關於ajax</div> <div stylex="display: none;" id="card"></div></body>

//選擇頁面中的按鈕

//選擇卡片

//記錄是否發送請求的狀態 var loaded

//底下這裡監聽事件：當按鈕點擊時執行出現卡片；否則卡片不可見的，並判斷有沒有載入過card1.html，沒有則載入否則直接隱藏.

//這裡用到判斷狀態，slideUp()和slideDown()，就不需要用card.toggle()

//card.toggle();//切換show(）和hide( )

var trigger = $("#trigger");var card = $("#card");var loaded=false;trigger.click(function(){ event.preventDefault(); //非同步請求 //只載入一次通過狀態來判斷 console.log(loaded); if (card.is(:visible)) { card.slideUp(); } else { if (!loaded) { card.load("./card1.html"); loaded=true; } card.slideDown(); console.log(loaded); }});

看頁面效果，右擊打開檢查，點開network，查看載入了哪些文件

點擊後

打開XHR ,無論點擊多少次，card1.html都只載入一次

ajax基本入門到此。

接下來就可以通過ajax做更完善的web項目，後續會繼續更新。