Ajax练手Demo

Posted 2020-10-14

基本原理梳理、简单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");

 

链接

• 参考：《JS高程》Chapter 21
• GitHub：Ajax Demo
• Appserv: Appserv的使用 - 背包出发- 博客园