#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的路径 , 另外一个是  路径;

    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基本语法

    

(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作为键,以其值作为键值;

        
tips:如果form里面存在type=file的input标签,即需要上传文件, enctype="multipart/form-data"; ------------------- eg:
用户名:
密码:
图片:
------------------- ------------------- (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:
            

(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的自定义标签,标签里面存放数据;
    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:
            
            

9、使用script实现跨域(170210)

(1)、概念:
    同源:同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同 
    跨域:不同源则该行为是跨域;

tips:在Ajax请求的时候,不允许跨域请求;

src属性和href属性有天生跨域的特性, 

(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属性中赋予和input的id相同的值,当点击了label中的元素时,就会触发对应id的表单元素;

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

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

你可能感兴趣的:(#AJAX)