編寫 Ajax · JavaScript學習記錄

### 編寫 Ajax - 創建 Ajax 對象 - `ActiveXObject("Microsoft.XMLHTTP)` - `XMLHttpRequest()` - 筆記：變量是 `Window` 的屬性 - 使用未定義的變量 —— 報錯 - 使用未定義的屬性 —— `undefined` - 用 `window.XMLHttpRequest` 返回真則是 chrome FF IE7， - 用 `window.ActiveXObject("Microsoft.XMLHTTP")` 返回真則是 IE6 - 連接服務器 - `open(方法，文件名，異步傳輸)` - *method*：請求的類型；`GET` 或 `POST` ，**必須大寫** - *url*：文件在服務器上的位置，GET 請求要避免緩存，請向 URL 添加一個唯一的 ID - *async*：true（異步）或 false（同步） - 發送請求 - `send()` - *string*：僅用于 POST 請求 - 接收返回值 - 請求狀態監控 - `onreadystatechange` 事件 - `readyState` 屬性：請求狀態 - `0: 未初始化 ` 還沒有調用 `open()` 方法 - `1: 開始載入 ` 已調用 `send()` 方法，正在發送請求 - `2: 載入完成 ` `send()` 發送完成，已收到全部響應內容 - `3: 解析 ` 正在解析響應內容 - `4: 完成` 響應內容解析完成，可以在客戶端調用了 - `status` 屬性( http 狀態碼)：請求結果，`200: 成功` - `responseText` 獲得字符串形式的響應數據 ```js document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ``` > ## POST 請求 > > 一個簡單 POST 請求： > > 實例 > > ```js > xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send(); > ``` > > 如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據： > > 實例 > > ```js > xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); > ``` > > | 方法 | 描述 | > | :------------------------------- | :----------------------------------------------------------- | > | setRequestHeader(*header,value*) | 向請求添加 HTTP 頭。 *header*: 規定頭的名稱 *value*: 規定頭的值 | - 代碼： ```HTML <html> <head> <script type="text/javascript"> function Ajax(url, suc, err) { var oAjax = ''; if (window.XMLHttpRequest) { // chrome FF IE9 oAjax = new XMLHttpRequest; } else if (window.ActiveXObject) { oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } if (oAjax != '') { oAjax.onreadystatechange = state_change; oAjax.open('get', url, true); oAjax.send(); } else { err(); } function state_change() { if (oAjax.readyState === 4) { // 完成 if (oAjax.status === 200) { // 成功 if (suc) { suc(oAjax.responseText); } else { return oAjax.responseText; } } else if (oAjax.status === 404){ console.log('url錯誤或不存在'); } else if (err){ err(); } } else if (oAjax.readyState === 0){ console.log('未初始化'); } else if (oAjax.readyState === 1){ console.log('正在發送請求'); } else if (oAjax.readyState === 2){ console.log('處理請求中'); } else if (oAjax.readyState === 3){ console.log('正在解析'); } } } window.onload = function () { var btn = document.getElementById('btn'); btn.onclick = function () { Ajax('/api/blog/list', function (str) { // 使用返回數據 console.log('成功') document.getElementById('T1').innerHTML = str; }) } } </script> </head> <body> <div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br /> <button id="btn">Click</button> </body> </html> ```