前言

  前面完成了页面的跳转、登录，很多时候不刷新页面就想刷新局部数据，此时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. 1 Android开发书籍

    不管你是Android菜鸟还是Android高手,一定能够找到一本适合自己阅读的书籍.下面为大家推荐8本书. <Android进阶之光> <Android进阶之光>详细并深入讲 ...

  2. ChatGPT 与 Midjourney 强强联手，让先秦阿房宫重现辉煌！

    Midjourney 是一款非常特殊的 AI 绘画聊天机器人,它并不是软件,也不用安装,而是直接搭载在 Discord 平台之上,所有的功能都是通过调用 Discord 的聊天机器人程序实现的.要想使 ...

  3. 51nod 1153 选择子序列

    51nod 选择子序列 这道题是\(Bunny\)学长在给我们的模拟赛中的一道题. 食用单调栈,处理每个数\(a_i\)左右第一个比自己大的数的下标\(left_i\),\(right_i\),并且建 ...

  4. VMWare无法从主机向虚拟机复制粘贴

    VMWare无法从主机向虚拟机复制粘贴 问题描述 无法在本机和虚拟机之间实现复制粘贴和文件拖到功能. 系统环境 本机 Windows10 虚拟机 Centos7 解决方法 多次尝试重新安装VMware ...

  5. 极简cfs公平调度算法

    1. 说明 1> linux内核关于task调度这块是比较复杂的,流程也比较长,要从源码一一讲清楚很容易看晕 2> 本篇文章主要是讲清楚cfs公平调度算法如何将task在时钟中断驱动下切换 ...

  6. GIL和池的概念

    1.GIL概念 1. 什么是GIL(为Cpython解释器) GIL本身就是一把互斥锁. 原理都一样. 都是让并发的线程同一时间只能执行一个 所以有了GIL的存在. 同一进程下的多个线程同一时刻只能有 ...

  7. .NET无侵入自动化探针原理和主流实现

    前言 最近,我在微信公众号和博客园分享了一篇关于.NET微服务系统迁移至.NET 6.0的故事的文章,引起了许多读者的关注.其中,许多人对基于 OpenTelemetry .NET 的观测指标和无侵入 ...

  8. SpringBoot应用集成微服务组件Nacos

    目录 springboot与微服务组件nacos Nacos服务快速启动 STS4 开发工具 Maven 环境配置 STS4开发工具引入Maven配置 Maven Repo配置阿里云镜像源 Sprin ...

  9. Ajax 方法返回值无效

    遇到错误为再ajax 中返回数据不起作用 原来是因为在阿贾克斯success中不能直接return 需要执行完再进行返回 以下代码为正确代码        function TestAction(id ...

  10. Java线程中断机制

    在阅读AQS源码以及juc包很多基于AQS的应用源码过程中,会遇到很多interrupted相关的方法,这里复习一下java线程中断相关. 要点:使用interrupt()中断一个线程,该方法只是标记 ...