ajax相关

1、HTTP 协议
1.1、作用
        规范了数据是如何打包的 以及 数据时如何传递的
1.2、Message 消息 / 报文
        Message 指的是在HTTP客户端与服务器间传递的数据块
        分类：
            1、Request Message : 客户端向服务器发送的请求消息
            2、Response Message : 服务器端根据客户端的请求消息，返回给客户端的响应消息
 1.3、请求消息(Request Message)
        1、请求起始行
            1、请求方法
                1、GET 
                    表示客户端向获取服务器上的资源(img/js/..)
                    特点：
                        1、无请求主体
                        2、依靠地址栏传递数据给服务器
                2、POST
                    表示客户端想传递数据给服务器
                    特点：
                        1、有请求主体
                3、PUT
                    表示客户端想把文件放到服务器上(禁用)
                    特点：
                        1、有请求主体
                4、DELETE
                    表示客户端想删除服务器上指定的文件(禁用)
                5、HEAD
                    表示只想获取指定的响应头
                6、CONNECT
                    测试连接
                7、TRACE
                    追踪请示路径
                8、OPTIONS
                    选项，保留以后使用... ...
            2、请求URL
            3、协议 和 版本号
                HTTP / 1.1
        2、请求头
            1、Host:localhost 
                告诉服务器请求哪一个虚拟主机
            2、Connection:keep-alive
                告诉服务器做持久连接
            3、User-Agent
                告诉服务器，客户端浏览器的类型
            4、Cache-Control:max-age=0
                告诉服务器缓存信息，max-age，即不缓存
            5、Accept-Language : zh-CN
                告诉服务器自己能接收的自然语言
            6、Accept-Encoding:gzip
                告诉服务器自己可以接收的压缩类型
            7、Referer: url
                告诉服务器请求来自于哪个页面
        3、请求主体
            Form Data :  是真正的请求主体
        注意：查询字符串
            Query String : 不算作请求主体的，是属于 URL 中的一个部分

1.4、响应消息(Response Message)
        1、响应起始行
            1、协议版本号
                HTTP / 1.1
            2、响应状态码
                1、1XX
                    提示信息
                2、2XX
                    200 ：服务器端成功响应所有的信息 OK
                3、3XX
                    需要客户端进行重定向
                    301 ：永久性重定向
                    302 ：临时重定向
                    304 ：Not Modified
                4、4XX
                    客户端请求错误
                    404 ：Not Found，请求资源不存在
                    403 ：Forbidden，没有访问权限
                    405 ：Method Not Allowed，请求方法不被允许
                5、5XX
                    服务器运行错误
                    500 ：服务器内部错误
                    501 ：没有实现
            3、原因短句
                对状态码的简单解释
                200 : OK
                404 : Not Found
                ... ...
        2、响应消息头
            1、Content-Type
                响应的主体类型，告诉浏览器，响应的数据时什么格式以及什么类型的
                取值：
                    1、text/plain
                        纯文本，告诉浏览器按纯文本的方式解析
                    2、text/html
                        文本与网页，告诉浏览器按html的格式解析内容
                    3、text/css
                        样式，告诉浏览器按 css 的方式解析
                    4、application/javascript
                        JS代码片段，按JS的方式运行数据
                    5、application/xml
                        按 xml 的方式解析
                    6、application/json
                        按 json 的方式解析
        3、响应主体
            由服务器端响应回来的数据
2、缓存
2.1、缓存的工作原理
        客户端可以自动保存已访问过得文档的副本，这些副本就是所谓的缓存

        当客户端再向同一URL发送请求时，那么就直接从缓存中将文件取出来，而不用再重新发送请求
2.2、优点
        1、减少了冗余的数据传输，节省流量
        2、缓解服务器带宽瓶颈的问题，服务器可以节省更多的带宽
        3、降低了对服务器的资源消耗和运行要求
        4、降低了由于远距离而造成的加载延迟
2.3、与缓存相关的消息头
        1、Cache-Control
            作用：从服务器将文档传来之时起，认为新鲜的秒数
            取值：秒数 60 / 3600 / ... ...
            如果取值为 0 / no-cache，表示每次都要重新刷新网页
        2、Expires
            明确指定缓存的过期时间,取值是格林尼治标准时间(GMT)
            Expires:Fri,25 Aug 2017,08:00:00 GMT
            Expires:0 表示不需要缓存
2.4、如何在网页中设置消息头
        在 meta 标记中完成消息头的设定：
            1、http-equiv ：指定消息头的名称
            2、content ：指定消息头对应的内容
        练习：
            设置网页的消息头Cache-Control,其值为 no-cache
        
        
            
            
        

3、AJAX
3.1、名词解释
        1、同步
            在一段时间内，只能做一个事情
            同步访问：在访问服务器时，客户端只能等待服务器的响应，不能做其它事情。用户体验非常的差
            代表场合：
                1、输入网址访问页面
                2、a标记的默认跳转
                3、submit按钮的表单提交
        2、异步
            在一段时间内，可以同时干多个事情
            异步访问：在向服务器发送请求时，不耽误用户在网页上做其它的操作
            代表场合：
                1、用户名的重复性验证
                2、聊天室
                3、股票走势图
                4、搜索建议(百度，京东，淘宝 的搜索框)
3.2、什么是AJAX
        Asynchronous Javascript And Xml
        异步的       JS         和  Xml

        本质：使用 JS 提供的 XMLHttpRequest 对象 异步的向服务器发送请求，并接受响应数据（格式是 xml(已过时)）
        AJAX中，服务器响应回来的是部分的数据而不是完整的页面，并且可以以无刷新的效果来更改页面中的局部内容

3.3、获取 AJAX核心对象 - XMLHttpRequest
        标准创建:var xhr=new XMLHttpRequest();
        IE8以下 : 
            var xhr=new ActiveXObject("Microsoft.XMLHttp");
        
        允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则 需要通过 XMLHttpRequest() 来创建

        var xhr; 
        //判断浏览器是否支持 XMLHttpRequest
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            //浏览器不支持 XMLHttpRequest
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        练习：
            1、创建 xhr 对象，并且将创建好的对象打印在控制台上观察结果
            2、将 创建 xhr 的步骤封装成一个函数
                1、在 common.js创建一个函数
                    function createXhr(){}
                2、函数体内
                    判断浏览器是否支持 XMLHttpRequest，根据结果创建 xhr 并且将 xhr对象 返回
                3、页面中创建一个按钮，点击按钮时，获取 xhr 对象，并打印在控制台上

3.4、XHR 的常用属性 和 方法(难点)
        1、open() - 方法
            作用：创建请求
            语法：open(method,url,isAsyn)
                1、method
                    string 类型
                    请求方式 ：get,post,... ...
                2、url
                    string 类型
                    请求地址
                3、isAsyn
                    boolean 类型
                    指定采用同步(false)还是异步(true)的方式发送请求
            练习：
                1、创建一个网页 getresponse.html ,在网页中创建一个按钮，点击按钮时，实现以下功能：
                    1、创建 / 获取 XHR 对象
                    2、创建一个请求，采用异步的方式，get的提交方法，向 response.php 发送一个请求
        2、readyState - 属性
            作用：表示 xhr 对象的 请求状态
            值：由 0 - 4 表示 5个状态
                0 : 请求尚未初始化
                1 : 已经打开到WEB服务器的连接，正在向服务器发送请求
                2 : 请求完成
                3 : 正在接收服务器端的响应
                4 : 接收响应数据成功
                注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。
        3、status - 属性
            作用：服务器的响应状态码
            值：
                只记住一个即可 200
                当 status 的值是 200的时候，表示服务器已经正确的给出所有的响应
        4、onreadystatechange - 事件
            作用：当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作。
            语法：
                xhr.onreadystatechange = function(){
                    //每当xhr.readyState的值，发生变化时，要执行的操作。

                    //判断 xhr.readyState 为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据
                    if(xhr.readyState == 4 && xhr.status == 200){
                        //可以接收响应回来的数据 
                        //responseText 属性，表示服务器响应回来的文本
                        var resText=xhr.responseText;
                    }

                }
        5、send() - 方法
            作用：发送\提交请求
            语法：send(body);
                body : 是请求主体
                没有请求主体的提交方式，body位置处，要写 null
                有请求主体的提交方式，body位置处，编写的就是请求主体的数据
3.5、发送异步请求的步骤
        1、创建 / 获取 XHR 对象
        2、创建请求 ：xhr.open()
        3、设置 xhr 的 onreadystatechange 事件
            判断readyState 以及 status 的值，并接收响应
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    xhr.responseText;
                }
            }
        4、发送请求:xhr.send();

    练习：
        创建一个页面06-ajax-exercise.html，创建一个按钮，点击按钮时，向 06-ajax-exercise.php 异步的发送一个请求，并将 响应回来的数据(欢迎光临) 显示在页面的一个div中

3.6、使用GET提交方式，发送请求数据
        在请求地址后，拼接请求参数(查询字符串)
        ...
        xhr.open("get","xx.php?name=value&name1=value1",true);
        ...

        ex:
        xhr.open("get","check.php?uname=zs&upwd=123",true);
        在 check.php 中，如何获取 uname 和 upwd 值?
        $uname=$_REQUEST["uname"];
        $upwd=$_REQUEST["upwd"];