Ajax练手Demo

基本原理梳理、简单Ajax应用。

原理

Ajax基本

Ajax：异步JS与XML
同步、异步。
XMLHttpRequest对象作为客户端与服务器的中间媒介对象，实现Ajax。

HTTP相关知识

HTTP是无状态协议，不建立持久的信息，不在服务器保留信息。即，本次请求得到响应后，再次请求需要重新建立连接。
HTTP请求和相应的基本流程：

1. 建立TCP连接

2. Web浏览器向Web服务器发送请求命令。

3. Web浏览器发送请求头信息

4. 服务器应答

5. 服务器发送应答头信息

6. 服务器向浏览器发送数据

7. 服务器关闭TCP连接

HTTP请求基本流程：

1. 请求的方法或者动作：GET or POST

2. URL

3. 请求头。客户端的环境、身份信息等。

4. 请求体。待处理的信息。查询字符串或者表单信息。

注：请求头和请求体中间有空行，表示请求头结束、请求体开始。

HTTP响应基本流程

1. 状态码：用数字或者文字，表示请求成功与否。

1XX	信息类。收到请求处理。
2XX	成功。
3XX	重定向。请求未成功。
4XX	客户端错误。如请求URL不存在：404 NOT FOUND
5XX	服务器错误。

2. 响应头：对应请求头。表示服务器信息。

3. 响应体：响应正文。

XMLHttpRequest（XHR）使用流程

基本按照HTTP请求、响应流程进行实现。当然侧重点在客户端这边。
XHR实例化。注意能力检测：在IE6之前的版本（new ActiveXObject(version)）、IE新版和一般浏览器（new XMLHttpRequest()）之间考虑。
XHR发送请求

1. open(method, url, async)：请求方法、url、异步与否。

2. setRequestHeader()：自定义头部信息，可选。按照HTTP请求流程，在open和send方法间。

3. send(string)：一般GET方法将信息附加到url后，所以这里string为null；而POST通常需要string。

XHR取得响应

1. readystatechange事件的监听一般放在open()方法之前。

2. 同步请求一般监听：responseText，responseXML，status/statusText（对应上面提到的状态码）、getResponseHeader()/getAllResponseHeader()

3. 异步请求除了监听上述的属性或者方法之外，还应该结合readystatechange事件，考虑readyState属性。

0	请求初始化、open未调用
1	TCP连接建立、open已经调用
2	请求已经接收、受到头信息
3	处理中、收到主体
4	请求已完成、响应就绪、响应完成。

确保请求、响应顺利后，可以对数据进行处理。

简单应用

描述

进行两个HTTP请求
查询员工信息，通过输入员工的编号进行查询。服务器进行相应处理（如果输入为空、如果输入编号不存在、如果输入编号存在，返回相应的信息--responseText）
创建员工信息，输入员工姓名、编号、性别、职位等等。服务器进行相应处理（如果没有输入完全、创建成功，返回相应信息）

服务器端（PHP）

简单的语法和逻辑构造
本地部署一个Web服务器环境：用APPServ，具体用法参考文末链接。
对PHP进行测试：利用Fiddler，监听HTTP请求，模拟客户端提交进行请求。

页面显示（简单的HTTP、CSS）

构造表单，创建两个按钮：查询按钮、提交按钮。

Ajax与JS

JS实现Ajax。
两个按钮分别绑定onclick事件，对应GET和POST请求。
在事件中进行上面提到的Ajax的基本流程，提交（插入）创建的POST请求代码示意如下（暂定），其他具体代码见文末GitHub链接。
TIPS：在浏览器中F12打开控制台。选择Network可以追踪HTTP请求的一些信息，如请求头、响应头等等。

save.onclick = function(){
        var createResult = document.getElementById("createResult");
        var data = "name="+document.getElementById("staffName").value
                   +"&number="+document.getElementById("staffNumber").value
                   +"&sex="+document.getElementById("staffSex").value
                   +"&job="+document.getElementById("staffJob").value;
        var request = createXHR();
        request.onreadystatechange = function(){
            if(request.readyState === 4){
                if(request.status === 200){
                    createResult.innerHTML = request.responseText;
                }else{
                    alert("发生错误"+request.status);
                }
            }
        };
        request.open("POST","server.php",false);
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(data);
    }

相关知识

JSON

用于组织信息的语法，独立与语言之外。与XML相比，快、短，且JS有简单的解析和序列化方式，并可以比较方便的读取和编辑。
语法简单，采用名/值对的方式，具体语法参见《JS高程》Chapter 20章 JSON部分或者查阅文档。
JS中，解析JSON.parse()或者eval()，后者不安全；序列化JSON.stringfy()。
jsonlint.com：JSON在线校验工具。
应用在Ajax中，需要的更改：

　　1. 服务端：Content-type:application/json；将返回值调整成JSON的格式，设置必要的标志（如success:true/false）以供客户端进行逻辑处理。

　　2. 客户端：url指向新的PHP文件；对得到的响应数据进行解析：JSON.parse(responseText)；访问解析的对应字段，进行相关处理。

JQuery

详情参见《锋利的jQuery》Chapter 6，或者查阅文档。
jQuery本身支持Ajax和JSON：
记得引入JQ库，可以引入在线地址。

            $.ajax({
                type:"POST",
                url:"serverJSON.php",
                dataType:"json",
                data:{
                    name:$("#staffName").val(),
                    number:$("#staffNumber").val(),
                    sex:$("#staffSex").val(),
                    job:$("#staffJob").val()
                },
                success:function(data){
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }else{
                        $("#createResult").html("出现错误："+data.msg);
                    }
                },
                error: function(jqXHR){
                    alert("发生错误："+jqXHR.status);
                }
            });

跨域

代理：在一个公共服务器上调用另一个域的资源。
JSONP：常用于处理GET，语法简单，JQuery支持。可以理解成一个中间媒介，在服务器和客户端见做一个公共的约定处理：

　　1. 前端：dataType从“json”改为“jsonp”；添加属性jsonp：callback

　　2. 后端：$jsonp=$_GET["callback"]；修改返回值为$jsonp.("返回的数据")

　　3. 注意到“callback”就是双方约定的处理，需要保持一致。然后需要返回的数据前需要于这个约定的名称拼接。

XHR2（HTML5）

　　比较新的处理方式，在旧版本浏览器中支持较差。只需要在服务端添加代码：

//表示所有域名都可以访问此资源
header("Access-Control-Allow-Origin:*");
//表示支持的方法
header("Access-Control-Allow-Methods:POST,GET");

链接

posted @ 2017-11-16 12:05 nebulium 阅读(6222) 评论(1) 编辑收藏举报

刷新页面返回顶部

idealllllidiottttt

理想国