Ajax学习笔记

AJax基础

Ajax：中文音译：阿贾克斯

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验，

允许通过场景后面的Web服务器交换数据来异步更新网页

Ajax的应用场景

1.页面上拉加载更多数据

2.列表数据无刷新分页

3.表单项离开焦点数据验证

4.搜索框提示文字下拉列表

Ajax的运行原理

Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验

Ajax的实现步骤

1.创建Ajax对象

var xhr= new XMLHttpRequest();

2.设置Ajax请求地址以及请求方式

method: 请求的类型：GET还是POST

url: 服务器(文件)位置

async: true(异步)或false(同步)

xhr.open('get','http://www.example.com',true);

3.发送请求

xhr.send();

4.监听状态的变化

xhr.onreadystatechange = function () {
    /*   0: 请求未初始化
         1: 服务器连接已建立
         2: 请求已接收
         3: 正在处理请求
         4: 请求已完成且响应已就绪 */
    if ( xhr.readyState === 4) {
        //判断是否请求成功
        if (xhr.status >= 200 & xhr.status < 300 || xhr.status === 304) {
            //    5. 处理返回的结果
            console.log('接收到服务器返回的数据');
        } else {
            console.error('没有接收到服务器数据');
        }
    }

}

上传文件的方法

<!--
    注意：
    1.上传文件一般使用POST提交
    2.上传文件必须设置enctype="multipart/form-data"

    3.上传的文件在php中可以通过$_FILES获取
    4.php中文件默认会上传到一个临时目录，接收完毕之后会自动删除

-->
<form action="03-post-file.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upFile"><br>
    <input type="submit" value="上传">
</form>

默认情况下服务器对上传文件的大小是有限制的，如果想修改上传文件的限制可以修改php.ini文件          

    file_uploads = On             ; 是否允许上传文件 On/Off 默认是On
    upload_max_filesize = 2048M   ; 上传文件的最大限制
    post_max_size = 2048M         ;  通过Post提交的最多数据

    max_execution_time = 30000    ; 脚本最长的执行时间 单位为秒
    max_input_time = 30000        ; 接收提交数据的时间限制 单位为秒
    momory_limit = 2048M          ; 最大的内存消耗

服务器端相应的数据格式 

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式，当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中

// 4. 获取服务器端响应到客户端的数据
xhr.onload = function() {
    //  newAjax.responseText
    console.log(xhr.responseText);
    // 将JSON字符串转换为JSON对象
    console.log(JSON.parse(xhr.responseText));

    var responseText = JSON.parse(xhr.responseText);
    var str = '<h2>'+responseText.name+'</h2>';

    document.body.innerHTML = str
}

<?php
// 定义一个php对象
$obj = array('name'=>'zy','age'=>'20');
// json_encode() 将数组和对象转换为json格式
print_r(json_encode($obj));
//print_r($obj['name'])
?>

IE浏览器兼容问题

通过创建获取当前时间对象（或创建随机数）的方法，与请求地址通过?t=拼接字符串，修改请求地址名字

来保证每次都可以获取到最新的数据

<script>
    window.onload = function () {
            var btn = document.querySelector('button');
            btn.onclick = function () {
                //浏览器兼容 w3c 标准
                var xhr;
                if (window.XMLHttpRequest) {
                    // code for IE7+,Firefox,Chrome,Opera,Safari
                    xhr = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // var xhr = new XMLHttpRequest();
                /*
                在IE浏览器中 如果通过ajax发送get请求 那么IE浏览器认为
                同一个url只有一个结果
                05-ajax-get.txt === abc;
                */

                // console.log(Math.random());
                // console.log(new Date().getTime());

                xhr.open('GET','05-ajax-get.txt?t='+new Date().getTime(),true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >=200 && xhr.status < 300 || xhr.status === 304) {
                            // alert('请求成功')
                            alert(xhr.responseText)
                        } else {
                            alert('请求失败')
                        }
                    }
                }
            }
    }
</script>

封装一个ajax函数 -> myAjax.js

function obj2str(obj) {
    /*
    {
        'username':'zy'
        'userpass':'123456'
        't':'121424352351'
    }
    */
    obj.t = new Date().getTime();
    var res = [];
    for (var key in obj) {
        res.push(key+'='+obj[key]);   // [username=zy,userpass=123456]
    }
    return res.join('&');   // username=zy&userpass=123456
}

function ajax(url,obj,timeout,success,error) {
    //    0.将对象转换为字符串
    var str = obj2str(obj);    // key=value&key=value;
    //    1.创建一个异步对象
    var xhr,timer;
    if (window.XMLHttpRequest) {
        // code for IE7+,Firefox,Chrome,Opera,Safari
        xhr = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //    2 设置请求方式和请求地址
    //    method：请求的类型：GET 还是 POST
    //    url：服务器（文件）位置
    //    async：true（异步）或 false（同步）
    xhr.open('GET',url + '?' + str,true);
    //    3. 发送请求
    xhr.send();
    //    4. 监听状态的变化
    xhr.onreadystatechange = function () {
        /*   0: 请求未初始化
             1: 服务器连接已建立
             2: 请求已接收
             3: 正在处理请求
             4: 请求已完成且响应已就绪 */
        if ( xhr.readyState === 4) {
            clearInterval(timer);
            //判断是否请求成功
            if (xhr.status >= 200 & xhr.status < 300 || xhr.status === 304) {
                //    5. 处理返回的结果
                // console.log('接收到服务器返回的数据');
                success(xhr);
            } else {
                // console.error('没有接收到服务器数据');
                error(xhr);
            }
        }
    // 判断外界是否传入了超时时间
        if (timeout) {
            timer = setInterval(function () {
                console.log('中断请求');
                xhr.abort();
                clearInterval(timer);
            },timeout)
        }
    }