ajax原理和实现步骤

一、Ajax是什么?
Ajax = 异步 JavaScript 和 XML 或者是 HTML
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页更新部分网页的技术。
Ajax使用的场景：网页的消息角标变化、搜索引擎的输入提示、注册时输入格式错误提示
（注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。）

二，Ajax 的实现步骤

1.创建ajax对象

var xhr = new XMLHttpRequest();

2,告诉Ajax对象要向哪发送请求（请求地址）以及请求方式（get）

xhr.open('get','http://localhost:3000/first');

3.发送请求

xhr.send();

4.获取服务器端给客户端的响应数据

xhr.onload = funcion() {

        console.log(xhr.responseText);

}

<script>
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost:3000/first');
        xhr.send();
        xhr.onload = function() {
            console.log(xhr.responseText)
        }

三，一些ajax遇到的问题

1，检测页面找不到文件，可能是页面没有设置成英文

2，跨域请求问题（Access to XMLHttpRequest at ‘http://localhost:3000/xxx‘ from origin ‘xxxx‘ has been blocked by COR）

将代码写到app.js文件，设置中间件

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

四，post与get请求方式介绍以及请求参数获取与传递

(1)get方式获取请求参数直接用req.query

post方式获取请求参数要用到 body-parser第三方模块

用req.body获取

传递直接拼接到url地址当中用? xxx&xxx格式拼接

(2)

btn.onclick = function() {
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            var nameValue = username.value;
            var ageValue = age.value;
            var params = 'username=' + nameValue + '&age=' + ageValue;
            xhr.open('post', 'http://localhost:3000/post');
            //请求参数的格式类型必须先规定好（post请求必须要设置）
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
            xhr.onload = function() {
                console.log(xhr.responseText);
            }
        }

const bodyParser = require('body-parser'); 

app.post('/post', (req, res) => {

        res.send(req.body);

    })

（3），将请求参数封装好，不管get还是post都能传递

 /*
            请求参数要考虑的问题
                1.请求参数位置的问题
                    将请求参数传递到ajax函数内部，在函数内部根部请求方式的不同将请求参数放置在不同的位置
                    get 放在请求地址的后面
                    post放在send方法中
                2.请求参数格式问题
                第一种格式
                    application/x-www-form-urlencoded
                    参数名称=参数值&参数名称=参数值
                    name=zhangsan&age=20
                第二种数据格式(常用，推荐)
                    application/json
                    {name: 'zhangsan',age:20}  
                    传递对象数据类型更加友好转换更加方便  
             */
 var params = '';
            //循环用户传递进来的对象格式参数
            for (var attr in options.data) {
                //将参数转换为字符串格式
                params += attr + '=' + options.data[attr] + '&';
            }
            //对字符串进行截取 将参数后面的&截取掉
            //将截取的结果重新赋值给params变量
            params = params.substr(0, params.length - 1);
            //判断请求方式
            if (options.type == 'get') {
                options.url = options.url + '?' + params;
            }
            //配置ajax对象
            xhr.open(options.type, options.url);
            if (options.type == 'post') {
                //设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(params);
            } else {
                xhr.send();
            }
            //发送请求
            xhr.send();
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发(Ajax的异步)
            xhr.onload = function() {
                options.success(xhr.responseText);
            }
        }
        //调用ajax函数
        ajax({
                //type代表请求方式(实参)
                type: 'get',
                //请求地址（实参）
                url: 'http://localhost:3000/first',
                data: {
                    name: 'zhangsan',
                    age: 20
                },
                //再上面onload事件调用后此函数作为上面的参数传递进去
                success: function(data) {
                    console.log('这里是success函数' + data);
                }
            })

五，ajax常见错误状态码

 <button id="btn">发送ajax请求</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
                //创建ajax对象
                var xhr = new XMLHttpRequest();
                //告诉ajax要向哪发送请求，发送请求方式
                xhr.open('get', 'http://localhost:3000/error');
                //发送请求
                xhr.send();
                //将请求立马响应
                xhr.onload = function() {
                        //xhr.status 获取http状态码
                        console.log(xhr.status);
                        console.log(xhr.responseText)
                        if (xhr.status == 400) {
                            alert('请求出错')
                        }
                    }
                    //当网络中断时会触发oneerr事件
                xhr.onerror = function() {
                    alert('网络中断，无法发送Ajax请求')
                }
            }
            //Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
            //http状态码： 表示请求的处理结果 是服务器端返回的

六，Ajax函数封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //options(形参)，options.type可以获取实参type
        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 (options.type == 'get') {
                options.url = defaults.url + '?' + params;
            }
            //配置ajax对象
            xhr.open(defaults.type, defaults.url);
            if (defaults.type == 'post') {
                //用户希望的向服务端传递的请求参数类型
                var contentType = defaults.header['Content-Type']
                    //设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', contentType);
                if (contentType == 'application/json') {
                    //向服务器端传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    //向服务器端传递普通类型的请求参数
                    xhr.send(params);
                }
                xhr.send(params);
            } else {
                //发送请求
                xhr.send();
            }
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发(Ajax的异步)
            xhr.onload = function() {
                // xhr.getAllResponseHeaders()
                //获取响应头中的数据
                var contentType = xhr.getAllResponseHeaders('Content-Type');
                //服务器段返回的数据
                var responseText = xhr.responseText;
                if (contentType.includes('application/json')) {
                    //重新赋值 将json字符串转换为json对象
                    responseText = JSON.parse(responseText);
                }
                //当http状态码等于200的时候
                if (xhr.status == 200) {
                    //请求成功 调用处理成功情况的函数
                    options.success(responseText, xhr);
                } else {
                    //请求失败 调用处理失败情况的函数
                    options.error(responseText, xhr);
                }

            }
        }
        //调用ajax函数
        ajax({
                //type代表请求方式(实参)

                //请求地址（实参）
                url: 'http://localhost:3000/first',

                //再上面onload事件调用后此函数作为上面的参数传递进去
                success: function(data) {
                    console.log('这里是success函数');
                    console.log(data);
                }
            })
            /*
            请求参数要考虑的问题
                1.请求参数位置的问题
                    将请求参数传递到ajax函数内部，在函数内部根部请求方式的不同将请求参数放置在不同的位置
                    get 放在请求地址的后面
                    post放在send方法中
                2.请求参数格式问题
                第一种格式
                    application/x-www-form-urlencoded
                    参数名称=参数值&参数名称=参数值
                    name=zhangsan&age=20
                第二种数据格式(常用，推荐)
                    application/json
                    {name: 'zhangsan',age:20}  
                    传递对象数据类型更加友好转换更加方便  
             */
    </script>
</body>

</html>

七，模板引擎

创建js文件夹放官网下载的art-template文件

使用art-template模板引擎，在html页面引入art-template文件

art-template使用方法

//art-template在客户端的使用步骤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1, 将模板引擎的库文件引入到当前页面 -->
    <script src="./js/template-web.js"></script>
</head>

<body>
    <div id="container"></div>
    <!-- 2,准备art-template模板 -->
    <script type="text/html" id="tpl">
        <h1>{{username}} {{age}}</h1>
    </script>
    <script type="text/javascript">
        // 3,告诉模板引擎将哪个数据和哪个模板进行拼接
        //(1)第一个参数：模板id （2）第二个参数：数据 对象类型
        //template方法的返回值是拼接好的html字符串
        var html = template('tpl', {
                username: 'zhangsan',
                age: 30
            })
            //让定义的div盒子显示html页面
        document.getElementById('container').innerHTML = html;
    </script>
</body>

</html>

八，案例