一.簡易DOM操作
- 爲什麼使用DOM
使用ajax就不用form提交請求，form提交請求，控件必須有name屬性，提交的時候form自動收集數據，並提交。不適用form就需要手寫DOM，收集數據。使用DOM，用id屬性，對於單選按鈕和多選按鈕，需要name屬性來分組 - 寫DOM的步驟
（先激活事件，調用js方法）
①得到要操作的元素對象（找元素）
②使用對象，調用方法和屬性（對象.方法() 或 對象.屬性） - 具體代碼操作
- 獲取標籤對象
let obj=document.getElementById("id");
ES6規定，可以直接使用標籤的id值來代表標籤對象
但是要注意id和變量名的衝突問題
通常解決方法：let _uname=uname.value;或let $uname=uname.value;保留語義的同時，定義變量名 - 使用對象調用屬性
- input元素
id.value - 雙標籤元素
id.innerHTML
- input元素
- 獲取標籤對象
- 關於innerHTML的進階詳解
可以使用innerHTML改變頁面 - 事件
事件：通過用戶的某種操作，激發的行爲
onclick=""用戶點擊元素，激活事件，調用js方法
<body onload="show()">頁面加載就激活事件，用戶刷新頁面就能激活
獲取焦點事件onfocus="show_uname()"
失去焦點事件onblur="check_upwd()"
練習：03_ex.html。用戶名、密碼和密碼確認的input，登錄按鈕
要求，
用戶名獲取焦點，提示長度範圍612位，用戶名失去焦點，做非空驗證，做格式驗證612位；
密碼獲取焦點，提示長度範圍816位，密碼失去焦點，做非空驗證，做格式驗證816位；
密碼確認獲取焦點，提示，請在輸入一次密碼，密碼確認，驗證兩次密碼是否輸入一直。
提高：在3個input都正確的情況下，才能點擊登錄按鈕，彈窗登錄成功，有一個input不符合要求，點擊登錄按鈕，彈窗不能登錄
二.Ajax
- 同步Synchronous
在一個任務進行的過程中，不能開啓其他任務
同步訪問：瀏覽器在想服務器發送請求是，瀏覽器只能等待服務器的響應，不能做其他的事
出現的場合：form是同步訪問- 瀏覽器地址輸入
url訪問 - a標籤跳轉
- 異步Asynchronous
在一個任務開啓時，可以執行其他任務
異步的訪問：瀏覽器在向向服務器發送請求的時候，用戶可以在頁面上進行其他操作
出現的場合：- 用戶名重複驗證
- 股票軟件
- 百度搜索，聯想建議
- 什麼是ajax
Asynchronous JavaScript and XML
異步的，js，xml（目前更多人用json）
ajax的原理：使用js提供的異步對象(XMLHttpRequest)，異步的向服務器發送請求，並接受響應回來的數據 - ajax使用步驟(通常步驟爲1,4,2,3)
瀏覽器，地址欄訪問，使用的是get請求，所以只能訪問get的請求- 創建異步對象（小黃人騎着小毛驢）
var xhr=new XMLHttpRequest(); - 創建請求(打開鏈接)
xhr.open("methor","url",isAsy);
method：請求方法
url：請求的接口
isAsy：是否使用異步的方式發送請求，true使用異步，false不使用異步 - 發送請求
xhr.send(formdata);
formdata：請求帶請求主體，就要填寫formdata參數；請求不帶請求主體，括號中可以不填，也可以填null - 接收響應（打開監聽）
xhr.onreadystatechange=function (){ }
每一次監聽到目標，就調用一次function
監聽目標是誰？：xhr.readyState
xhr.readyState表示xhr對象的5個狀態：0：請求尚未初始化；1：打開鏈接，請求正在發送；2：接收響應頭信息；3：正在響應主體；4：響應主體接收完畢。
xhr.readyState的值每改變一次，function就執行一次，一共執行4次xhr.onreadystatechange=function(){ //要readyState的第四次，同時響應還是正確的 if(xhr.readyState==4 && xhr.status==200){ //接收響應 var r=xhr.responseText; console.log(r); } }
練習：編寫02_ajax.html 點擊按鈕訪問上一個練習的接口。把響應的數據放到div中顯示。
- ajax訪問原生http的get，並且傳遞參數
xhr.open("get","url?"+參數,true);
練習：創建接口/http_login
接口獲取前臺uname,upwd
非空驗證
查詢數據庫，如果查到，返回響應1，如果沒查到，返回響應0
前臺04——http_login.html：文本框，密碼框，按鈕，div
點擊按鈕，登錄，發送請求給http_login。div中顯示登錄成功、登錄失敗
- 創建異步對象（小黃人騎着小毛驢）
目前常見錯誤總結
Uncaught SyntaxError:Invalid or unexpected token
出乎意料的標點符號(寫成中文符號，或者符號缺失)Uncaught SyntaxError:Unexpected end of input
缺少結束的符號，就是方法沒封口Access to XMLHttpRequest at 'http://127.0.0.1:8080/ajax/ajaxdemo' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域錯誤- 不報錯，沒效果，怎麼辦
每節行代碼都打樁測試！