• ajax笔记三

    目录

    一 art-template的基本使用

      二 正则表达式

    (1)正则的exec函数与提取分组

    （2）字符串的replace函数

    三 模板引擎的实现原理

     四 URL编码

    五 JSON  

    六 封装自己的AJAX函数

    一 art-template的基本使用

    （1）art-template的使用步骤
    ①导入art-template
    ②定义数据
    ③定义模板
    ④调用template函数

    ⑤渲染HTML结构
    （2）标准语法
    art-template提供了{{ }}这种语法格式，在{{ }}内可以进行变量输出，或循环数组等操作,这种{{ }}语法在art-template中被称为标准语法。
    输出：在{{ }}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

     原文输出：如果要输出的value值中,包含了HTML标签结构,则需要使用原文输出语法，才能保证HTML标签被正常渲染。

    {{@ value }}

     条件输出：可以在{{ }}中使用if...else if ... /if的方式，进行按需输出。

     循环输出：可以在{{ }}内，通过each语法循环数组，当前循环的索引使用$index进行访问,当前的循环项使用$value进行访问。

    过滤器： 本质就是一个function处理函数

    上一个输出作为下一个输入 

     

     定义过滤器的基本语法： 如下代码涉及到上面全部知识

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>Document</title>
    9.   <!-- 1. 导入模板引擎 -->
    10.   <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
    11.   <script src="./lib/template-web.js"></script>
    12.   <script src="./lib/jquery.js"></script>
    13. </head>
    14.  
    15. <body>
    16.  
    17.   <div id="container"></div>
    18.  
    19.   <!-- 3. 定义模板 -->
    20.   <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 ,同时不能让type="text/javascript"，这默认表示模板更加javascript解析-->
    21.   <script type="text/html" id="tpl-user">
    22.     <h1>{{name}}    ------    {{age}}</h1>
    23.     {{@ test}}
    24.  
    25.     <div>
    26.       {{if flag === 0}}
    27.       flag的值是0
    28.       {{else if flag === 1}}
    29.       flag的值是1
    30.       {{/if}}
    31.     </div>
    32.  
    33.     <ul>
    34.       {{each hobby}}
    35.       <li>索引是:{{$index}}，循环项是:{{$value}}</li>
    36.       {{/each}}
    37.     </ul>
    38.  
    39.     <h3>注册时间：{{regTime | dateFormat}}</h3>
    40.   </script>
    41.  
    42.   <script>
    43.     // 定义处理时间的过滤器
    44.     template.defaults.imports.dateFormat = function (date) {
    45.       var y = date.getFullYear()
    46.       var m = date.getMonth() + 1
    47.       var d = date.getDate()
    48.  
    49.       return y + '-' + m + '-' + d
    50.     }
    51.  
    52.  
    53.     // 2. 定义需要渲染的数据
    54.     var data = { name: 'zs', age: 20, test: '
      测试原文输出
      '      , flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }
    55.  
    56.     // 4. 调用 template 函数
    57.     var htmlStr = template('tpl-user', data)
    58.     console.log(htmlStr)
    59.     // 5. 渲染HTML结构
    60.     $('#container').html(htmlStr)
    61.   </script>
    62. </body>
    63.  
    64. </html>

      二 正则表达式

    (1)正则的exec函数与提取分组

    基本语法：

    exec(函数用于检索字符串中的正则表达式的匹配。
    如果字符串中有匹配的值,则返回该匹配值,否则返回null。

    RegExpObject.exec(string)

    示例代码：

    1. var str = 'hello'
    2. var pattern=/o/
    3. //输出的结果["o", index: 4, input: "hello", groups: undefined]
    4. console.log(pattern.exec(str))

    正则表达式中()包起来的内容表示一个分组，可以通过分组来 ,示例代码如下:

    1.   var str = '
      我是{{name}}
      '
    2.     var pattern = /{{([a-zA-Z]+)}}/
    3.     var result = pattern.exec(str)
    4.     console.log(result)
    5.     /*输出：
    6.     (2) ["{{name}}", "name", index: 7, 
    7.     input: "
      我是{{name}}
      "
    8.     , groups: undefined]*/

    （2）字符串的replace函数

    replace()函数用于在字符串中用一些字符替换另一 些字符, 语法格式如下:

    var result = '123456' .replace ('123' ， 'abc') //得到的result的值为字符串'abc456'

    示例代码如下：

    1. var str = '
      我是{{name}}
      '
    2. var pattern = /{{([a-zA-Z]+)}}/
    3. var patternResult = pattern.exec(str)
    4. str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新宇符串
    5. //输出的内容是: <div>我是name</div>
    6. console.log (str)

    多次replace：

    1.  var str = '
      {{name}}今年{{ age }}岁了
      '
    2.     var pattern = /{{\s*([a-zA-Z]+)\s*}}/
    3.  
    4.     // 第一次匹配
    5.     var res1 = pattern.exec(str)
    6.     str = str.replace(res1[0], res1[1])
    7.     console.log(str)//输出<div>name今年{{ age }}岁了</div>
    8.  
    9.     // 第二次匹配
    10.     var res2 = pattern.exec(str)
    11.     str = str.replace(res2[0], res2[1])
    12.     console.log(str)//输出<div>name今年age岁了</div>
    13.  
    14.     // 第三次匹配
    15.     var res3 = pattern.exec(str)
    16.     console.log(res3)//null

     使用while循环replace

    1.  var str = '
      {{name}}今年{{ age }}岁了
      '
    2.     var pattern = /{{\s*([a-zA-Z]+)\s*}}/
    3.  
    4.     var patternResult = null
    5.     //当走完循环他会变成null，由于null转化成false，所以循环终止
    6.     while (patternResult = pattern.exec(str)) {
    7.       str = str.replace(patternResult[0], patternResult[1])
    8.     }
    9.     console.log(str)

     replace替换为真值：

    1.   var data = { name: '张三', age: 20 }
    2.  
    3.     var str = '
      {{name}}今年{{ age }}岁了
      '
    4.     var pattern = /{{\s*([a-zA-Z]+)\s*}}/
    5.  
    6.     var patternResult = null
    7.     while (patternResult = pattern.exec(str)) {
    8.       str = str.replace(patternResult[0], data[patternResult[1]])
    9.     }

    三 模板引擎的实现原理

    ①定义模板结构

    1.  
    2.   <script type="text/html" id="tpl-user">
    3.     <div>姓名：{{name}}div>
    4.     <div>年龄：{{ age }}div>
    5.     <div>性别：{{  gender}}div>
    6.     <div>住址：{{address  }}div>
    7.   script>


    ②预调用模板引擎

    1. <script>
    2.     // 定义数据
    3.     var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
    4.  
    5.     // 调用模板引擎
    6.     var htmlStr = template('tpl-user', data)
    7.  
    8.     // 渲染HTML结构
    9.     document.getElementById('user-box').innerHTML = htmlStr
    10.   </script>

    ③封装template函数

    1. function template(id, data) {
    2.   var str = document.getElementById(id).innerHTML
    3.   var pattern = /{{\s*([a-zA-Z]+)\s*}}/
    4.  
    5.   var pattResult = null
    6.   while (pattResult = pattern.exec(str)) {
    7.     str = str.replace(pattResult[0], data[pattResult[1]])
    8.   }
    9.  
    10.   return str
    11. }

    ④导入并使用自定义的模板引擎

     四 URL编码

    URL地址中，只允许出现英文相关的字母、标点符号、数字，因此,在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。
    URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
    URL编码原则的通俗理解:使用英文字符去表示非英文字符。

     浏览器提供了URL编码与解码的API,分别是:
    ●encodeURI()编码的函数
    ●decodeURI()解码的函数

    五 JSON  

    （1）JSON两种结构

    对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{ key: value, key: value, .. }的键
    值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、 数组、对象6种类型。
    数组结构:数组结构在JSON中表示为[]括起来的内容。数据结构为[ "java", "javascript", 30, true ... .
    数组中数据的类型可以是数字、字符串、布尔值、null. 数组、对象6种类型。
    （2）JSON语法注意事项
    ①属性名必须使用双引号包裹
    ②字符串类型的值必须使用双引号包裹
    ③JSON中不允许使用单引号表示字符串
    ④JSON 中不能写注释
    ⑤JSON的最外层必须是对象或数组格式（最外层可以使用单引号）
    ⑥不能使用undefined或函数作为JSON的值

    要实现从JSON字符串转换为JS对象，使用JSON.parse（）方法:

    1. var jsonStr = '{"a": "Hello", "b": "world"}'
    2.     var obj = JSON.parse(jsonStr)
    3.     console.log(obj)//{a:'Hello',b:'World'}

     要实现从JS对象转换为JSON字符串，使用JSON.stringify（）方法:

    1.     var obj2 = { a: 'hello', b: 'world' }
    2.     var str = JSON.stringify(obj2)
    3.     console.log(str)//{"a":"hello","b":"world"}
    4.     console.log(typeof str)//string

    六 封装自己的AJAX函数

    (1)定义options参数选项

    hm()函数是我们自定义的Ajax函数,它接收一个配置对象作为参数， 配置对象中可以配置如下属性:
    ●method 请求的类型
    ●url 请求的URL地址
    ●data 请求携带的数据
    ●success 请求成功之后的回调函数
    （2)处理data参数

    1. function resolveData(data) {
    2.   var arr = []
    3.   for (var k in data) {
    4.     var str = k + '=' + data[k]
    5.     arr.push(str)
    6.   }
    7.  
    8.   return arr.join('&')
    9. }

    (3)定义hm()函数

    在hm()函数中，需要创建xhr对象，并监听onreadystatechange事件:

    1. function hm(options) {
    2.   var xhr = new XMLHttpRequest()
    3.  
    4.   // 把外界传递过来的参数对象，转换为 查询字符串
    5.   var qs = resolveData(options.data)
    6. xhr.onreadystatechange = function () {
    7.     if (xhr.readyState === 4 && xhr.status === 200) {
    8.      //xhr.responseText是JSON字符串
    9.       var result = JSON.parse(xhr.responseText)
    10.       options.success(result)
    11.     }
    12.   }
    13. }

    （4）判断请求类型

    不同的请求类型，对应xhr对象的不同操作,因此需要对请求类型进行if ... else ...的判断:

    1. if (options.method.toUpperCase() === 'GET') {
    2.     // 发起GET请求
    3.     xhr.open(options.method, options.url + '?' + qs)
    4.     xhr.send()
    5.   } else if (options.method.toUpperCase() === 'POST') {
    6.     // 发起POST请求
    7.     xhr.open(options.method, options.url)
    8.     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    9.     xhr.send(qs)
    10.   }

  • 相关阅读:
    如何在Postman中使用静态HTTP
    内网渗透之Windows反弹shell（二）
    Linux服务器——进程/线程池
    【强化学习】基础概念
    [‘1‘, ‘2‘, ‘3‘].map(parseInt) - js篇
    前端架构师之02_ES6_高级
    uni-app 实现每天弹一次指定内容
    Opengl ES之PBO
    K8S ingressv1.1.3 部署
    CSDN中调整图片和文本样式
  • 原文地址：https://blog.csdn.net/qq_62401904/article/details/126367395