Ajax练手Demo

时间 2019-11-11

标签 ajax demo 栏目 Ajax 繁體版

原文原文链接

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

原理

Ajax基本

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

HTTP相关知识

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

1. 创建TCP链接html

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

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

4. 服务器应答github

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

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

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");