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

前言

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

Demo

在这里插入图片描述

下载地址

链接：https://pan.baidu.com/s/1tJMTPhIIyVE40qWxRWcmVA?pwd=1234

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

在这里插入图片描述

posted @ 2023-06-09 11:32 长沙红胖子Qt创微智科阅读(296) 评论(0) 编辑收藏举报

刷新页面返回顶部

红胖子(红模仿)

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

前言

Demo

下载地址

Ajax与XMLHttpRequest

Ajax

XMLHttpRequest

属性

readyState：当前状态

responseText：响应文本

statusText：状态文本

函数

open()：初始化请求

send()：发送请求

setRequestHeader()：设置头部信息

getResponseHeader()：获取头部信息

事件

使用XMLHttpRequest的步骤

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

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

步骤三：发送请求

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

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

Demo增量使用ajax交互过程

步骤一：准备代码模板

步骤二：新增checkState.html页面

步骤三：创建CheckStateRequestHandle处理

步骤四：将CheckStateRequestHandle接入

Demo源码

checkState.html

CheckStateRequestHandler.h

CheckStateRequestHandler.cpp

工程模板v1.4.0

公告