同步(Synchoronous)： 一個任務在運行中時，不能進行其他的任務
異步(Asynchoronous)：在一個任務開啟時，可以開啟其他任務
| 同步應用場景 | 異步應用場景 |
|---|---|
| 網址訪問 | 用戶名驗證 |
| a標簽跳轉 | 聊天室 |
| Submit表單提交 | 百度搜索詞條建議 |
var stu = { name:'Julay', age:20, sex:'nv'}Json(JavaScript Object Notation)是以JS對象的數據格式表示出來的字符串
Json 使用{}表示一個對象
Json 屬性名需要使用" "引起來
整體表示的是個字符串，最外層需要使用' '
//Json字符串var jsonStr = '{"name":"Tom","age":18}';//Json數組var JsonArr = '[ {"name":"julay","age":18}, {"name":"Tom","age":20}]';Json在Ajax中的應用:
服務器查詢數據庫返回的 result 為JS對象數組，響應傳輸給Ajax時被自動轉換成Json字符串。
Json字符串轉換成JS對象數組：var json_js = JSON.parse();
JS數組轉換成Json：JSON.stringify(js_arr);
JS對象轉換成Json：var json_str = JSON.stringify(js_obj);
轉換成JS對象數組后可以使用JavaScript的方法和屬性處理該對象
JSON_Ajax.js
//1.創建異步對象var xhr = new XMLHttpRequest();//2.綁定監聽事件xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ //result保存的是json字符串 var result = xhr.responseText; //轉換js對象數組 var jschange = JSON.parse(); alert(jschange); }}//3.打開鏈接var url = "/test/getajax?uname=" uname.value "&upwd=" upwd.value;//拼接URL字符串xhr.oprn("get",url,true);//4.發送請求xhr.send();XML(eXtensible Markup Language)的標簽是沒有被預定義過，需要用戶自定義，其用途是傳遞數據。
XML文件的聲明：<?xml version="1.0" encoding="UTF-8"?>
所有標簽必須成對出現，無單標簽
嚴格區分大小寫
標簽允許嵌套
每個標簽允許自定義屬性，屬性值用" "包括
每個XML文檔有且只有一個根元素
book.xml
<?xml version="1.0"? encoding="utf-8"><books><booklist> <name>《時間簡史》</name> <author>霍金</author></booklist><booklist> <name>《三國演義》</name> <author>羅貫中</author></booklist><booklist> <name>《紅樓夢》</name> <author>曹雪芹</author></booklist></books>XML_Ajax.js
var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){ if(xhr.readyState == 4&&xhr.state == 200){ //books相當于XML里根目錄的books標簽,以下同理 var books = xhr.responseXML; //得到booklist標簽的內容數組 var booklist = result.getElementsByTagName("booklist"); var name = books[1].getElementsByTagName("name")[0]; alert(name.innerHTML); }}xhr.open("get","books.xml",true);xhr.send();關鍵點：
獲取標簽數組 ：getElementsBayTagName( ) 返回的是類數組，不可用JavaScript自帶數組API
讀取標簽內容：TagName.innerHTML
Ajax(Asynchoronous Javascript And Xml)是使用JavaScript提供的異步對象，來異步向服務器發送請求，并接受響應回來的數據。它可以無刷新的效果更改頁面的布局內容。
創建異步對象
綁定監聽事件（接受請求）
打開鏈接（創建請求）
發送請求
readyState屬性
| 狀態值 | 狀態的作用 |
|---|---|
| 0 | 請求未初始化 |
| 1 | 服務器已連接正在發送請求 |
| 2 | 接收響應頭 |
| 3 | 接收響應主體 |
| 4 | 響應數據接收成功 |
statu 服務器響應狀態碼屬性
onreadystatechange 監聽狀態事件，當readyState改變自動激活
open( [method] , [url] , [isAsyn] ) 創建請求函數
send( [body] ) 發送請求函數
abort( ) 取消請求函數
getAllResponseHeader( ) 獲取所有響應頭信息
getResponseHeader( ) 獲取執行響應頭信息
setRequestHeader( ) 設置請求的HTTP頭文件
GET請求方法的Ajax
//1.創建異步對象var xhr = new XMLHttpRequest();//2.綁定監聽事件xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ //執行相關操作的代碼 var result = xhr.responseText; alert(result); }}//3.打開鏈接var url = "/test/getajax?uname=" uname.value "&upwd=" upwd.value;//拼接URL字符串xhr.oprn("get",url,true);//4.發送請求xhr.send();POST請求方法的Ajax
postuser.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PostUser</title></head><body> <input type="text" id="uname" name="uname"> <input type="submit" value="查詢" onclick="query()"> <div id = "show"></div> <script> var show = document.getElementById("show"); function query(){ //創異步對象 var xhr = new XMLHttpRequest(); //綁定監聽事件 xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200){ show.innerHTML = xhr.responseText; } } var url = "/app/query"; //打開鏈接，以post方式 xhr.open("post",url,true); //設置請求頭文件參數 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //拼接請求主體 var formdata = "uname=" uname.value; //發送帶有請求主體的請求 xhr.send(formdata); } </script></body></html> server.js
const express = require('express');//導入路由文件const querytxt = require('./routes/query.js');//創建服務器var server = express();//設置端口號server.listen(3000);//掛載靜態資源目錄server.use(express.static('./public'));//掛載/query 路由server.use('/app',querytxt);// '/query'query.js
const express = require('express');//導入mysql模塊const mysql = require('mysql');//導入請求主體處理模塊const bodyParser = require('body-parser');//創建空路由var router = express.Router();//設置使用json解析 router.use(bodyParser.json());// 創建 application/x-www-form-urlencoded 編碼解析 router.use(bodyParser.urlencoded({extended:false}));//創建數據庫連接池var pool = mysql.createPool({ host:'127.0.0.1', port:'3306', user:'root', password:'741852', database:'tedu', connectionLimit:10});//post方法查詢數據庫名稱路由router.post('/query',(req,res)=>{ var $uname = req.body.uname; var sql = "select uname from login where uname=?"; pool.query(sql,[$uname],(err,result)=>{ if(err) throw err; if(result.length > 0){ res.send("用戶存在"); }else{ res.send("用戶不存在"); } });});//導出路由module.exports = router;優化的Ajax的代碼查看 JavaScript DOM技術專欄 第7篇文章
