【笔记】Ajax全接触（慕课）

一、Ajax概念介绍

    1. Ajax，即Asynchronous JavaScript and XML，异步的JavaScript和XML。Ajax不是某种编程语言，而是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
    
    2. 实现Ajax需要
    
        1）运用HTML和CSS来实现页面，表达信息；
        2）运用XMLHttpRequest和web服务器进行数据的异步交换；
        3）异步交换数据拿回来以后，根据数据，运用JavaScript操作DOM，实现动态局部刷新。
        
    3.XMLHttpRequest对象创建
    
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); // IE7+、Firefox、Chrome、Opera、Safari等
        } else {
            request = new ActiveXObject(*Microsoft.XMLHTTP*); // IE5、IE6 dms
        }
        
    4. HTTP请求
    
        1）HTTP是计算机通过网络进行通信的规则，专家们设计出HTTP主要使客户，也就是浏览器能够从服务器请求信息和服务。
        
        2）HTTP是一种无状态的协议，无状态指的是不建立持久的连接，也就是服务端不保留连接的相关信息。客户端向服务器发出请求，然后web服务器返回响应，接着连接就被关闭了，这个处理过程没有记忆。如果之后的处理需要之前的信息，就需要重新传递。
        
        3）一个完整的HTTP请求的过程，通常有七个步骤：
            a. 建立TCP连接
            b. Web浏览器向Web服务器发送请求的命令
            c. Web浏览器发送请求的头信息
            d. Web服务器做出应答
            e. Web服务器发送应答头信息
            f. Web服务器向浏览器发送数据
            g. Web服务器关闭TCP连接
            
        4）一个HTTP请求由四部分组成：
            a. HTTP请求的方法或动作，比如是GET还是POST请求
            b. 正在请求的URL，发出一个请求，至少要知道请求的地址
            c. 请求头，包含一些客户环境信息、身份验证信息等
            d. 清秋体，也就是请求正文，请求正文中可以包含客户提交的查询的字符串信息、表单信息等
            
        5）GET请求：
            a. 一般用于信息获取，进行查询操作，而不修改服务器的信息
            b. 使用URL传递参数（因此对任何人可见）
            c. 对所发送信息的数量有限制，一般在2000个字符
            POST请求：
            a. 一般用于修改服务器上的资源（一般用来从表单发送数据）
            b. 对发送信息的数量无限制
            
        5）一个HTTP响应由三部分组成：
            a. 一个用数字和文字组成的状态码，用来告诉客户端请求是成功或是失败
            b. 响应头，和请求头一样包含许多有用的信息，例如服务器类型、时间日期、内容类型和长度等
            c. 响应体，也就是响应正文
            
        6）HTTP响应的状态码由三位数字构成，其中首位数字定义了状态码的类型：
            a. 1XX：信息类，告诉客户端已经收到了请求，正在进一步的处理中
            b. 2XX：成功，用户请求已经被正确地接收，理解和处理
            c. 3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
            d. 4XX：客户端错误，也就是客户端提交的请求有错误，比如地址不存在。著名的404notfound，表示请求中所引用的文档不存在。
            e. 5XX：服务器错误，表示服务器不能完成对请求的处理
            
    5. XMLHttpRequest发送
        
        1）open(method, url, async); // 调用HTTP请求
            method: GET或POST
            url：请求的地址，可以是绝对地址或相对地址
            async：请求同步或异步。异步请求：true，默认为true，一般不填写。
            
        2）send(string);
            使用get请求时可以不填写或填写null，因为请求内容放在了URL末尾。使用post请求则需要将请求的内容填写到参数中。
            
        3）例子：
            request.open("POST", "create.php", true);
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置请求的头信息，告诉web服务器我们要发送一个表单，必须写在open与send之间。
            request.send("name=aa & sex=男");
            
    6. XMLHttpRequest取得服务器的响应
    
        1）responseText：获得字符串形式的响应数据
            responseXML：获得XML形式的响应数据
            status和statusText：以数字和文本形式返回HTTP状态码
            getAllResponseHeader()：获得所有的响应报头
            getResponseHeader()：获得响应中某个字段的值（当然要查询某个字段的值需要传入参数）
            
        2）readyState属性 在响应返回成功时得到通知
            a. 0：请求未初始化，open还没有调用。
            b. 1：服务器连接已经建立，open已经调用了
            c. 2：请求已经被接收，也就是服务器已经接收到头信息了
            d. 3：请求正在处理中，也就是服务器已经接收到响应主体
            e. 4：请求已经完成，响应已经就绪，也就是响应已经完成了
        
        3）监听readyState属性变化的方法：属性变化时触发onreadystatechange事件。
            例子：var request = new XMLHttpRequest();
                request.open("GET", "get.php", true);
                request.send();
                request.onreadystatechange = function () {
                    if (readyState == 4 && request.status == 200) {
                        // 做一些事情 request.responseText
                    }
                }

二、Ajax简单例子
    
    1. GET请求
    
        document.getElementById('search').onclick = function () {
            var request = new XMLHttpRequest();
            request.open("GET", "server.php?number=" + document.getElementById('keyword').value);
            request.send();
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        document.getElementById('searchResult').innerHTML = request.responseText;
                    } else {
                        alert("发生错误：" + request.status);
                    }
                }
            };
        };
        
    2. POST请求
    
        document.getElementById('save').onclick = function () {
            var request = new XMLHttpRequest();
            request.open("POST", "server.php");
            var data = 'name=' + document.getElementById('staffName').value
                    + '&number=' + document.getElementById('staffNumber').value
                    + '&sex=' + document.getElementById('staffSex').value
                    + '&job=' + document.getElementById('staffJob').value;
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 表示客户端提交给服务器的文本内容的编码方式是URL编码
            request.send(data);
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        document.getElementById('createResult').innerHTML = request.responseText;
                    } else {
                        alert("发生错误：" + request.status);
                    }
                }
            };
        };
        
三、JSON格式
    
    1. JSON基本概念 JSON本身只是文本信息的一种语法。
    
        1）JSON数据的书写格式是名称/值对，名称必须加引号，和值对用冒号分隔开来，如"name":"郭靖"。
        
        2）JSON的值可以是：数字（如123、1.23）、字符串（在双引号中）、逻辑值（true或false）、数组（在中括号中）、对象（在大括号中）、null。
        
        3）
        {       
            "staff":[
                {"name":"洪七公", "age":70},
                {"name":"郭靖", "age":35},
                {"name":"黄蓉", "age":30}
            ]
        }
        
    2. JSON解析
        
        1）eval 不仅解析JSON字符串，还执行JSON字符串中的方法。【危险】如用eval执行第三方数据，则有可能包含恶意代码。
            var jsondata = '{"staff":[{"name":"洪七公", "age":70}, {"name":"郭靖", "age":35}, {"name":"黄蓉", "age":30}]}';
            var jsonobj = eval('(' + jsondata + ')');
            alert(jsonobj.staff[0].name); // staff是一个数组
            
        2）JSON.parse() 会检查JSON字符串是否合法，如果JSON字符串中带有方法等不合法，则报错
            var jsondata = '{"staff":[{"name":"洪七公", "age":70}, {"name":"郭靖", "age":35}, {"name":"黄蓉", "age":30}]}';
            var jsonobj = JSON.parse(jsondata);
            alert(jsonobj.staff[0].name); // 结果弹出“洪七公”。
            
    3. JSON校验
        在线JSON校验工具jsonlint.com，校验语法错误。
        
四、JQuery中的AJAX

    1. jQuery本身提供了一个AJAX方法：jQuery.ajax([settings]); settings包括
        type：类型，POST或GET，默认为GET；
        url：发送请求的地址；
        data：是一个对象，连同请求发送到服务器的数据；
        dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断。一般采用json格式，可以设置为"json"；
        success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串；
        error：是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象。
        
    2. 示例：
    
        $(document).ready(function () {
            $("#search").click(function () {
                $.ajax({
                    type: "GET",
                    url: "server.php?number=" + $("#keyword").val(),
                    dataType: "json",
                    success: function (data) { // 对data已经做出了json解析
                        if (data.success) {
                            $("#searchResult").html(data.msg);
                        } else {
                            $("#searchResult").html("发生错误：" + data.msg);
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误：" + jqXHR.status);
                    }
                });
            });

            $("#save").click(function () {
                $.ajax({ // 大括号内实际为一个js对象
                    type: "POST",
                    url: "server.php",
                    dataType: "json",
                    data: {
                        name: $("#staffName").val(),
                        number: $("#staffNumber").val(),
                        sex: $("#staffSex").val(),
                        job: $("#staffJob").val()
                    },
                    success: function (data) { // 对data已经做出了json解析
                        if (data.success) {
                            $("#createResult").html(data.msg);
                        } else {
                            $("#createResult").html("发生错误：" + data.msg);
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误：" + jqXHR.status);
                    }
                });
            });
        });

五、跨域

        虽然也整理了一点笔记，但其实实在是没明白……因为关于后台，不是没讲就是讲得粗略，等我弄明白了再说吧。感觉早晚要学后台……