Ajax

客户端与服务器

服务器：负责存放和对外提供资源的电脑客户端：负责获取和消费资源的电脑 URL地址：统一资源定位符（看作身份证号），表示互联网上每一个资源的唯一存放位置由三部分组成

通信协议
服务器名称
具体的存放位置

客户端与服务器的通信过程：请求-处理-响应在网页中请求服务器上的数据资源，需要使用XMLHttpRequest对象用法：var xhrObj=new XMLHttpRequest()

常见的两种请求方式

get请求用于获取服务器资源例如获取图片，音频等 post请求常用语向服务器提交数据例如：登陆、注册等 Ajax可以实现网页与服务器之间的数据交互应用场景：用户名检测：注册时，通过ajax形式，动态监测用户名是否被占用。搜索提示：当输入关键字，通过ajax形式，动态提供列表。数据的增删改查，实现数据的交互

$.get()函数

通过XHR页签监听请求

$.post()函数

$.ajax()函数

功能综合使用$.ajax()发起get请求

使用$.ajax()发起post请求

接口

使用ajax请求数据时，被请求的URL地址，就叫做数据接口，同时每个接口必须有请求方式。获取图书的接口：http://www.liulongbin.top:3006/api/getbooks 添加图书的接口：http://www.liulongbin.top:3006/api/addbook Postman测试接口过程

选择请求方式
填写请求的URL地址
填写请求的参数
点击Send按钮发起GET请求
查看服务器相应的结果

Postman测试POST接口步骤：

选择请求的方式
填写请求的URL地址
选择Body面板并勾选数据格式
填写要发送到服务器的数据
点击Send按钮发起POST请求
查看服务器响应的结果

接口文档

接口的说明文档，它是我们调用接口的依据，好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口就能方便的知道接口的作用，以及接口如何进调用。

接口文档的组成部分

接口名称：标识接口接口URL：接口调用地址调用方式：如get和post 参数格式：接口需压迫传递的参数，每个参数必须包括参数名称、参数类型、是否必选、参数说明这四项内容响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明返回事例（可选）：通过对象的形式，例举返回数据的结构案例：图书的增删改查

form表单

在网页中负责数据采集，HTML中form标签，用于采集用户输入的信息，并通过form标签提交操作，把采集到的信息提交到服务器端处理。 action属性：规定当提交表单时，提交的地址. 当form表单未指定URL，那么则将数据提交到当前页面的URL 也可以理解action的默认值为当前页面的URL target属性：规定在何处打开action URL 一般情况下给target设置两种值： _blank :在新窗口中打开 _self：默认在相同的框架中打开 method属性：规定以何种方式把表单提交到action URL 可选值为get和post 默认情况的值为get enctype属性：规定在发送表单之前如何对数据进行编码默认情况下值：application/x-www-form-urlencoded 如果涉及文件上传，必须要将enctype值设置为：multipart/form-data 表单的同步提交通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。缺点：

页面跳转
页面之前的状态和数据会丢失

采用ajax将数据提交到服务器，表单值负责采集数据监听表单提交事件两种方法

阻止表单默认行为当监听到表单的提交事件后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转。

//阻止表单的默认提交行为
            //one
            // $("#f1").submit(function (e) {
            //     e.preventDefault();
            // });
            //two
            $("#f1").on("submit", function (e) {
                e.preventDefault();
            })

快速获取表单中的数据

//快速获取表单的值
            //one
            $("#f1").submit(function (e) {
                e.preventDefault();
                var data = $(this).serialize();
                console.log(data);
            });

案例：评论发表

模版引擎

可以根据程序员指定的模版结构和数据，自动生成一个完整的HTML页面优点：减少字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护 art-template 简约、超快的模版引擎

Art-template标准语法

{{}}内可以进行变量输出、对象属性的输出、三元表达式的输出，逻辑或输出、加减乘除表达式的输出、过滤器

正则与字符串操作

replace函数

多次replace操作

换种思路：循环使用

        var str = '我是{{name}}年龄{{age}}
';
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
        //循环replace
        var patternResult = null;
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], patternResult[1]);
        }
        console.log(str);

replace替换为真值

        var data = { name: '张三', age: 20 };
        var str = '我是{{name}}年龄{{age}}
';
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
        //循环replace
        var patternResult = null;
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], data[patternResult[1]]);
        }
        console.log(str);

调用自己的模版引擎 html文件

自己的template.js文件

function template(id, data) {
    var str = document.getElementById(id).innerHTML;
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
    //循环replace
    var patternResult = null;
    while (patternResult = pattern.exec(str)) {
        str = str.replace(patternResult[0], data[patternResult[1]]);
    }
    return str;

}

XMLHttpRequest的基本使用

可以请求服务器上的数据资源，ajax函数就是基于xhr对象封装出来的

带参数的get请求 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");

如何对URL进行编码和解码

使用XHR进行POST请求

        //使用XHR进行post请求
        //1.创建XHR对象
        var xhr = new XMLHttpRequest();
        //2.调用open函数
        xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
        //3.设置content-type
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //4.调用send函数
        xhr.send('bookname=水浒传&author=施耐庵&publisher=上海版社');
        //5.监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应结果
                console.log(xhr.responseText);
            }
        }

数据交换格式

服务器端与客户端进行数据传输与交换的格式主要使用JSON 和 XML XML：可扩展标记语言

HTM L是用来描述网页上的内容，是网页内容的载体
XML是用来传输和存储数据，是数据的载体

缺点：格式复杂，和数据无关的代码多，体积大，传输效率低，在js中解析XML比较麻烦。 JSON：js对象和数组的字符串表示法，一种轻量级的文本数据交换格式，主流交换格式。 JSON的两种结构对象结构和数组结构，字符串用双引号，数据类型可以是数字、字符串、布尔值、null、数组、对象 JSON的作用：在计算机与网络之间存储和传输数据 JSON的本质：用字符串来表示js对象数据和数组数据 JSON和JS对象的互转

        //JSON-->JS
        var jsonStr = '{"a":"hello","b":"hi"}';
        var jsStr = JSON.parse(jsonStr);
        console.log(jsStr);
        //JS-->JSON
        var jsStr = { a: 'hello', b: 'hi' };
        var jsonStr = JSON.stringify(jsStr);
        console.log(jsonStr);
//应用场景
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var result = JSON.parse(xhr.responseText);
                console.log(result);
            }
        }

序列化和反序列化

把数据对象转换为字符串的过程叫做序列化，把字符串转换为数据对象的过程叫做反序列化，封装自己的Ajax函数处理data参数：需要把data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolve Data函数如下：

function resolveData(data) {
    var arr = [];
    for (var k in data) {
        var str = k + '=' + data[k];
        arr.push(str);
    }
    return arr.join("&")
}

// var res = resolveData({ name: "ss", age: 20 });
// console.log(res);
function itheima(options) {
    var xhr = new XMLHttpRequest();
    //把外界传递过来的参数对象转换为查询字符串
    var qs = resolveData(options.data);
    if (options.method.toUpperCase() == 'GET') {
        //发起get请求
        xhr.open(options.method, options.url + '?' + qs);
        xhr.send();
    } else if (options.method.toUpperCase() == 'POST') {
        //发起post请求
        xhr.open(options.method, options.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');
        xhr.send(qs);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = JSON.parse(xhr.responseText);
            options.success(result);
        }
    }
}

测试

XMLHttpRequest level2的新特性

1.设置HTTP请求时限

使用Form Data对象管理表单数据

获取网页表单的值

使用axios发送post请求

直接使用axios发送get请求

直接使用axios发送post请求

同源

如果两个页面的协议和域名和端口都相同，则两个页面具有相同的源

同源策略

浏览器提供的一个安全功能

跨域

与同源相反的就是跨域出现跨域的根本原因：浏览器不允许非同源的URL之间进行资源交互注：浏览器允许发起跨域请求，但是，跨域请求回来的数据会被浏览器拦截，无法被页面获取到实现跨域请求JSONP和CORS JSONP：出现早，兼容性好，只支持get CORS：出现晚，W3C标准，支持get和post，兼容性不好

JSONP

实现原理：通过script标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

jQuery中的JSONP

节流

指减少一段时间内事件的处罚频率应用场景：当鼠标连续不断的触发某事件（如点击），只在单位时间内只触发一次；懒加载要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必浪费CPU的资源。节流案例-鼠标跟随效果节流阀：节流阀为空，表示可以执行下一次操作；不为空，表示不能执行下次操作。当前操作操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。每次执行操作前，必须先判断节流是否为空。

防抖：如果事件被频繁触发，防抖能保证只有一次出发生效，前面N多次的触发都会被忽略。节流：如果事件被频繁触发，节流减少事件触发的频率，因此，节流是有选择性地执行一部分事件。

HTTP协议

客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议，网页内容又叫做超文本，因此网页内容过的传输协议又叫做超文本传输协议（hyper text transfer protocol）简称HTTP协议 HTTP协议采用请求/响应的交互模型只有POST才有请求体，GET是没有请求体的 HTTP响应状态码

2**范围的状态码

3**范围的状态码

4**范围的状态码

5**范围的状态码

AJAX