apache简介
首先认识一下URL
URL 就是网页的地址
ajax交互策略:
图片2.png同时ajax可进行异步交互
同步交互:提交请求--》等待服务器处理--》服务器返回数据,在此期间页面不能进行任何操作(B/S模式)
异步交互:请求通过事件触发--》服务器处理(然后可以做其他的事情)--》服务器进行响应。(ajax)
举列子:
异步:你传输吧,我去忙其他事情了,传完之后告诉我。
同步:你传输,我就静静的看你传完之后我在去做其他的事情。
同时要注意,访问的文件跟本文件必须同源(1、同协议 2、同域名 3、同端口)
ajax 通讯原理
图片3.pngapache 安装
安装有个教程:
D:\课件\JS 高级\JS_day21\2、安装包\如何安apache服务器.docx
如果安装不成功 删除方法
直接删除不行
cmd 中输入
sc delete apache
然后再将文件删除
ajax 通信原理
分五步走
step 0 创建xhr
var xhr = new XMLHttpRequest();
其中,XMLHttpRequest的常用属性有以下几个:
XMLHttpRequest核心属性.pngreadyState请求状态的属性:
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);
}
}
网友评论