Ajax基礎
1、什麼是服務器
- 網頁瀏覽過程分析
- 如何配置自己的服務器程序（wamp）(已配置，lamp WampServer軟件 )
2、什麼是Ajax （AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。）
- 無刷新數據讀取
- 用途：用戶登陸、股票基金網
- 異步、同步
3、使用Ajax
- 基礎：請求並顯示靜態TXT文件
- 字符集編碼 （UTF-8 和 gb2312）
- 緩存、阻止緩存（阻止緩存的意思是隨時讓緩存改變） （url等於'aaa.txt?t='+new Date().getTime() 就是讓url隨時改變，緩存中的文件隨時變就能達到了==阻止緩存 ）
- 動態數據：請求JS（或json）文件
- eval的使用（用這個得到的是數組，不用這個得到的字符串） （用於數組和json ）
- DOM創建元素 （document.crateElement）
- 局部刷新：請求並顯示部分網頁文件
4、HTTP請求方法
- GET——用於獲取數據（如：瀏覽帖子）
- POST——用於上傳數據（如：用戶註冊）
- GET、POST的區別
- get是在url裏傳數據：安全性、容量
- 緩存
- post較安全，容量較大
------------------------------------------------------------------------------------------------------------------
1、什麼是服務器：能提供一定服務的特殊電腦。ftp、svn、web
- 網頁瀏覽過程分析：在瀏覽器發出請求 》》 到服務器讀取 》》 返回數據 》》 下載到本地瀏覽器看到（所以第二次瀏覽的時間比第二次快）
- 如何配置自己的服務器程序（wamp）
安裝一個wamp集成環境，因爲Ajax是讀取服務器上面的信息的（所以必須安裝服務器），所以我們接下來的頁面需要保存到www目錄下：比如我創建一個文件aa.html放到該目錄下。我可以通過瀏覽器輸入下面的信息找到這個文件：
- http://loclhost/aa.html
- 127.0.0.1/aa.html
2、什麼是Ajax：AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
- 無刷新數據讀取
- 用戶登陸、股票基金網
- 異步、同步
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。
用途如下：
百度搜索提示：只要打關鍵字，就有相關提示。
登陸：（輸入錯誤會有提示）
股票信息：（曲線隨時動）
傳統的開發模式和ajax開發模式比較：畫圖講解
傳統的開發模式：用戶的每一次操作都觸發一次返回服務器的HTTP請求，服務器做出處理後，返回一個html頁面給用戶。（會把整個頁面返回來）
ajax開發模式：頁面將用戶的操作通過ajax引擎與服務器進行通信，將返回的結果給ajax引擎，然後ajax將數據插入指定位置。
3、ajax基礎：先會用，再自己編寫
XMLHttpRequest 對象
所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建 XMLHttpRequest 對象
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法：
variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
variable=new ActiveXObject("Microsoft.XMLHTTP");兼容性寫法：
爲了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：
var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }4、使用ajax：先會用，再自己編寫
- 基礎：請求並顯示靜態TXT文件
- 字符集編碼
- 緩存、阻止緩存
- 動態數據：請求JS（或json）文件
- eval的使用
- DOM創建元素
- 局部刷新：請求並顯示部分網頁文件
爲了更好的理解ajax。我們先學會怎麼使用，再編寫自己的ajax。準備下面的文件放到服務器裏面：
- ajax.js文件（函數已經寫好）
- 一個文件a.txt （隨便寫些東西）
- 狀態碼：
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
- 200 ：表示找到頁面
- 404 ： 表示沒有找到該頁面
封裝好的ajax js文件代碼如下：ajax.js
function ajax(url, fnSucc, fnFaild){ //1.創建Ajax對象 if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest(); } else { var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務器（打開和服務器的連接） oAjax.open('GET', url, true); //3.發送 oAjax.send(); //4.接收 oAjax.onreadystatechange=function () { if(oAjax.readyState==4) { if(oAjax.status==200) { //alert('成功了：'+oAjax.responseText); fnSucc(oAjax.responseText); } else { //alert('失敗了'); if(fnFaild) { fnFaild(); } } } };}ajax(url,
fnSucc,
fnFaild)函數參數介紹：
- url：讀取文件的路徑，可以寫相對路徑或絕對路徑（服務器上面的文件名都不能用中文命名）
- fnSucc:成功返回信息
- fnFaild：失敗返回信息
可以隨便寫東西：a.txt
這是文件內容
我們再寫一個文件讀取a.txt的內容：去看看ajax.js裏面的函數參數，大概理解一下
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>無標題文檔</title><script src="ajax.js"></script><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('aaa.txt', function (str){ alert(str); //成功時的信息 }, function (){ alert('失敗'); //失敗的信息 }); };};</script></head> <body><input id="btn1" type="button" value="讀取" /></body></html>如果a.txt裏面有中文，會出問題嗎？記得要保證文件編碼統一：utf-8
阻止緩存方法：緩存是根據URL來存儲的。只要url在變，就可以了。在路徑那裏加上get數據。getTime()是毫秒數
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>無標題文檔</title><script src="ajax.js"></script><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('aaa.txt?t='+new Date().getTime(), function (str){ alert(str); }, function (){ alert('失敗'); }); };};</script></head> <body><input id="btn1" type="button" value="讀取" /></body></html>上面是獲取txt裏面內容的，如果想獲取數組和json的內容。方法如下：ajax讀取的到的都是字符串，要用函數even()
[1,2,3,4,5,6,7]讀取數組：
<script src="ajax.js"></script>
<script>window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('arr.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); alert(arr[3]); }, function (){ alert('失敗'); }); };};</script>讀取json：
[{a: 5, b: 7}, {a: 8, b: 12}]<script src="ajax.js"></script><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('arr2.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); alert(arr[0].a); }, function (){ alert('失敗'); }); };};</script>讀取的json放大ul裏面：（動態創建）
[{user: 'blue', pass: '123456'},{user: '張三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>無標題文檔</title><script src="ajax.js"></script><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { ajax('data.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); for(var i=0;i<arr.length;i++) { var oLi=document.createElement('li'); oLi.innerHTML='用戶名：<strong>'+arr[i].user+'</strong>密碼：<span>'+arr[i].pass+'</span>'; oUl.appendChild(oLi); } }, function (){ alert('失敗'); }); };};</script></head> <body><input id="btn1" type="button" value="讀取" /><ul id="ul1"></ul></body></html>5、HTTP請求方法
- GET——用於獲取數據（如：瀏覽帖子）：不安全，放到url裏面傳遞信息（會把輸入的信息顯示在url中），通過網址傳遞，容易出錯，因爲有大小限制：4-10k,有緩存
- POST——用於上傳數據（如：用戶註冊）：稍微安全一些，不通過網址url，可以傳大文件，2G，沒有緩存
- GET、POST的區別
- get是在url裏傳數據：安全性、容量
- 緩存
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>無標題文檔</title></head> <body><form action="http://www.baidu.com/" method="post"> 用戶名:<input type="text" name="username" /><br> 密碼：<input type="password" name="password" /><br> <input type="submit" /></form></body></html>
