前端背诵之ajax

客户端：客户自己，获取和消费资源的电脑
服务器：负责存放和对外提供资源的电脑。URL地址：同意资源定位符，包括通信协议，服务器名称和具体存放位置
通信过程：客户端请求服务器，服务器处理请求，服务器响应客户端
网页如何请求数据：请求数据资源，服务器处理数据请求，把数据响应给客户端

1.在网页中请求服务器的数据资源，用get和post请求
    var xhrObj = new XMLHttpRequest()
2.Ajax(Asnchronous Javascript And XML)(异步Javascript和XML)
    Ajax可以轻松实现网页与服务器之间的数据交互
3.jquery中发起ajax请求最常用的三个方法
$.get(url,[data],function(){});//拿数据,url必写 
     //[data]->{id:1}
$.post(url,[data],function(){});//提交数据  
     //[data]
$.ajax({
        type:'',//请求的方式
        url:'',//请求的url地址，
        data:'',//请求携带的数据
        success:function(res){ }//请求成功后的回调函数
    });//拿或提交数据
4.url地址称为数据接口，每个接口必须有请求方式。
5.接口文档：接口的说明文档，是调用接口的依据
接口名称(登录接口，获取图书列表接口)，接口url，接口调用方式，参数格式(名称，类型，是否必选，参数说明)，响应格式(数据名称，数据类型，说明)，返回实例
6.trim()//去除字符串两端的空格

---

    Form表单
    1.表单由三部分组成，表单标签、表单域、表单按钮
    form、input、button、
    2.action:'url';向何处发送表单数据，//页面会跳转action指定的地址
    3.target:在何处打开action URL//_self,_blank
    4.method:get/post提交数据到URL
    get适合少数的，简单数据。post比较安全，提交大量复杂，包含文件的数据
    5.enctype:发送表单数据前对数据进行编码
    application/x-www-form-urlencoded :编码所有字符
    multipart/form-data：在包含文件上传的表单一定用这个
    text/plain：少
    6.表单的同步提交：导致数据丢失，则用Ajax提交数据
    7.两种监听表单提交事件：
    1. $('#formal').submit(function(e){
        alert('')
    })
    2. $('#formal').on('submit',function(e){
        alert('')
    })
    8.快速获取表单的数据：serialize()
    $('#formal').serialize();
    //1.formal是form的id，2.每个input加上name，结果为键值对的方式，username = 用户名的值
    给input文本框好看的样子加class = "form-control";
    jquery对象转换为DOM对象调用--$('')[0];
    

---

      模板引擎：根据程序员指定的模板结构和数据，生成完整的html页面
      art-template：1.导入art-template.js,
      2.定义渲染的数据 
      3.定义模板，写在script里面，要指定
      <script type="text/html" id="tpl-user">
      4.调用template数据 template('tpl-user',data)
      <h1>{{name}}</h1>
      5.渲染html

      art-template的{{}}方法可进行变量输出、循环数组等操作，例如：{{obj.key}}/{{a?b:c}}/{{a||b}}
      1.原文输出语法：{{@ value}}渲染为html标签
      2.条件输出：{{if value}}需要的内容{{if}}、
      {{if vl}}需要的内容{{else if v2}}需要的内容{{/if}}
3.循环输出：{{$index}}是索引，{{$value}}是循环项
      {{each arr}}
      {{$index}}{{$value}}
      {{/each}}
      
      过滤器：本质就是一个function处理函数,修饰时间
      {{value | filterName}} 管道操作符//value提交给filerName函数处理后返回一个新的值
      template.defaults.imports.filterName = function(value){/*return处理的结果*/}
      举例:template.defaults.imports.dataFormat = function(date){
          var y = date.getFullYear()
          var m = date.getMonth()+1
          var d = date.getDate()

          return y + '-' + m + '-' + d
      }
      <div>{{regTime | dateFormat}}</div>
       var data ={ regTime: new Date()}

---

       正则与字符串操作:
       1.exec()函数用于检索字符串中的正则表达式
       如果字符串中有匹配的值，则返回该匹配值，否则返回null
       RegExpObject.exec(string)
       例如：
       var str ='hello';
       var pattern = /o/;
       console.log(pattern.exec(str));
       
2.分组：可提取自己想要的内容
       var str ='<div>我是{{name}}</div>';
       var pattern = /{{a-zA-Z}}/;
       console.log(pattern.exec(str));
       3.replace函数：用一些字符替换另外一些字符
       var str ='<div>我是{{name}}</div>';
       var pattern = /{{([a-zA-Z]+)}}/;
       var patternResult = pattern.exec(str)
       str.replace(patternResult[0],patternResult[1])
       4.多次replace：
       var str ='<div>{{name}}今年{{age}}岁了</div>';
       var pattern = /{{\s*[a-zA-Z]+)\s*}}/;
       var res1 = pattern.exec(str)
       str.replace(res1[0],res1[1])
       var res2 = pattern.exec(str)
       str.replace(res2[0],res2[1])
       5.用while循环replace
       var str ='<div>{{name}}今年{{age}}岁了</div>';
       var pattern = /{{\s*[a-zA-Z]+)\s*}}/;
       var patternResult = null;
       while(patternResult = pattern.exec(str)){
        str = str.replace(patternResult[0],patternResult[1])
       }
       console.log(str);
       6.replace替换为真值(自定义的值)
       var data = {name: '张三', age: 20 }
       var str ='<div>{{name}}今年{{age}}岁了</div>';
       var pattern = /{{\s*[a-zA-Z]+)\s*}}/;
       var patternResult = null;
       while(patternResult = pattern.exec(str)){
           str = str.replace(patternResult[0], data[patternResult[1]])
       }

---

实现简易的模板引擎：
       1.定义模板结构
       2.定义渲染的数据
       3.渲染HTML结构
       4.封装template函数

       XMLHttpRequest:请求服务器上的数据资源(ajax函数就是基于xhr对象封装)
一、1.发起get请求：创建xhr，调用open、send,监听onreadystatechange事件
       var xhr = new XMLHttpRequest()
       xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
       xhr.send()
       xhr.onreadystatechange = function(){//readyState请求状态 status响应状态
           if(xhr.readyState === 4 && xhr.status === 200){
               console.log(xhr.responseText);//服务器响应回来的数据
           }
       }
       2.了解readyState属性：表示当前ajax请求所处的状态
       DONE：ajax请求完成，数据完成/失败
       3.发起带参数的get请求：
       查询字符串：name=zs&age=20
       xhr.open('url?id = 1&bookname=西游记')
       等价于xhr.open('GET','url',{name:'zs',age: 20},function(){}) 
       4.url编码和解码
       url地址不允许出现中文，如必须中文则需要编码
       编码encodeURI(''),解码decodeURI('').

      

二、1.发起post请求:创建，调用open,设置Content-Type属性,调用send,监听onreadystatechange事件
       var xhr = new XMLHttpRequest()
       xhr.open('POST','http://www.liulongbin.top:3006/api/getbooks')
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
       xhr.send('')//将数据以查询字符串的形式提交给服务器
       xhr.onreadystatechange = function(){//readyState请求状态 status响应状态
           if(xhr.readyState === 4 && xhr.status === 200){
               console.log(xhr.responseText);//服务器响应回来的数据
           }
       }

       数据交换格式：服务器端和客户端之间的数据传输与交换的格式
       两种方式：
       1.XML：可扩展标记语言，传输和存储数据，不经常用
       2.JSON：作用是在计算机和网络之间存储和传输数据
       JavaScript Object Notation(JavaScript对象表示法)
       ——JSON是JavaScript对象和数组的字符串表示法，本质是字符串
       JSON包含对象和数组，
       对象结构：{"key":value},value可以是数字、"字符串"、布尔值、null、数组[""]、对象。
       数组结构：["","",30,true,{"name":"zs","age":"20"},[4,20]]
       ——JSON字符串转换为JS对象：JSON.parse()
       var obj = JSON.parse('{"a":"hello"}')//结果:{a:'hello'}
       JS对象转换为JSON字符串: JSON.stringify()
       var json = JSON.stringify({a:'hello'})//结果:{"a":"hello"}

       封装自己的ajax函数：itheima()
       1.定义options参数选项：
       2.处理data参数