同步(Synchoronous)： 一個任務在運行中時，不能進行其他的任務
異步(Asynchoronous)：在一個任務開啟時，可以開啟其他任務
| 同步應用場景 | 異步應用場景 |
|---|---|
| 網(wǎng)址訪問 | 用戶名驗證 |
| a標簽跳轉(zhuǎn) | 聊天室 |
| Submit表單提交 | 百度搜索詞條建議 |
var stu = { name:'Julay', age:20, sex:'nv'}Json(JavaScript Object Notation)是以JS對象的數(shù)據(jù)格式表示出來的字符串
Json 使用{}表示一個對象
Json 屬性名需要使用" "引起來
整體表示的是個字符串，最外層需要使用' '
//Json字符串var jsonStr = '{"name":"Tom","age":18}';//Json數(shù)組var JsonArr = '[ {"name":"julay","age":18}, {"name":"Tom","age":20}]';Json在Ajax中的應用:
服務器查詢數(shù)據(jù)庫返回的 result 為JS對象數(shù)組，響應傳輸給Ajax時被自動轉(zhuǎn)換成Json字符串。
Json字符串轉(zhuǎn)換成JS對象數(shù)組：var json_js = JSON.parse();
JS數(shù)組轉(zhuǎn)換成Json：JSON.stringify(js_arr);
JS對象轉(zhuǎn)換成Json：var json_str = JSON.stringify(js_obj);
轉(zhuǎn)換成JS對象數(shù)組后可以使用JavaScript的方法和屬性處理該對象
JSON_Ajax.js
//1.創(chuàng)建異步對象var xhr = new XMLHttpRequest();//2.綁定監(jiān)聽事件xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ //result保存的是json字符串 var result = xhr.responseText; //轉(zhuǎn)換js對象數(shù)組 var jschange = JSON.parse(); alert(jschange); }}//3.打開鏈接var url = "/test/getajax?uname=" uname.value "&upwd=" upwd.value;//拼接URL字符串xhr.oprn("get",url,true);//4.發(fā)送請求xhr.send();XML(eXtensible Markup Language)的標簽是沒有被預定義過，需要用戶自定義，其用途是傳遞數(shù)據(jù)。
XML文件的聲明：<?xml version="1.0" encoding="UTF-8"?>
所有標簽必須成對出現(xiàn)，無單標簽
嚴格區(qū)分大小寫
標簽允許嵌套
每個標簽允許自定義屬性，屬性值用" "包括
每個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標簽的內(nèi)容數(shù)組 var booklist = result.getElementsByTagName("booklist"); var name = books[1].getElementsByTagName("name")[0]; alert(name.innerHTML); }}xhr.open("get","books.xml",true);xhr.send();關(guān)鍵點：
獲取標簽數(shù)組 ：getElementsBayTagName( ) 返回的是類數(shù)組，不可用JavaScript自帶數(shù)組API
讀取標簽內(nèi)容：TagName.innerHTML
Ajax(Asynchoronous Javascript And Xml)是使用JavaScript提供的異步對象，來異步向服務器發(fā)送請求，并接受響應回來的數(shù)據(jù)。它可以無刷新的效果更改頁面的布局內(nèi)容。
創(chuàng)建異步對象
綁定監(jiān)聽事件（接受請求）
打開鏈接（創(chuàng)建請求）
發(fā)送請求
readyState屬性
| 狀態(tài)值 | 狀態(tài)的作用 |
|---|---|
| 0 | 請求未初始化 |
| 1 | 服務器已連接正在發(fā)送請求 |
| 2 | 接收響應頭 |
| 3 | 接收響應主體 |
| 4 | 響應數(shù)據(jù)接收成功 |
statu 服務器響應狀態(tài)碼屬性
onreadystatechange 監(jiān)聽狀態(tài)事件，當readyState改變自動激活
open( [method] , [url] , [isAsyn] ) 創(chuàng)建請求函數(shù)
send( [body] ) 發(fā)送請求函數(shù)
abort( ) 取消請求函數(shù)
getAllResponseHeader( ) 獲取所有響應頭信息
getResponseHeader( ) 獲取執(zhí)行響應頭信息
setRequestHeader( ) 設置請求的HTTP頭文件
GET請求方法的Ajax
//1.創(chuàng)建異步對象var xhr = new XMLHttpRequest();//2.綁定監(jiān)聽事件xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ //執(zhí)行相關(guān)操作的代碼 var result = xhr.responseText; alert(result); }}//3.打開鏈接var url = "/test/getajax?uname=" uname.value "&upwd=" upwd.value;//拼接URL字符串xhr.oprn("get",url,true);//4.發(fā)送請求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(){ //創(chuàng)異步對象 var xhr = new XMLHttpRequest(); //綁定監(jiān)聽事件 xhr.onreadystatechange = function(){ if (xhr.readyState == 4 && xhr.status == 200){ show.innerHTML = xhr.responseText; } } var url = "/app/query"; //打開鏈接，以post方式 xhr.open("post",url,true); //設置請求頭文件參數(shù) xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //拼接請求主體 var formdata = "uname=" uname.value; //發(fā)送帶有請求主體的請求 xhr.send(formdata); } </script></body></html> server.js
const express = require('express');//導入路由文件const querytxt = require('./routes/query.js');//創(chuàng)建服務器var server = express();//設置端口號server.listen(3000);//掛載靜態(tài)資源目錄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');//創(chuàng)建空路由var router = express.Router();//設置使用json解析 router.use(bodyParser.json());// 創(chuàng)建 application/x-www-form-urlencoded 編碼解析 router.use(bodyParser.urlencoded({extended:false}));//創(chuàng)建數(shù)據(jù)庫連接池var pool = mysql.createPool({ host:'127.0.0.1', port:'3306', user:'root', password:'741852', database:'tedu', connectionLimit:10});//post方法查詢數(shù)據(jù)庫名稱路由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;優(yōu)化的Ajax的代碼查看 JavaScript DOM技術(shù)專欄 第7篇文章
