#AJAX

1、AJAX基本组成（170204）

（1）、Ajax，异步请求，实现页面的局部刷新；
    客户端（Client）：前端，iOS，安卓；
    服务器（Server）：服务器集群；
            系统：Windows Server、linux（常用）；
            作用：提供数据，存储数据；
（2）、URL:
    基本概念:
            •   URL 的全称是 Uniform Resource Locator（统一资源定位符）
            •   通过 1 个 URL，能找到互联网上唯一的 1 个资源
            •   URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL
    URL格式:
            •   基本格式：协议头://主机地址/路径
                ◦   协议头：不同的协议，表示不同的资源查找及传输方式
                ◦   主机地址：存放资源主机的 IP 地址（域名）
                ◦   路径：资源在主机中的具体位置

HTTP协议

http，Hypertext Transfer Protocol，超文本传输协议；

请求

请求行：写明了请求方式（get/post）和请求路径（url）；
请求头：关键，包含了Content-type等信息，
            客户端环境描述、客户端请求的主机地址信息、
            客户端所能接收的数据类型，Accept:text/html；

请求体：请求方式为get时其请求体为空，post时请求体里存放了需要传输的数据，例如需要上传的数据；
    tips：post需要设置请求头，get不需要设置；

响应

响应行/状态行：写有状态码和http版本号；
            HTTP协议版本，状态码，状态码英文名称；

响应头：Content-type，记录了响应体中返回数据的文件格式；
响应体：服务器返回的数据，格式为JSON或XML；
    Content-Type:text/html;
                text/css;
                text/xml;
                text/html;
        tips：这些Content-type都统称称为MIME类型；

Wamp配置

w:windows,
a:apache,
m:MySQL,
p:php

    C/S架构，Client/Server，客户机/服务器；
    B/S架构，Browser/Server，浏览器/服务器；

目的:为了能让我们在浏览器中输入域名的时候,也能访问我们服务器的资源

步骤:
    0.配置apache服务器根目录；
        目的:浏览器中输入 127.0.0.1 访问的不再是wamp安装目录下C:\wamp\www 这个里面的资源,让其访问我们自己的资源；

        更改\apache\Apache2.2.21\conf 目录下面的 httpd.conf 文件,
            改其中两个地方,一个是 DocumentRoot的路径 , 另外一个是 <Directory/> 路径；

    1.开启虚拟主机辅配置，在httpd.conf 中找到 Virtual hosts,去掉第二句前面的#号注释，开启httpd-vhosts虚拟主机模块；

    2.配置虚拟主机，打开conf/extra/httpd-vhosts.conf ；
        分别修改以下三项:
            DocumentRoot "在浏览器中输入域名之后访问的文件夹路径"；
            ServerName "自己配置的域名"；
            ServerAlias "www.自己配置的域名.com"；
        其它项不需要修改

    3.修改本机DNS（hosts）文件
        打开C:\Windows\System32\drivers\etc\hosts(目录是固定的)进行修改

    tips：配置文件修改之后必须要重启wamp服务器，配置才能够生效，否则将会出错；

2、http通信

URL:Uniform Resource Locator;
HTTP:Hypertext Transfer Protocol;
AJAX:Asynchronous JavaScript And XML;

URL:
    （1）、基本概念:
            URL 的全称是 Uniform Resource Locator（统一资源定位符）；
            通过 1 个 URL，能找到互联网上唯一的 1 个资源；
            URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL；

    （2）、URL格式:
            基本格式：协议头://主机地址/路径
                协议头：不同的协议，表示不同的资源查找及传输方式；
                主机地址：存放资源主机的 IP 地址（域名）；
                路径：资源在主机中的具体位置；

HTTP：
    （1）、作用：规定了客户端与服务器数据的传输格式，一般有XML和JSON；
        让客户端和服务器能有效地进行数据沟通；
        HTTP 协议是网络编程使用最为广泛的协议；

        · https协议，对页面进行了加密，相比http协议加载速度更慢；
    
            旧版本：http 0.9、1.0；
            现通用：http 1.1；

    （2）、HTTP协议特点
        简单快速：因为HTTP协议简单，所以 HTTP 服务器的程序规模小，通信速度快；
        灵活：HTTP 允许传输任意类型的数据；

        HTTP 0.9 和 1.0 使用非持续连接
            限制每次连接只处理一个请求，服务器对客户端的请求做出响应后，立刻断开连接，这种方式可以节省传输时间；

        HTTP 1.1 使用持续连接
            不必为每个web对象创建一个新的连接，一个连接可以传送多个对象；

        tips:持续连接并非连接上就不会断开，http1.1在客户端与服务器连接的时候，有一个时间戳，
        当计时结束的时候，客户端仍然没有新的操作发送到服务器，连接就会自动断开；

    tips：一个url代表了互联网上唯一的一个资源，域名解析控制在政府手中；

Request

请求（Request）：客户端向服务器索取数据的一种行为；
HTTP协议规定：一个完整的由客户端发给服务器的 HTTP 请求 需要包含以下内容：

     （1）、请求行：指定请求方法（GET/POST）、请求资源路径，以及 HTTP协议版本，/表示访问根目录；
                eg：
                   GET / HTTP/1.1

            tips:也称为请求报文行。

     （2）、请求头：对客户端的环境描述、客户端请求的主机地址等信息
                请求头中至少包含，客户端要访问的服务器主机地址；
                        eg:
                            Host: m.baidu.com
                   
                请求头中还可以包含，客户端的类型，客户端的软件环境
                        eg:
                            User-Agent: iPhone AppleWebKit

                客户端所能接收的数据类型：   Accept: text/html, */*
                客户端的语言环境：       Accept-Language: zh-cn
                客户端支持的数据压缩格式：   Accept-Encoding: gzip
                访问结束后，是否断开连接：   Connection: Close
                
    （3）、请求体(可选)：客户端发给服务器的具体数据，例如要上传的文件数据

        请求格式
            每一项请求信息末尾使用 \r\n
            最后一个请求项末尾使用 \r\n\r\n 表示请求结束

    tips：get方式请求体为空，post方法请求体不为空；

Response

响应（Response）：服务器对客户端的请求做出的反应，一般指返回数据给客户端

HTTP协议规定：一个完整的 HTTP 响应包含以下内容：
    （1）、状态行：包含了HTTP协议版本、状态码、状态英文名称
                eg：请求成功
                    HTTP/1.1 200 OK

                eg：内容无变化
                    HTTP/1.1 304 Not Modified
            tips:一般的，响应状态行的作用在于调试；

    （2）、响应头：包含了对服务器的描述、对返回数据的描述
            服务器的类型：
                Server: Apache/2.4.10 (Unix) PHP/5.5.20
            返回数据的类型
                Content-Type: text/html
            返回数据的长度
                Content-Length: 660
            响应时间
                Date: Thu, 04 Jun 2015 19:31:50 GMT

            ETag(HASH值，用于检测本地资源和服务器资源是否一致)
                ETag: "294-4e1862f57e7c0"

    （3）、实体内容：服务器返回给客户端的具体二进制数据；

3、php基本语法

    <?php
        phpCodePushHere;
    ?>

（1）、echo "文本";
    将文本内容输出，仅限简单数据类型；
        复杂数据类型：var_dump(数组/对象)；
                    print_r(数组/对象)；

    tips：布尔型数据，true输出1，false没有内容输出；
            echo true;      //输出了一个1；
            echo false;     //什么也没有输出；

（2）、定义变量，       $变量名
        $name = "jack";
        $age = 20;

（3）、访问对象属性， $对象名->$属性名  

（4）、数组
    索引数组：$arr1 = array('1','2','3');
    关联数组：$arr2 = array(
                        'name'=>'rose',
                        'age'=>30
                    );
            var_dump(arr2);
    深度数组：一个数组作为另外一个数组的元素，相当于js中的二维数组；
        多个关联数组组成的索引数组；

4、XMLHttpRequest（170205）

XMLHttpRequest异步请求对象；
无论是前端、iOS、Android，只要是发送网络请求，基本都采用异步方式，因为同步的效率太低；

（1）、使用原生方式发送Ajax请求
    1、创建XHR对象
        var xhr = new XMLHttpRequest();
            tips：该对象是一个浏览器对象，用于局部刷新完成；
    
    2、发送请求
        请求行 xhr.open("get/post" , "url");
        请求头 xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
        请求体 xhr.send(data);

        tips：
            请求行中如果方式为get，
                xhr.open("get",url + data)，将需要发送的数据写在url的后缀上    ，url？name=zhangsan&pwd=123；
                xhr.setRequestHeader()可以不用设置，可以不用设置请求头；
                xhr.send(null)；
            
            请求行中如果方式为post，
                xhr.open("post","url")；
                xhr.setRequestHeader()需要设置；
                xhr.send(data)，data的值为一个对象；
    3、处理服务器的响应
        xhr.onreadystatechange = function(){
            //当服务器返回了数据的时候触发该事件；
        };
-------------------
        tips：返回的数据都存在了xhr对象中；
            xhr.status      服务器返回的状态码，200表示成功响应；
            xhr.readyState  异步对象状态码，4表示数据已经解析完成并可以使用；

        tips：服务器返回的状态码:
                1xx:消息
                2xx:成功
                3xx:重定向
                4xx:请求错误
                5xx:服务器错误
        tips：异步对象的状态码
                0:异步对象已经创建
                1:异步对象初始化完成,发送请求
                2:接收服务器返回的原始数据
                3:数据正在解析,解析需要时间
                4:数据解析完成,数据可以使用了
                
        tips:get方式主要用于获取数据，十分不安全，但是get具有缓存，效率快；
            post方式主要用于给服务器传递数据，相对安全，post没有缓存，相率慢；
        
            get方式将上传的数据存放在URL中，因此数据有长度限制；
            post将上传的数据放在请求体中，理论上没有限制，取决于服务器；
-------------------
（2）、form标签的ajax配合
        表单元素全部放在form标签中，在提交的时候将以表单元素的name作为键，以其值作为键值；

        <form action="表单提交后处理数据的服务器后台程序路径" 
                method="get/post" 
                enctype="application/x-www-form-urlencoded">
            <input type="text" name="age">
            <input type="text" name="name">
            <input type="submit">
        </form> 

        tips：如果form里面存在type=file的input标签，即需要上传文件，
        enctype="multipart/form-data";          
------------------- 
    eg:
        <form method="post" action="03-login.php" enctype="multipart/form-data">
            用户名:<input type="text" name="uname"><br>
            密码:<input type="text" name="pwd"><br>
            图片:<input type="file" name="picture"><br>
            <input type="submit" value="登录">
        </form>
-------------------
    
-------------------
（3）、php语法补充
    $_GET   从客户端以get方式发来的数据都保存在了$_GET变量中；
    $_POST  同理，post方式的数据存在了$_POST变量中；
        eg:
            var_dump($_GET);
-------------------
    $_FILES 上传的文件保存在该变量中；
        eg:
            move_uploaded_file($_FILES['picture']['tmp_name'],'images/jz1e.jpg');

        作用：移动上传的文件到指定的文件夹，并指定重命名；
            tmp_name保存到服务器中的临时名称，
            images/jz1e.jpg，表示保存到images文件夹，并重命名为jz1e.jpg；

    'Files' => 
            array
              'name' => string '啦啦啦 (2).jpg' (length=17)
              'type' => string 'image/jpeg' (length=10)
              'tmp_name' => string 'C:\wamp\tmp\php483C.tmp' (length=23)
              'error' => int 0
              'size' => int 186891
-------------------

    include "xxx.html"  在php中导入html页面；

        tips：注意，php代码必须在服务器环境下才能生效，没有服务器环境php代码是无法运行的，html页面中的php代码将会全部解析成注释；        

5、xml或json返回数据（170207）

服务器返回的数据通常有两种格式，json或xml；

    XML:Extensible Markup Language
    JSON:JavaScript Object Notation

XML常用于设置文件和游戏score的保存；
JSON 是网络上用来传输数据使用最广泛的数据格式，没有之一；

（1）、xml的解析需要前后台配合:
    1.后台在返回的时候,在响应头中设置Content-Type的值为 application/xml；
    2.前台异步对象在接收后台数据时,记得按照xml的方式来接收,xhr.responseXML,并且它返回的是一个object对象,内容是#document；
        eg:
            <?php
                header("Content-Type:text/xml;charset=UTF-8");
                echo file_get_contents('text_147_XML_Build.xml');
            ?>

（2）、js中解析/操作JSON：
    JSON.parse(json字符串); 将一个json格式的字符串解析成js对象；
    JSON.stringify(js对象); 将一个js对象转成一个json格式的字符串；
        eg:
            var result = JSON.parse(xhr.responseText);
            var resultStr = JSON.stringify(result);

（3）、JSON数据用xhr.responseText，
    XML数据用xhr.responseXML；

（4）、XML
    <?xml version="1.0" encoding="UTF-8" ?>
    下面写xml的自定义标签，标签里面存放数据；
    xml里面的标签可以自定义，但是尽量使用标签存储数据，而不用标签属性存储数据。

        eg:
            xhr.onreadystatechange= function () {
                if(xhr.status==200 && xhr.readyState==4){
                    var result=null;
                    var rType=xhr.getResponseHeader("Content-Type");
                    if(rType.indexOf("xml")){
                        result=xhr.responseXML;
                    }else if(rType.indexOf("json")){
                        result=JSON.parse(xhr.responseText);
                    }else{
                        result=xhr.responseText;
                    }
                }
                //在这里获取到的result，是一个XML文本对象
                callback(result);
            }

6、ajax封装

        function  ajax(obj) {   //异步请求封装
            var url = obj.url;
            var method = obj.method.toLowerCase();

            var data = obj.data; 
                //现在就是js对象了 {name:"zhangsan","pwd":123}
                //把上面的data，js对象拼接成键值对的字符串

            var success = obj.success;
        
            var finalData = pinjieData(data);
                //finalData最终的效果 name=zhangsan&pwd=123
        
        //1.创建xhr对象
            var xhr = new XMLHttpRequest();
        
            if (method=='get'){
                url = url + "?"+finalData;
                finalData = null;
            }
        
        //2.设置请求行
            xhr.open(method,url);
        
        // 如果是post请求,要设置请求头
            if (method=='post'){
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            }
        
        //3.发送
            xhr.send(finalData);
            
        //4.监听服务器返回的数据
            xhr.onreadystatechange = function () {
                if (xhr.status==200 && xhr.readyState==4){
                    var result = null;

                //获取返回的数据类型
                    var rType = xhr.getResponseHeader("Content-Type");

                    if (rType.indexOf('xml')!=-1){
                        result = xhr.responseXML;

                    }else if(rType.indexOf('json')!=-1){
                        // JSON.parse 的意思是 将 json格式的字符串
                        //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
                        //转成js对象

                        result = JSON.parse(xhr.responseText);

                    }else{
                        //当成普通的字符串去处理
                        result = xhr.responseText;
                    }
                    //将这里解析好的数据交给页面去渲染
                    success(result);
                }
            }
        }

7、jQuery的$.ajax()方法（170208）

eg:
    $.ajax({
        url:"",
        type:"get/post",
        data:"{}",
        success:function(){

        },
        error:function(){
        
        },
    })

    url :接口地址
    type :请求方式(get/post)
    timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
    dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
    data: 发送请求数据

    beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，
    例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
    success: function(){}，成功响应后调用
    error: function(){}，错误响应时调用
    complete: function(){}，响应完成时调用（包括成功和失败）

8、artTemplate模板引擎

（1）、原理：其本质是利用正则表达式，替换模板当中预先定义好的标签

    常用的模板引擎
        a)  ArtTemplate：https://github.com/aui/artTemplate  --  主要介绍
        b)  BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
        c)  velocity.js：https://github.com/shepherdwind/velocity.js/
        d)  Handlebars：http://handlebarsjs.com/
        
（2）、使用:
        a)  1、引入template-native.js
        b)  2、<% 与  %> 符号包裹起来的语句则为模板的逻辑表达式-js语句
        c)  3、<%= content %>为输出表达式

（3）、模版引擎单个对象处理和多个对象处理的差异:
        单个对象:直接将单个对象传递进去即可,到时候在模版中使用的就是单个对象中的属性

        多个对象:将数组包装成一个对象传递进去,到时候就可以在模版中使用对象的属性了,如{"items":数组}；

（4）、简洁语法
        引入template.js；
        <% %>改为{{}}即可，可以使用if语句，可以使用each遍历；

（5）、在script中，使用template方法可以获取到模板生成的代码；
    以简洁语法为例；
        eg:
            <script type="text/template" id="list_info_tpl">
                {{each result as v i}}
                <tr>
                    <td>{{i+1}}</td>
                    <td>{{v.tc_name}}</td>
                    <td>{{v.tc_roster}}</td>
                    <td>{{v.tc_birthday}}</td>
                    {{if v.tc_gender == 0}}
                        <td>男</td>
                    {{else}}
                        <td>女</td>
                    {{/if}}
                    <td>{{v.tc_cellphone}}</td>
                    <td data-id={{v.tc_id}}>
                        <a href="#teacherModal" data-toggle="modal">查 看</a>
                        <a href="./teacher_add.html">编 辑</a>
                        {{if v.tc_status == 0}}
                        <a href="javascript:;" data-status="{{v.tc_status}}">注 销</a>
                        {{else}}
                        <a href="javascript:;" data-status="{{v.tc_status}}">启 用</a>
                        {{/if}}
                    </td>
                </tr>
                {{/each}}
            </script>
            <script>
                var html = template("list_info_tpl" , info);
                    
        tips：info是一个对象，里面有个数组，数组名字叫做result，所以在模板中开头写的是each result as v i ，v、i分别代表了result里面的元素和索引；
            </script>

9、使用script实现跨域（170210）

（1）、概念:
    同源：同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同 
    跨域：不同源则该行为是跨域；

tips：在Ajax请求的时候，不允许跨域请求；

src属性和href属性有天生跨域的特性，<img> <script> <link> <a>；
script的src属性可以访问外链，一般通过该特性实现跨域。

（2）、原理:
    1.本质是使用script中src的天然跨域特性
    2.客户端,通过GET请求,url传递一个客户端的方法到服务器,
    服务器再返回这个方法的执行代码到客户端,最终在客户端进行调用执行；
    
    3.方法的执行本质是在客户端执行的
    eg:
        <script src="http://www.link.com?callback="function_Name"&date=date "></script>

（3）、采用jsonp实现跨域，需要和后台定义返回的数据格式，jsonp只能用get方式发送；
        返回的数据格式为
                eg: callback({
                        key:value,
                        key:value
                    })


tips：为什么跨域要在script的src中解决，而不是link的href中，那是因为script比起link，它能执行方法

tips：在ajax中,如果使用了dataType:jsonp,那么当前请求就和XMLHTTPRequest没有任何关系了，jquery自动采用script的src属性实现了跨域；

10、瀑布流

11、$.fn()

$.fn是所有jQuery对象的共同指向的方法库,
这就意味着,在这个方法库中添加方法,那么所有的jQuery对象都可以调用到---这就是所谓的jQuery插件

12、tips

（1）、表单元素label的用法
        <label for="xid"></label>
        <input id="xid">
    在label中的for属性中赋予和input的id相同的值，当点击了label中的元素时，就会触发对应id的表单元素；

（2）、$.extend
        eg:
            var deOption = {
                col:5,
                padding:20
            };
            deOption = $.extend(deOption,option);
                deOption代表了对象的默认值，option表示需要改变的值；

（3）、$.each(obj,[callback]);
        obj代表了需要遍历的对象或者数组；