Ajax练手Demo

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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");

 

链接

以上是关于Ajax练手Demo的主要内容,如果未能解决你的问题,请参考以下文章

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

SpringBoot-JdbcTemplate-Demo练手小案例(Eclipse)

AJAX相关JS代码片段和部分浏览器模型

[vscode]--HTML代码片段(基础版,reactvuejquery)

Javascript代码片段在drupal中不起作用

12mmaction2 行为识别商用级别X3D复现 demo实现 检测自己的视频 Expanding Architecturesfor Efficient Video Recognition(代码片段