乐趣区

关于ajax:Ajax基础-学习记录一

jiezi

Ajax 根底

传统网站中存在的问题

  • 网速慢的状况下，页面加载工夫长，用户只能期待
  • 表单提交后，如果一项内容不合格，须要从新填写所有表单内容
  • 页面跳转，从新加载页面，造成资源节约，减少用户等待时间
Ajax 概述

Ajax：规范读音 [ˈeɪˌdʒæks]，中文音译：阿贾克斯
它是浏览器提供的一套办法，能够实现页面无刷新更新数据，进步用户浏览网站利用的体验。

Ajax 的利用场景
  • 页面上拉加载更多数据
  • 列表数据无刷新分页
  • 表单项来到焦点数据验证
  • 搜寻框提醒文字下拉列表
Ajax 的运行环境

Ajax 技术须要运行在网站环境中能力失效，这里应用 Node 创立的服务器作为网站服务器。

Ajax 运行原理及实现

Ajax 运行原理

Ajax 相当于浏览器发送申请与接管响应的代理人，以实现在不影响用户浏览页面的状况下，部分更新页面数据，从而进步用户体验。

Ajax 的实现步骤
  1. 创立 Ajax 对象
 var xhr = new XMLHttpRequest();
  1. 通知 Ajax 申请地址以及申请形式
 xhr.open('get', 'http://www.example.com');
  1. 发送申请
 xhr.send();
  1. 获取服务器端给与客户端的响应数据
 xhr.onload = function () {console.log(xhr.responseText);
 }
服务器端响应的数据格式

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

在 http 申请与响应的过程中，无论是申请参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

 JSON.parse() // 将 json 字符串转换为 json 对象
申请参数传递
传统网站表单提交
 <form method="get" action="http://www.example.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!– http://www.example.com?username=zhangsan&password=123456 -->
Ajax 提交

GET 申请形式

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST 申请形式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send('name=zhangsan&age=20');
申请参数的格局

1.application/x-www-form-urlencoded

 name=zhangsan&age=20&sex= 男

2.application/json

 {name: 'zhangsan', age: '20', sex: '男'}

在申请头中指定 Content-Type 属性的值是 application/json，通知服务器端以后申请参数的格局是 json。

 JSON.stringify() // 将 json 对象转换为 json 字符串

留神：get 申请是不能提交 json 对象数据格式的，传统网站的表单提交也是不反对 json 对象数据格式的。

获取服务器端的响应

Ajax 状态码

在创立 ajax 对象，配置 ajax 对象，发送申请，以及接管完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是 ajax 状态码。

0：申请未初始化(还没有调用 open())
1：申请曾经建设，然而还没有发送(还没有调用 send())
2：申请曾经发送
3：申请正在解决中，通常响应中曾经有局部数据能够用了
4：响应曾经实现，能够获取并应用服务器的响应了

 xhr.readyState // 获取 Ajax 状态码

onreadystatechange 事件(很少应用)

当 Ajax 状态码发生变化时将主动触发该事件。

在事件处理函数中能够获取 Ajax 状态码并对其进行判断，当状态码为 4 时就能够通过 xhr.responseText 获取服务器端的响应数据了。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    // 0 曾经创立了 ajax 对象 然而还没有对 ajax 对象进行配置
    console.log(xhr.readyState);
    xhr.open('get', 'http://localhost:3000/readystate');
    // 1 曾经对 ajax 对象进行配置 然而还没有发送申请
    console.log(xhr.readyState);

    // 当 ajax 状态码发生变化的时候触发
    xhr.onreadystatechange = function() {
        // 2 申请曾经发送了
        // 3 曾经接管到服务器端的局部数据了
        // 4 服务器端的响应数据曾经接管实现
        console.log(xhr.readyState);
        // 对 ajax 状态码进行判断 如果状态码的值为 4 就代表数据曾经接管实现了
        if (xhr.readyState == 4) {console.log(xhr.responseText);
        }
    } 

    xhr.send();
    
</script>

onload 事件

<script type="text/javascript">
    // 1. 创立 ajax 对象
    var xhr = new XMLHttpRequest();
    // 2. 通知 Ajax 对象要向哪发送申请，以什么形式发送申请
    // 1)申请形式 2)申请地址
    xhr.open('post', 'http://localhost:3000/json');
    // 通过申请头通知服务器端客户端向服务器端传递的申请参数的格局是什么
    xhr.setRequestHeader('Content-Type', 'application/json');
    // JSON.stringify() 将 json 对象转换为 json 字符串
    // 3. 发送申请
    xhr.send(JSON.stringify({name: 'lisi', age:50}));
    // 4. 获取服务器端响应到客户端的数据
    xhr.onload = function (){console.log(xhr.responseText)
    }
</script>

两种获取服务器端响应形式的区别

区别形容 onload 事件 onreadystatechange 事件
是否兼容 IE 低版本 不兼容 兼容
是否须要判断 Ajax 状态码 不须要 须要
被调用次数 一次 屡次
Ajax 错误处理
  1. 网络畅通，服务器端能接管到申请，服务器端返回的后果不是预期后果。
    能够判断服务器端返回的状态码，别离进行解决。xhr.status 获取 http 状态码
  2. 网络畅通，服务器端没有接管到申请，返回 404 状态码。
    查看申请地址是否谬误。
  3. 网络畅通，服务器端能接管到申请，服务器端返回 500 状态码。
    服务器端谬误。
  4. 网络中断，申请无奈发送到服务器端。
    会触发 xhr 对象上面的 onerror 事件，在 onerror 事件处理函数中对谬误进行解决。
<script type="text/javascript">
    var btn = document.getElementById('btn');

    btn.onclick = function () {
        // 1. 创立 ajax 对象
        var xhr = new XMLHttpRequest();
        // 2. 通知 Ajax 对象要向哪发送申请，以什么形式发送申请
        // 1)申请形式 2)申请地址
        xhr.open('get', 'http://localhost:3000/error');
        // 3. 发送申请
        xhr.send();
        // 4. 获取服务器端响应到客户端的数据
        xhr.onload = function (){
            // xhr.status 获取 http 状态码
            console.log(xhr.responseText);
            if (xhr.status == 400) {alert('申请出错')
            }
        }
        // 当网络中断时会触发 onerrr 事件
        xhr.onerror = function () {alert('网络中断, 无奈发送 Ajax 申请')
        }
    }

    // Ajax 状态码: 示意 Ajax 申请的过程状态 ajax 对象返回的
    // Http 状态码: 示意申请的处理结果 是服务器端返回的
</script>

低版本 IE 浏览器的缓存问题

问题：在低版本的 IE 浏览器中，Ajax 申请有重大的缓存问题，即在申请地址不发生变化的状况下，只有第一次申请会真正发送到服务器端，后续的申请都会从浏览器的缓存中获取后果。即便服务器端的数据更新了，客户端仍然拿到的是缓存中的旧数据。

解决方案：在申请地址的前面加申请参数，保障每一次申请中的申请参数的值不雷同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

<script type="text/javascript">
    var btn = document.getElementById('btn');

    btn.onclick = function () {
        // 1. 创立 ajax 对象
        var xhr = new XMLHttpRequest();
        // 2. 通知 Ajax 对象要向哪发送申请，以什么形式发送申请
        // 1)申请形式 2)申请地址
        xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random());
        // 3. 发送申请
        xhr.send();
        // 4. 获取服务器端响应到客户端的数据
        xhr.onreadystatechange = function (){if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);
            }
        }
        
    }
</script>
Ajax 封装

问题：发送一次申请代码过多，发送屡次申请代码冗余且反复。
解决方案：将申请代码封装到函数中，发申请时调用函数即可。

function ajax (options) {
    // 存储的是默认值
    var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {'Content-Type': 'application/x-www-form-urlencoded'},
        success: function () {},
        error: function () {}
    };

    // 应用 options 对象中的属性笼罩 defaults 对象中的属性
    Object.assign(defaults, options);

    // 创立 ajax 对象
    var xhr = new XMLHttpRequest();
    // 拼接申请参数的变量
    var params = '';
    // 循环用户传递进来的对象格局参数
    for (var attr in defaults.data) {
        // 将参数转换为字符串格局
        params += attr + '=' + defaults.data[attr] + '&';
    }
    // 将参数最初面的 & 截取掉 
    // 将截取的后果从新赋值给 params 变量
    params = params.substr(0, params.length - 1);

    // 判断申请形式
    if (defaults.type == 'get') {defaults.url = defaults.url + '?' + params;}

    // 配置 ajax 对象
    xhr.open(defaults.type, defaults.url);
    // 如果申请形式为 post
    if (defaults.type == 'post') {
        // 用户心愿的向服务器端传递的申请参数的类型
        var contentType = defaults.header['Content-Type']
        // 设置申请参数格局的类型
        xhr.setRequestHeader('Content-Type', contentType);
        // 判断用户心愿的申请参数格局的类型
        // 如果类型为 json
        if (contentType == 'application/json') {
            // 向服务器端传递 json 数据格式的参数
            xhr.send(JSON.stringify(defaults.data))
        }else {
            // 向服务器端传递一般类型的申请参数
            xhr.send(params);
        }

    }else {
        // 发送申请
        xhr.send();}
    // 监听 xhr 对象上面的 onload 事件
    // 当 xhr 对象接管完响应数据后触发
    xhr.onload = function () {// xhr.getResponseHeader()
        // 获取响应头中的数据
        var contentType = xhr.getResponseHeader('Content-Type');
        // 服务器端返回的数据
        var responseText = xhr.responseText;

        // 如果响应类型中蕴含 applicaition/json
        if (contentType.includes('application/json')) {
            // 将 json 字符串转换为 json 对象
            responseText = JSON.parse(responseText)
        }

        // 当 http 状态码等于 200 的时候
        if (xhr.status == 200) {
            // 申请胜利 调用解决胜利状况的函数
            defaults.success(responseText, xhr);
        }else {
            // 申请失败 调用解决失败状况的函数
            defaults.error(responseText, xhr);
        }
    }
}

调用形式

ajax({
    type: 'post',
    // 申请地址
    url: 'http://localhost:3000/responseData',
    success: function (data) {console.log(data)
    }
})
退出移动版