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