AJAX

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);

            }
        }