創建一個learnDemo
首先 先開啓一個小型服務器
node.js環境下執行：
http-server
創建：ajax.html.
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript">
window.onload = function (){
var bBtn = document.getElementById("btn");
}
</script>
</head>
<body>
<button type="button" value="Hello-Button" id="btn">Hello-Button</button>
</body>
</html>
準備一個靜態文件 hello.txt裏面輸入一些內容保存。
可以通過地址 http://localhost:8080/hello.txt 直接訪問hello.txt文件的內容
如圖：
現在不用瀏覽器獲取內容，用ajax獲取hello.txt文件裏的內容
通過點擊按鈕的時候獲取：
oBtn.onclick = function () {
var xhr = new XMLHttpRequest(); // 打開瀏覽器
xhr.open('get','hello.txt',true); //在地址欄輸入地址
xhr.send();// 提交
xhr.onreadystatechange = function () {// 等待服務器返回內容
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
點擊按鈕，發現控制檯打印出hello.txt的內容
想通過ajax完成一個數據交互工作，首先要先創建一個ajax對象，對象名稱就是：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 ,ActiveXObject只是一個插件
var xmlhttp;
if (window.XMLHttpRequest)。//不要漏掉window
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
下面說說try catch 話不多說看代碼：
try{
// 代碼嘗試執行這塊中的內容，如果有錯誤，則會執行catch，並且會傳入錯誤信息參數
}catch(e){}
如果不用try catch 調用不存在的變量，會報錯，而且影響後續代碼的執行
創建對象也可以用下面方式
try{
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
open方法
參數：
1，打開方式
2，地址
3，是否異步
異步：非阻塞模式，前面的代碼不會影響後面代碼的執行。true異步
同步：阻塞模式 前面的代碼會影響後面代碼的執行。false 同步
首先了解一下表單：數據的提交
action : 數據提交的地址,默認是當前頁面
method：數據提交的方式，默認是get 方式
1. get // 把數據名稱和數據值用=連接，如果有多個的話，那麼它會把多個數據組合用&進行連接，然後把數據放到url？後面傳到指定頁面
url長度限制，不要通過get方式傳遞過多的數據
2,post
理論上沒有限制，
enctype :數據的格式，默認：application/x-www.form-urlencoded
後續的代碼需要用到前面的內容時，用false，（很少用同步）
返回的內容
readyState :Ajax 工作狀態
responseText:ajax請求返回的內容被存放到這個屬性下面
onreadystatechange:當ready state改變的時候觸發
status:服務器狀態http 狀態碼。
send(要發送的數據post和get區別)：發送請求
-
-
-
- 中文編碼get亂碼 （encodeURI）post 中文沒問題
- 緩存get (後面連接一個隨機數，時間戳) post 沒有緩存文字
- POST：setRequestHeader(類型, 內容)：設置請求頭（表單有默認值application/x-www-form-urlencoded）post 必須設置請求頭
// post 方式，數據放在send（）裏面作爲參數傳遞 - "Content-Type","application/x-www-form-urlencoded”
-
-