apache简介
首先认识一下URL
URL 就是网页的地址
图片1.png
ajax交互策略：
图片2.png
同时ajax可进行异步交互
同步交互：提交请求--》等待服务器处理--》服务器返回数据，在此期间页面不能进行任何操作（B/S模式）
异步交互：请求通过事件触发--》服务器处理（然后可以做其他的事情）--》服务器进行响应。（ajax）
举列子：
异步：你传输吧，我去忙其他事情了，传完之后告诉我。
同步：你传输，我就静静的看你传完之后我在去做其他的事情。
同时要注意，访问的文件跟本文件必须同源(1、同协议 2、同域名 3、同端口)
ajax 通讯原理
图片3.png
apache 安装
安装有个教程：
D:\课件\JS 高级\JS_day21\2、安装包\如何安apache服务器.docx
如果安装不成功 删除方法
直接删除不行
cmd 中输入
sc delete apache
然后再将文件删除
ajax 通信原理
分五步走
step 0 创建xhr
var xhr = new XMLHttpRequest();
其中，XMLHttpRequest的常用属性有以下几个：
XMLHttpRequest核心属性.png
readyState请求状态的属性：
readyState请求状态.png
常用的http响应状态
http响应状态V1.png
http响应状态V2.png
/*
有三个参数
参数1：请求方式 (get和post)
参数2：请求的URL
参数3：是否异步(true)
*/
xhr.open("get","http://10.0.154.108/ajax.txt",true);
step 2 发送请求
/*
如果使用的是 get 方式，不用传递参数
如果使用 post ，参数在这里传递
*/
xhr.send();
step 3&step 4 接收返回数据 并 处理数据
// 给 xhr 添加一个数据响应事件(当服务器响应时出发)
xhr.onreadystatechange = callBack;
function callBack() {
// 3.1、判断 http 响应状态;
if(xhr.status == 200 || xhr.status == 304){
// console.log(xhr.readyState)
// 3.2、判断readyState请求
if(xhr.readyState ==4){
// 4、处理数据
console.log(xhr.responseText);
}
}
}
注意：一定要保持当前HTML文件同源，否则会访问不到
访问错误：
ajax.jpg
请求json文件
json文件：存储数据的一种格式
json文件特点：
1.轻量级的数据传输 2.效率相对较高
json文件的组成
- { }代表对象
- ：代表属性对(左侧是属性名，右侧是属性值)
- [ ]代表数组
- ,分隔两个部分
发送请求代码：
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字符串转成对应字面量对象
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);
}
}
// 将对象转成对应的 json 字符串
// var jsonStr = JSON.stringify(jsonObj);
// console.log(jsonStr);
// console.log(typeof jsonStr);
}
}
