前言

  前面完成了页面的跳转、登录，很多时候不刷新页面就想刷新局部数据，此时ajax就是此种技术，且是异步的。
  本篇实现网页内部使用js调用ajax实现异步交互数据。
  在js中使用 ajax是通过XMLHttpRequest来实现的。

 

Demo

  

下载地址

 

Ajax与XMLHttpRequest

Ajax

  Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
  Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用JavaScript向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，JavaScript可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

  • Ajax可使因特网应用程序更小、更快，更友好。
  • Ajax是一种独立于Web服务器软件的浏览器技术。
  • Ajax基于Web标准：JavaScript、XML、HTML与CSS，在Ajax中使用的Web标准已被良好定义，并被所有的主流浏览器支持。
  • Ajax用程序独立于浏览器和平台。

  Web应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。但是，因特网应用程序并不像传统的桌面应用程序那样完善且友好。 通过 Ajax，因特网应用程序可以变得更完善，更友好。

 

XMLHttpRequest

  XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件。该技术被许多网站使用，以实现快速响应的动态网页应用。例如：Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。
  XMLHTTP是AJAX网页开发技术的重要组成部分。除XML之外，XMLHTTP还能用于获取其它格式的数据，如JSON或者甚至纯文本。
  使用XMLHttpRequest来发送HTTP请求以实现网站和服务器之间的数据交换。
  XMLHttpRequest对象是Ajax的核心，它有许多的属性、方法和事件。

属性

readyState：当前状态

  当一个XMLHttpRequest对象被创建后，readyState属性标识了当前对象的状态。
  

responseText：响应文本

responseText属性包含客户端接收到的HTTP响应的文本内容。

  • readyState为0、1、2时：为一个空字符串；
  • readyState为3时：为还未完成的响应信息；
  • readyState为4时：为含完整的响应信息；

statusText：状态文本

  描述了HTTP状态代码文本，并且仅当readyState属性值为3或4时才可用。检测返回结果的判断就是：

if(readyState===4 && statusText===200)

{

	……

}

  如我们的Demo：
  

函数

open()：初始化请求

open(method, url, async, username, password)
  • 参数method：请求的类型，GET、POST、PUT、DELETE、HEAD类型，输入的时候使用大写；
  • 参数url：请求的资源地址，请求资源的web api地址；
  • 参数async：是否发送异步请求，true-异步请求，false-同步请求；
  • 参数username（可为空）：需要服务器验证访问用户时，设置username；
  • 参数password（可为空）：需要服务器验证访问用户时，设置password；

send()：发送请求

  调用open()方法后，再调用send()方法将请求发送。当open()方法中async参数为true（异步）时，在send()方法调用后立即返回，否则将会中断直到请求返回。

setRequestHeader()：设置头部信息

  设置请求的头部信息

getResponseHeader()：获取头部信息

  获取请求的头部信息

事件

  onreadystatechange：状态变化事件
  当readyState属性值发生改变时，就会触发onreadystatechang事件，代码中是依赖onreadystatechang进一步判断状态和状态文本来做处理。
  

 

使用XMLHttpRequest的步骤

步骤一：在脚本中实例化XHMLHttpRequest

var xhr = new XMLHttpRequest();

步骤二：初始化请求open()

xhr.open('GET','/checkState/data',true);

步骤三：发送请求

xhr.send();

步骤四：书写事件处理函数并判断状态和状态文本

xhr.onreadystatechange = function() {

	if(xhr.readyState === 4 && xhr.status === 200)

	{

		……

	}

}

步骤五：书写返回成功的js处理代码

document.getElementById("dt2").innerHTML = xhr.responseText;
 

Demo增量使用ajax交互过程

步骤一：准备代码模板

  准备之前的demo v1.3.0模板：
  

步骤二：新增checkState.html页面

  下面是新增定时获取和手动按钮获取得html：
  

步骤三：创建CheckStateRequestHandle处理

  新建了一个处理，特别是增加了对于ajax技术的路径处理
  

  

步骤四：将CheckStateRequestHandle接入

  
  

 

Demo源码

checkState.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>长沙红胖子Qt</title>

</head>

<body>

	<p><a>这里是检测状态Demo v1.4.0了</a></p>

	<p><a id="dt1">123.567</a></p>

	<p><a id="dt2">123.567</a></p>

	<p><a id="dt3">123.567</a></p>

	<p><button onclick="reset()">清空</button></p>

	<p><button onclick="getDt1()">获取</button></p>

	<script>

		function reset() {

			document.getElementById("dt1").innerHTML="---.---";

			document.getElementById("dt2").innerHTML="---.---";

			document.getElementById("dt3").innerHTML="---.---";

		}

		function getDt1() {

			var xhr = new XMLHttpRequest();

			xhr.open('GET','/checkState/data',true);

			xhr.send();

			xhr.onreadystatechange = function() {

				if(xhr.readyState === 4 && xhr.status === 200)

				{

					document.getElementById("dt1").innerHTML = xhr.responseText;

				}

			}

		}

	</script>

	<script>

		/* 定时获取dt2 */

		function getDt2() {

			var xhr = new XMLHttpRequest();

			xhr.open('GET','/checkState/data',true);

			xhr.send();

			xhr.onreadystatechange = function() {

				if(xhr.readyState === 4 && xhr.status === 200)

				{

					document.getElementById("dt2").innerHTML = xhr.responseText;

				}

			}

		}

		window.setInterval(getDt2, 1000);

	</script>

</body>

CheckStateRequestHandler.h

#ifndef CHECKSTATEREQUESTHANDLER_H

#define CHECKSTATEREQUESTHANDLER_H

#include "httprequesthandler.h"

using namespace stefanfrings;

class CheckStateRequestHandler : public HttpRequestHandler

{

public:

    CheckStateRequestHandler(QObject *parent = 0);

public:

    void service(HttpRequest& request, HttpResponse& response);

private:

    QTextCodec *_pTextCodec;

};

#endif // CHECKSTATEREQUESTHANDLER_H

CheckStateRequestHandler.cpp

#include "CheckStateRequestHandler.h"

#include "DataManager.h"

#include <QTextCodec>

#include <QApplication>

#include <QDebug>

#include <QDateTime>

//#define LOG qDebug()<<__FILE__<<__LINE__

//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__

//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()

//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")

#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")

using namespace stefanfrings;

CheckStateRequestHandler::CheckStateRequestHandler(QObject *parent)

    : HttpRequestHandler(parent)

{

    // 返回文本(我们需要在浏览器上看，所以将Qt内部编码都转成GBK输出即可，不管他本身是哪个编码）

    // WINDOWS: GBK  GB2312

    // LINUX  : urf-8

//    _pTextCodec = QTextCodec::codecForName("utf-8");

    _pTextCodec = QTextCodec::codecForName("GBK");

}

void CheckStateRequestHandler::service(HttpRequest &request, HttpResponse &response)

{

    QString str;

    QString path = request.getPath();

    LOG << path;

    if(path == "/checkState")

    {

        // 为了方便，开始单独加载html文件做处理

        QString filePath = QString("%1/html/checkState.html").arg(qApp->applicationDirPath());

        QFile file(filePath);

        if(!file.open(QIODevice::ReadOnly))

        {

            str = QString("The URL is wrong, no checkState.html [%1]").arg(filePath);

        }else{

            str = file.readAll();

            file.close();

        }

    }else if(path == "/checkState/data")

    {

        str = DataManager::getInstance()->getDt1Value();

    }else {

        response.setStatus(404,"Not found");

        str = "The URL is wrong, no such document.";

    }

    // 返回文本(我们需要在浏览器上看，所以将Qt内部编码都转成GBK输出即可，不管他本身是哪个编码）

//    QByteArray byteArray = _pTextCodec->fromUnicode(str);

    QByteArray byteArray = str.toUtf8();

    response.write(byteArray);

}
 

工程模板v1.4.0

  

Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递的更多相关文章

  1. Django开发笔记五

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承 定义base.html: <!DOC ...

  2. C#开发笔记之05-迭代器中的状态机（State Machine）到底是什么？

    C#开发笔记概述 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/961 访问. 状态机可以理解为实现了备忘录模式(仅作为 ...

  3. JSON(五）——同步请求中使用JSON格式字符串进行交互（不太常见的用法）

    在同步请求中使用JSON格式进行数据交互的场景并不多,同步请求是浏览器直接与服务器进行数据交互的大多是用jsp的标签jstl和el表达式对请求中的数据进行数据的渲染.我也是在一次开发中要从其它服务器提 ...

  4. python3开发进阶-Djamgo框架中的JSON和AJAX

    阅读目录 什么是JSON 什么是AJAX AJAX常见的应用情景 jQery实现AJAX AJAX请求如何设置csrf_token AJAX上传文件 补充Django内置的serializers 一. ...

  5. Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

  6. Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt.  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...

  7. Qt+MySql开发笔记：Qt5.9.3的msvc2017x64版本编译MySql8.0.16版本驱动并Demo连接数据库测试

    前言   mysql驱动版本msvc2015x32版本调好, mysql的mingw32版本的驱动上一个版本编译并测试好,有些三方库最低支持vs2017,所以只能使用msvc2017x64,基于Qt5 ...

  8. odoo开发笔记 -- 应用服务器&数据库服务器分开部署

    app+db在一台服务器: odoo.conf配置文件: db_host = False db_maxconn = 64 db_name = False db_password = 123456db_ ...

  9. Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小

    前言   上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小.   Demo演示 ...

  10. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

随机推荐

  1. 7.远程代码执行漏洞RCE

    远程代码执行漏洞RCE 1.RCE Remote Code Execute 远程代码执行 Remote Command Execute 远程命令执行 2.危害 窃取服务器的敏感数据.文件 对电脑的文件 ...

  2. 案例: 利用 Hugging Face 进行复杂文本分类

    Witty 与 Hugging Face 专家加速计划的成功案例 如果你对如何更快构建 ML 解决方案感兴趣,请访问 专家加速计划 登陆页面并通过 填写表单 联系我们! 业务背景 随着 IT 技术不断 ...

  3. 集合-LinkedHashMap 源码详细分析（JDK1.8）

    1. 概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题.除此之外,Linke ...

  4. Django后端 服务器找不到template(路径问题)

    Django后端 服务器找不到template(路径问题) 该代码在本地跑没有任何问题, 但是上传到服务器上报错找不到模板或者模板不存在. 看网页最下方报错(一定要看报错!!)显示路径有问题 问题原因 ...

  5. 在Kubernetes部署GitLab

    在Kubernetes部署GitLab 前置条件 已安装Helm工具已部署NFS自动创建PVC 使用HELM安装 [root@k8s-master01 ~]# helm repo add gitlab ...

  6. 自用纯C语言实现任务调度(可用于STM32、C51等单片机)

    前言   这个任务调度模块的实现是形成于毕设项目中的,用在STM32中,断断续续跨度2个月实现了一些基本功能,可能后面再做其他项目时会一点点完善起来,也会多学习相关知识来强化模块的实用性和高效性,毕竟 ...

  7. 在英特尔 CPU 上加速 Stable Diffusion 推理

    前一段时间,我们向大家介绍了最新一代的 英特尔至强 CPU (代号 Sapphire Rapids),包括其用于加速深度学习的新硬件特性,以及如何使用它们来加速自然语言 transformer 模型的 ...

  8. 一文搞懂JavaScript数组的特性

    前言 数组是几乎所有编程语言的基础语法,JavaScript因为语法特性,之前缺少一些集合类对象,对数组的使用就会更多一些,因此我们更需要理解数组知识. 然而大部分人对数组都已经非常熟悉了,所以本文将 ...

  9. Array.prototype.at。Arrat和 String 中的 at 方法

    一篇有关新 js 特性 at 方法的思考 入参只能是number 类型,允许入参有小数(按照 chrome DevTools Console 测试确实可以带小数) 有返回值,如果对应下标在实例中存在, ...

  10. docker启动mysql注意事项

    1.编码问题 登录mysql伪终端 mysql查看编码 show variables like 'character%'; 宿主机在conf.d中添加配置my.cnf文件 [client] defau ...