AJAX

作者: nwzk41 | 来源:发表于2016-12-09 21:45 被阅读0次

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

    相关文章

      网友评论

          本文标题:AJAX

          本文链接:https://www.haomeiwen.com/subject/jrdymttx.html