ajax：
  在页面不刷新的情况下，请求服务器局部更新页面的数据

同步：同一时刻只能做一件事，前一件事做完在做后一件。
异步：同一时刻做多事，【实现前后端的交互】
  XMLHttpRequest()
    请求报文：
      请求行：请求方式，请求url/协议
          如果是get请求，数据就在url后面拼接过去
            xhr.open("get","./路径?name=jack&age=18&a=99&b=ccc");
          如果是post请求：
             xhr.open("post",一个url);
      请求头：客户端发送给服务器的一些额外信息
      请求体：客户端传递给服务器的数据
              如果是get请求：
                xhr.send(null);
              如果是post请求就需要在send中传递 name=jack&age=18&gender=男
                   xhr.send("name=jack&age=18&a=99&b=ccc");
      

        ajax发送get请求
    异步对象的基本代码模式:（get请求）
       创建异步对象
           var xhr = new XMLHttpRequest();
       设置请求行：
           //url通常是一个php文件，可以返回信息
           //?给要传到后台的参数，并连接字符串
           xhr.open("get",一个url);
                 xhr.open("get", "./路径?name=jack&age=18&a=99&b=ccc");
       设置请求体：
        xhr.send(null);
        xhr.onreadystatechange = function() {
                 if (xhr.status == 200 && xhr.readyState==4) {
                   //获取返回文本
                   var str=xhr.responseText;
                   //在什么里显示后台传递过来的数据
                   xx.value=str;
                 }

        ajax发送post请求
          异步对象的基本代码模式:（post请求）
      创建异步对象
          var xhr = new XMLHttpRequest();
      设置请求行：
          //?给要传到后台的参数，并连接字符串
          xhr.open("post",一个url);
          xhr.setRequesHeader("Content-Type","application/x-www-form-urlencoded");   
      设置请求体：带键值对形式的数据
       xhr.send("name=jack&age=18&a=99&b=ccc");
        xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState==4) {
                  //获取返回文本
                  var str=xhr.responseText;
                  //在什么里显示后台传递过来的数据
                  xx.value=str;
                }

        ajax处理json数据
                 获取json数据格式并处理的方式：【不区分get还是post】
              if (xhr.status == 200 && xhr.readyState==4) {
                //获取返回文本
                var str=xhr.responseText;
                //将json文本解析为json对象
                var obj=JSON.parse(str);
                //在什么显示后台传递过来的数据
                xx.value=str;
              }

       
               
        ajax处理xml数据：
    获取xml数据格式并处理的方式：
      服务器端：
        header("Cotent-Type:application/xml;charset=utf-8);
      客户端：
        if(xhr.status==200&&xhr.readyState==4){
        获取返回xml文档对象
          var xmlObj=xhr.responseXML;
        dom常规操作
          var obj1=xmlObj.getElementById("dv");
          var obj2=xmlObj.querySelector("#dv2");
          var items=xmlObj.querySelectorAll("item");

        }

模板引擎：
  用户界面与业务数据分离
  用于生成特定的网页结构快
  渲染数据时，代替拼接字符串操作。



  对对象进行遍历，就可以取得
    例：
      title 对应的值 平凡之路
      var key="title";
      responseText="<%=" + key + "%>"; 等于  "<%=title%>"


      模板：
        <script type="text/template" id="navTemp">
      引入插件
        <script type="template-native.js"></script>
      数据结构动态生成
        var obj=[{}];
      调用模板引擎的函数，返回值为替换之后的动态结构
        var html = template(模板id,数据(对象));
          var html = template("navTemp",obj);

      简介语法：
        var data={"name":'jack',"age":18};
        <p>{{name}}</p>
        <p>{{age}}</p>

        var data1=[{"name":'jack',"age":18},{"name":'rose',"age":19}];
        此时需要包装为对象：
          var obj={"items":data1};
          {{each items as value key}}
          第一种写法：
            <p>{{items[key].name}}</p>
          第二种写法：
            <p>{{value.age}}</p>


ajax思路：
  function ajax(url,type,data,callback);
  function ajax(option);
  var $={
    ajax:function(option){},
    get:function(...){},
    opst:function(...){}
  }

  使用方法：
    $.ajax(){
      url:
      type:
      data:
      dataType://返回的类型，比如json,xml,text,html
      success:发送请求后
      timeout:
      beforeSend:function(){},发送前做什么事
      error:
      complete:
    }


同源：协议，域名，端口完全一样
跨域：不同源就是跨域，不允许进行dom操作，也不允许进行ajax请求。

  解决跨域请求：
    *允许所有其他的域向当前域发送请求。
      header("Access-Control-Allow-Origin:*");
    设置允许指定域发送请求：
      header("Access-Control-Allow-Origin:http://day7.com“）；
jsonp概念：
  客户端让服务器返回数据的同时，并告诉服务器，要调用哪个函数，服务器就返回调用该函数的形式，并且数据作为该函数调用的参数。


    开启跨域请求【需要前后端配合】(错误不存在，解决数据返回的问题)
    jquery中：
      前台：
        dataType:"Jsonp";
      后台：
        请求所传递过来的函数名称：
          $callback=$_GET["callback"];
        读取函数：
          $data=file_get_countents("nav.json");
        返回调用函数的形式，在这个函数中传递前台需要的数据（拼接字符串）：
          echo $callback.'('.$data.')';

    实现跨域请求：请求数据
      天然的跨域特性：
        href
        src
          利用script的标签src的天然跨域特性来实现跨域：返回值会以js语法解析
            
使用script标签的src属性的天然跨域特性：
    <script>
      function test(data){
        这里可以处理数据data
        例：console.log(data);
      }
    </script>
    目的：服务器拿数据回来，进行处理
      <script src="xx.php?callback=test"></script>


  对应服务器的代码（xx.php）
    <?php
      $callback=$_GET["callback];
      $data=某某数据;//可以是各种数据，可以来源于各种途径
      echo $callback.'('.$data.')';
    ?>


XMLHttpRequest2.0中的新特性：
  1）请求超时，自动触发：
      //设置超时时间（毫秒）
     xhr.timeout = 2000;
              xhr.ontimeout = function(){
                超时后做什么操作。
              }
  2）FormData对象：用于一次性收集form表单数据
    var formObj=document.querySelector("form表单");
    var formData=new FormData(formObj);
      //可以自由的追加参数
    formdata.append("address", "传智播客");
      //直接作为xhr.send参传递数
    xhr.send(formData);
    注：
      xhr此时只能是post请求
      不设置请求头
      formdata还可以追加数据：
        formData.append("key","value");
  3）监听文件上传进度：
    xhr.upload.onprogress = function(e) {
        //已经上传文件的大小
       var current = e.loaded;
        //要上传文件的大小
       var total = e.total;
        //根据这两个数据设置进度条的表现
       var percent = current / total * 100 + "%";
  测试大文件，需要去php.ini中修改
    post_max_size,
    upload_max_filesize

ajax：
  在页面不刷新的情况下，请求服务器局部更新页面的数据

同步：同一时刻只能做一件事，前一件事做完在做后一件。
异步：同一时刻做多事，【实现前后端的交互】
  XMLHttpRequest()
    请求报文：
      请求行：请求方式，请求url/协议
          如果是get请求，数据就在url后面拼接过去
            xhr.open("get","./路径?name=jack&age=18&a=99&b=ccc");
          如果是post请求：
             xhr.open("post",一个url);
      请求头：客户端发送给服务器的一些额外信息
      请求体：客户端传递给服务器的数据
              如果是get请求：
                xhr.send(null);
              如果是post请求就需要在send中传递 name=jack&age=18&gender=男
                   xhr.send("name=jack&age=18&a=99&b=ccc");
      

        ajax发送get请求
    异步对象的基本代码模式:（get请求）
       创建异步对象
           var xhr = new XMLHttpRequest();
       设置请求行：
           //url通常是一个php文件，可以返回信息
           //?给要传到后台的参数，并连接字符串
           xhr.open("get",一个url);
                 xhr.open("get", "./路径?name=jack&age=18&a=99&b=ccc");
       设置请求体：
        xhr.send(null);
        xhr.onreadystatechange = function() {
                 if (xhr.status == 200 && xhr.readyState==4) {
                   //获取返回文本
                   var str=xhr.responseText;
                   //在什么里显示后台传递过来的数据
                   xx.value=str;
                 }

        ajax发送post请求
          异步对象的基本代码模式:（post请求）
      创建异步对象
          var xhr = new XMLHttpRequest();
      设置请求行：
          //?给要传到后台的参数，并连接字符串
          xhr.open("post",一个url);
          xhr.setRequesHeader("Content-Type","application/x-www-form-urlencoded");   
      设置请求体：带键值对形式的数据
       xhr.send("name=jack&age=18&a=99&b=ccc");
        xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState==4) {
                  //获取返回文本
                  var str=xhr.responseText;
                  //在什么里显示后台传递过来的数据
                  xx.value=str;
                }

        ajax处理json数据
                 获取json数据格式并处理的方式：【不区分get还是post】
              if (xhr.status == 200 && xhr.readyState==4) {
                //获取返回文本
                var str=xhr.responseText;
                //将json文本解析为json对象
                var obj=JSON.parse(str);
                //在什么显示后台传递过来的数据
                xx.value=str;
              }

       
               
        ajax处理xml数据：
    获取xml数据格式并处理的方式：
      服务器端：
        header("Cotent-Type:application/xml;charset=utf-8);
      客户端：
        if(xhr.status==200&&xhr.readyState==4){
        获取返回xml文档对象
          var xmlObj=xhr.responseXML;
        dom常规操作
          var obj1=xmlObj.getElementById("dv");
          var obj2=xmlObj.querySelector("#dv2");
          var items=xmlObj.querySelectorAll("item");

        }

模板引擎：
  用户界面与业务数据分离
  用于生成特定的网页结构快
  渲染数据时，代替拼接字符串操作。



  对对象进行遍历，就可以取得
    例：
      title 对应的值 平凡之路
      var key="title";
      responseText="<%=" + key + "%>"; 等于  "<%=title%>"


      模板：
        <script type="text/template" id="navTemp">
      引入插件
        <script type="template-native.js"></script>
      数据结构动态生成
        var obj=[{}];
      调用模板引擎的函数，返回值为替换之后的动态结构
        var html = template(模板id,数据(对象));
          var html = template("navTemp",obj);

      简介语法：
        var data={"name":'jack',"age":18};
        <p>{{name}}</p>
        <p>{{age}}</p>

        var data1=[{"name":'jack',"age":18},{"name":'rose',"age":19}];
        此时需要包装为对象：
          var obj={"items":data1};
          {{each items as value key}}
          第一种写法：
            <p>{{items[key].name}}</p>
          第二种写法：
            <p>{{value.age}}</p>


ajax思路：
  function ajax(url,type,data,callback);
  function ajax(option);
  var $={
    ajax:function(option){},
    get:function(...){},
    opst:function(...){}
  }

  使用方法：
    $.ajax(){
      url:
      type:
      data:
      dataType://返回的类型，比如json,xml,text,html
      success:发送请求后
      timeout:
      beforeSend:function(){},发送前做什么事
      error:
      complete:
    }


同源：协议，域名，端口完全一样
跨域：不同源就是跨域，不允许进行dom操作，也不允许进行ajax请求。

  解决跨域请求：
    *允许所有其他的域向当前域发送请求。
      header("Access-Control-Allow-Origin:*");
    设置允许指定域发送请求：
      header("Access-Control-Allow-Origin:http://day7.com“）；
jsonp概念：
  客户端让服务器返回数据的同时，并告诉服务器，要调用哪个函数，服务器就返回调用该函数的形式，并且数据作为该函数调用的参数。


    开启跨域请求【需要前后端配合】(错误不存在，解决数据返回的问题)
    jquery中：
      前台：
        dataType:"Jsonp";
      后台：
        请求所传递过来的函数名称：
          $callback=$_GET["callback"];
        读取函数：
          $data=file_get_countents("nav.json");
        返回调用函数的形式，在这个函数中传递前台需要的数据（拼接字符串）：
          echo $callback.'('.$data.')';

    实现跨域请求：请求数据
      天然的跨域特性：
        href
        src
          利用script的标签src的天然跨域特性来实现跨域：返回值会以js语法解析
            
使用script标签的src属性的天然跨域特性：
    <script>
      function test(data){
        这里可以处理数据data
        例：console.log(data);
      }
    </script>
    目的：服务器拿数据回来，进行处理
      <script src="xx.php?callback=test"></script>


  对应服务器的代码（xx.php）
    <?php
      $callback=$_GET["callback];
      $data=某某数据;//可以是各种数据，可以来源于各种途径
      echo $callback.'('.$data.')';
    ?>


XMLHttpRequest2.0中的新特性：
  1）请求超时，自动触发：
      //设置超时时间（毫秒）
     xhr.timeout = 2000;
              xhr.ontimeout = function(){
                超时后做什么操作。
              }
  2）FormData对象：用于一次性收集form表单数据
    var formObj=document.querySelector("form表单");
    var formData=new FormData(formObj);
      //可以自由的追加参数
    formdata.append("address", "传智播客");
      //直接作为xhr.send参传递数
    xhr.send(formData);
    注：
      xhr此时只能是post请求
      不设置请求头
      formdata还可以追加数据：
        formData.append("key","value");
  3）监听文件上传进度：
    xhr.upload.onprogress = function(e) {
        //已经上传文件的大小
       var current = e.loaded;
        //要上传文件的大小
       var total = e.total;
        //根据这两个数据设置进度条的表现
       var percent = current / total * 100 + "%";
  测试大文件，需要去php.ini中修改
    post_max_size,
    upload_max_filesize