Ajax基础--模板引擎&跨域&认识正则表达式

触发事件本质上其实也是增加属性，也可以单独调用

test.onclick = function () {  }
test.onclick();

模板引擎–ArtTemplate

使用：

• 引包
• 制作模板：要给script标签添加type属性和id，type属性可以随便写但不能是 text/javascript （建议用text/html），替换的内容用<%= 变量 %>
  如：

        <script type = "text/html" id = "tpl">
            <div>我叫<%= name %></div>
        </script>
        <!--注意，这里的script标签只是用于写模板-->

• 调用：
  第一个参数确定用哪套模板，第二个参数确定用哪个对象进行填充，返回的是html
  var html = template('tpl', obj);
• 添加：
  div.innerHTML = html;

带参数传递和语句的模板

        <script type = "tp" id = "tpl">
            <% for (var i = 0; i < list.length; i++) { %>
                <div>我叫<%= name %></div>
                <div></div>
            <% } %>
        </script>

取用时：
template('tpl' , '{list:arr}');
前面参数告诉用哪个模板，后面参数说用什么参数填充

自带循环

list位置是对象（或数组） value位置是值 key位置是键（数组中对应下标）

        {{each list value key}}
            <tr>
                <td><%= value.name %></td>
            </tr>
        {{/each}}

同源&跨域

比较 协议头（http/https） 域名 端口(默认是0)，三者全部一样叫同源，否则叫跨域
（是后端的活，前端了解）
跨域的影响：浏览器出于安全的考虑，不允许跨域访问，即自己的服务器不能随便访问跨域的接口

跨域的方法：

CORS技术：Cross Origin Resource Share

在服务器端写响应头：

       header("Access-Control-Allow-Origin:*");//所有资源都能访问
       header("Access-Control-Allow-Origin:https://www.baidu.com");//只允许访问只能域名的资源

JSONP 方法

专门做跨域请求的一套组合
前端部分（heml + css + js）能发请求的方法：
1.xhr
2.<a href=""></a>会跳转，所以pass
3.<img src="" alt="">拿不到响应体
4.<link rel="stylesheet" href="">拿不到响应体
5.<script src=""></script>可以用特定方法拿到响应体

<script>
            function(obj){
                console.log(bj);
            }
</script>

在 script 标签src链接的跨域端口后面添加一个 ?callback=test(test是定义的函数名)

可以自动转换JSON为js对象

原理：
script标签引入之后会获取所链接的文件内容并作为js代码执行（如.js / .txt 等），但是例如php代码等会在服务器端的PHP环境进行解析之后才返回给浏览器，然后浏览器引擎再当成js文件进行解析
利用这一特点，可以在本地端：

• 定义一个接收函数：

        <script>
            function func(obj){
                console.log(obj);
            }
        </script>

• 传给服务器：
  <script src="跨域端口?callback=func（告诉服务器用啥函数名）&参数"></script>

• 在服务器端：

        <?php 

            $fun = $_GET['callback']
            $arr = Array(){
                "name" -> "jack" ,
                "age" -> 18
            }
            $json = json_encode($arr); //编码为json对象

            echo "$func($json)"; //php中双引号所包含的变量会被解析，相当于把$json 作为js函数的参数返回给指定的接收函数

        ?>

用js实现的时候，为了防止页面加载的时候就将script标签解析，可以用：

        var spt = document.creatElement('script');
        spt.src = "" //这里就可以用字符串拼接了
        document.head.appendChild(spt);
        //JSONP的响应是一个字符串，字符串里写的是函数执行   

正则表达式基础：验证字符串是否匹配某种格式

在js中有个对象RegExp，叫做正则对象

括号里面设置规则：

 var reg = new RegExp(/a/); //是否包含a，用两个斜杠包含

或者：
var reg = /a/;

有个很重要的方法叫做test()，用于测试是否符合要求
reg.test('abcd');
返回布尔值
可以直接用/a/.test('abcd');

预定义类：（注意要用/ /包括起来）

符号	说明
.	只要出现了除了 \r \n 以外的字符都返回true
\d	只要有0-9的数字就返回true
\D	只要有**非**0-9的数字就返回true
\s	只要出现了不可见字符（空格 \r \n \t 等）就返回true **空字符串表示什么都没有，不满足
\S	（S大写）只要出现了可见字符就是true
\w	只要出现数字字母下划线就是true
\W	只要出现 非 数字字母下划线就是true