apache簡介
首先認(rèn)識(shí)一下URL
URL 就是網(wǎng)頁的地址
圖片1.png
ajax交互策略：
圖片2.png
同時(shí)ajax可進(jìn)行異步交互
同步交互：提交請(qǐng)求--》等待服務(wù)器處理--》服務(wù)器返回?cái)?shù)據(jù)罐脊，在此期間頁面不能進(jìn)行任何操作（B/S模式）
異步交互：請(qǐng)求通過事件觸發(fā)--》服務(wù)器處理（然后可以做其他的事情）--》服務(wù)器進(jìn)行響應(yīng)瞎嬉。（ajax）
舉列子：
異步：你傳輸吧唐片，我去忙其他事情了，傳完之后告訴我柠掂。
同步：你傳輸项滑，我就靜靜的看你傳完之后我在去做其他的事情。
同時(shí)要注意涯贞，訪問的文件跟本文件必須同源(1枪狂、同協(xié)議 2、同域名 3宋渔、同端口)
ajax 通訊原理
圖片3.png
apache 安裝
安裝有個(gè)教程：
D:\課件\JS 高級(jí)\JS_day21\2州疾、安裝包\如何安apache服務(wù)器.docx
如果安裝不成功 刪除方法
直接刪除不行
cmd 中輸入
sc delete apache
然后再將文件刪除
ajax 通信原理
分五步走
step 0 創(chuàng)建xhr
var xhr = new XMLHttpRequest();
其中，XMLHttpRequest的常用屬性有以下幾個(gè)：
XMLHttpRequest核心屬性.png
readyState請(qǐng)求狀態(tài)的屬性：
readyState請(qǐng)求狀態(tài).png
常用的http響應(yīng)狀態(tài)
http響應(yīng)狀態(tài)V1.png
http響應(yīng)狀態(tài)V2.png
/*
有三個(gè)參數(shù)
參數(shù)1：請(qǐng)求方式 (get和post)
參數(shù)2：請(qǐng)求的URL
參數(shù)3：是否異步(true)
*/
xhr.open("get","http://10.0.154.108/ajax.txt",true);
step 2 發(fā)送請(qǐng)求
/*
如果使用的是 get 方式皇拣，不用傳遞參數(shù)
如果使用 post 孝治，參數(shù)在這里傳遞
*/
xhr.send();
step 3&step 4 接收返回?cái)?shù)據(jù) 并 處理數(shù)據(jù)
// 給 xhr 添加一個(gè)數(shù)據(jù)響應(yīng)事件(當(dāng)服務(wù)器響應(yīng)時(shí)出發(fā))
xhr.onreadystatechange = callBack;
function callBack() {
// 3.1、判斷 http 響應(yīng)狀態(tài);
if(xhr.status == 200 || xhr.status == 304){
// console.log(xhr.readyState)
// 3.2审磁、判斷readyState請(qǐng)求
if(xhr.readyState ==4){
// 4、處理數(shù)據(jù)
console.log(xhr.responseText);
}
}
}
注意：一定要保持當(dāng)前HTML文件同源岂座，否則會(huì)訪問不到
訪問錯(cuò)誤：
ajax.jpg
請(qǐng)求json文件
json文件：存儲(chǔ)數(shù)據(jù)的一種格式
json文件特點(diǎn)：
1.輕量級(jí)的數(shù)據(jù)傳輸 2.效率相對(duì)較高
json文件的組成
- { }代表對(duì)象
- ：代表屬性對(duì)(左側(cè)是屬性名态蒂，右側(cè)是屬性值)
- [ ]代表數(shù)組
- ,分隔兩個(gè)部分
發(fā)送請(qǐng)求代碼：
xhr = new XMLHttpRequest();
xhr.open("get","caidanJson.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.status ==200 || xhr.status ==304){
if(xhr.readyState == 4){
// 將json字符串轉(zhuǎn)成對(duì)應(yīng)字面量對(duì)象
var jsonObj = JSON.parse(xhr.responseText);
// console.log(jsonObj);
// console.log(typeof jsonObj);
var caiArr = jsonObj.breakfast_menu.food;
for(var i in caiArr) {
console.log(caiArr[i].price);
}
}
// 將對(duì)象轉(zhuǎn)成對(duì)應(yīng)的 json 字符串
// var jsonStr = JSON.stringify(jsonObj);
// console.log(jsonStr);
// console.log(typeof jsonStr);
}
}
