2020.7.1：ajax跨域、JQuery跨域、模板引擎 artTemplate

今日学习内容：

# Ajax 关于跨域：

1. XMR 对象只能获取同源数据，我们可以通过 script 标签，用 script 标签的 src 属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。

　　- 例如：

<script src="http://www.lisi.com/data.php?city=shanghai"></script> 

2. 接口案例：（ jsonp 格式是用来跨域的，xml、json、text格式是用来访问同源服务器的）

1. 淘宝提示词接口
    - 地址：https://suggest.taobao.com/sug
    - 作用描述：获取淘宝提示词接口
    - 请求类型：Get 请求
    - 参数：q：关键字、 callback：回调方法名称
    - 返回数据格式：Jsonp格式
2. 百度提示词

    - 地址： https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
    - 作用描述：获取百度提示词
    - 请求类型：Get 请求
    - 参数：wd：关键字、cb：回调函数名称
    - 返回数据格式：jsonp 格式

3. ajax 函数的封装：

// 跨域数据obj dataType = jsonp
function myAjax(obj) {
    if (obj.dataType == "jsonp") {
        myAjax4cross(obj);
    } else {
        myAjax4normal(obj);
    }
}
function myAjax4cross(obj) {

    var defaults = {
        type: "get",
        url: "#",
        data: {},
        success: function () {
        },
        jsonp: "callback",
        jsonpCallback: "hehe"
    };
    for (var key in obj) {
        defaults[key] = obj[key];
    }

    var params = "";
    for (var attr in defaults.data) {
        params += attr + "=" + defaults.data[attr] + "&";
    }
    if (params) {
        params = params.substring(0, params.length - 1);
        defaults.url += "?" + params;
    }
    defaults.url += "&" + defaults.jsonp + "=" + defaults.jsonpCallback;
    console.log(defaults.url);

    var script = document.createElement("script");
    script.src = defaults.url;

    window[defaults.jsonpCallback] = function (data) {
        defaults.success(data);
    }

    var head = document.querySelector("head");
    head.appendChild(script);
}
function myAjax4normal(obj) {
    
    var defaults = {
        type: "get",
        url: "#",
        dataType: "json",
        async: true,
        data: {},
        success: function (result) {
            console.log(result);
        }
    };
    for (var key in obj) {
        defaults[key] = obj[key];
    }
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var params = "";
    for (var attr in defaults.data) {
        params += attr + "=" + defaults.data[attr] + "&";
    }
    if (params) {
        params = params.substring(0, params.length - 1);
    }
    if (defaults.type == "get") {
        defaults.url += "?" + params;
    }
    xhr.open(defaults.type, defaults.url, defaults.async);

    if (defaults.type == "get") {
        xhr.send(null);
    } else if (defaults.type == "post") {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

    if (defaults.async) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = null;
                    if (defaults.dataType == "json") {
                        result = xhr.responseText;
                        result = JSON.parse(result);
                    } else if (defaults.dataType == "xml") {
                        result = xhr.responseXML;
                    } else {
                        result = xhr.responseText;
                    }
                    defaults.success(result);
                }
            }
        }
    } else {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var result = null;
                if (defaults.dataType == "json") {
                    result = xhr.responseText;
                    result = JSON.parse(result);
                } else if (defaults.dataType == "xml") {
                    result = xhr.responseXML;
                } else {
                    result = xhr.responseText;
                }
                defaults.success(result);
            }
        }
    }
};

调用示范：

<script>
    window.onload = function () {
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            var keywordValue = document.querySelector("#keyword").value;
            console.log(keywordValue);

            myAjax({
                url: "https://suggest.taobao.com/sug",
                data: { q: keywordValue },
                success: function (data) {
                    var liTag = "";
                    for (var i = 0; i < data.result.length; i++) {
                        var temp = data.result[i];
                        var tempSug = temp[0];
                        liTag += "<li>" + tempSug + "</li>";
                    }

                    var ulTag = document.querySelector("ul");
                    ulTag.innerHTML = liTag;
                }
            });
        }
    };
</script>

<body>
    <input type="text" id="keyword" placeholder="请输入相关的关键字">
    <input type="button" id="btn" value="查询">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

# JQuery 跨域的示范：( dataType 必须 = jsonp 才能跨域)

$.ajax({
                url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data: { wd: keywordValue },
                success: function (data) {
                    var liTag = "";
                    for (var i = 0; i < data.s.length; i++) {
                        var temp = data.s[i];
                        liTag += "<li>" + temp + "</li>";
                    }

                    var ulTag = document.querySelector("ul");
                    ulTag.innerHTML = liTag;
                },
                dataType: "jsonp",//json xml text
                jsonp: "cb",
                jsonpCallback: "hehe"
            });

 # 模板引擎 artTemplate 的使用

　- 引入 js 文件
    - 定义模板
    - 将数据和模板结合起来生成 html 片段
    - 将 html 片段渲染到界面中

# 基本语法

    - 得到数据中的值 —— {{value}}    
    - 循环操作 —— {{each result as value i}}{{/each}}
    - 转义 # 的使用 —— {{#value}}
    - 条件判断 —— {{if xxx}}{{/if}}

技巧：有时候有可能需要对原始数据进行加工操作

例子：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="myUtils.js"></script>
    <script src="JQuery.js"></script>
    <script src="template-web.js"></script>

    <!-- 1. 模板的 type=text/html  2. 给模板配一个 id
            data s
        -->
    <script type="text/html" id="resultTemplate">
    <ul>
        {{each s as value i}}
        <li>
            <div>
                <span>结果{{i+1}}：</span>
                <span>{{value}}</span>
            </div>
        </li>
        {{/each}}
    </ul>
    </script>
    <script>
        window.onload = function () {
            var btn = document.querySelector("#btn");
            btn.onclick = function () {
                var keywordValue = document.querySelector("#keyword").value;
                console.log(keywordValue);
                $.ajax({
                    url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    data: { wd: keywordValue },
                    success: function (data) {
                        console.log(data);
                        // template 方法的含义就是将数据和模板结合起来，生成 html 片段
                        var html = template("resultTemplate", data);
                        console.log(html);
                        var divResult = document.querySelector("#divResult");
                        divResult.innerHTML = html;
                    },
                    dataType: "jsonp",
                    jsonp: "cb",
                    jsonpCallback: "hehe"
                });
            }
        };
    </script>
</head>

<body>
    <input type="text" id="keyword" placeholder="请输入相关的关键字">
    <input type="button" id="btn" value="查询">
    <div id="divResult">
        <ul>
            <li>
                <div>
                    <span>结果1：</span>
                    <span>1</span>
                </div>
            </li>
            <li>
                <div>
                    <span>结果1：</span>
                    <span>1</span>
                </div>
            </li>
            <li>
                <div>
                    <span>结果1：</span>
                    <span>1</span>
                </div>
            </li>
            <li>
                <div>
                    <span>结果1：</span>
                    <span>1</span>
                </div>
            </li>
            <li>
                <div>
                    <span>结果1：</span>
                    <span>1</span>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>

例子01：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板引擎</title>
    <script type="text/javascript" src="template-web.js"></script>
    <script type="text/html" id="resultTemplate">

        <h1>{{title}}</h1>
        {{each books as value i}}
        <div>{{value}}</div>
        {{/each}}

    </script>
    <script>
        window.onload = function () {
            var data = {
                title: '四大名著图书信息',
                books: ['三国演义', '水浒传', '西游记', '红楼梦']
            };
            var html = template("resultTemplate", data);
            var container = document.querySelector("#container");
            container.innerHTML = html;
        }
    </script>
</head>

<body>
    <div id="container">
    </div>
</body>

</html>

例子02：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="template-web.js"></script>
    <script type="text/html" id="test">
        {{if isAdmin}}
            <h1>{{title}}</h1>
            <h2>一共有{{count}}条数据</h2>
            <ul>
                {{each list as value i}}
                    <li>索引{{i+1}}：{{value}}</li>
                {{/each}}
            </ul>
            {{/if}}
        {{if !isAdmin}}
            <h1>没有任何数据</h1>
        {{/if}}

    </script>
    <script>
        window.onload = function () {
            var data = {
                title: '条件判断基本例子',
                isAdmin: true,
                list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
            };
            data.count = data.list.length;
            var html = template("test", data);
            document.querySelector("#content").innerHTML = html;
        }
    </script>
</head>

<body>
    <div id="content">

    </div>
</body>

</html>

例子03：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="template-web.js"></script>
    <script type="test/html" id="test">
        <ul>
            {{each arr as value i}}
                <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        window.onload = function () {
            var data = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
            var temp = {};
            temp.arr = data;
            var html = template("test", temp);
            document.querySelector("#content").innerHTML = html;
        }
    </script>
</head>

<body>
    <div id="content">
    </div>
</body>

</html>

例子04：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="template-web.js"></script>
    <script type="text/html" id="test">
        <p>不转义:{{#value}}</p>
        <p>默认转义:{{value}}</p>
    </script>
    <script>

        window.onload = function () {
            var data = {
                value: '<span style="color:#f00">hello world!</span>'
            };
            var html = template('test', data);
            document.getElementById("content").innerHTML = html;
        }

    </script>
</head>

<body>
    <div id="content"></div>
</body>

</html>