前言

  前面完成了页面的跳转、登录，很多时候不刷新页面就想刷新局部数据，此时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. DOM属性节点加其他节点的操作

     节点属性 nodeType 返回值为数值                 节点类型(nodeType)    节点名字(nodeName)    节点值(nodeValue)        元素节点 ...

  2. SimpleAdmin手摸手教学之：项目架构设计2.0

    一.说明 在SimpleAdmin1.0版本中,我将整体项目结构分为三大块,分别为架构核心.业务模块和应用服务.随着1.0版本的封版,回去再看我之前的项目架构,也暴露了一些问题,比如在1.0版本中,S ...

  3. python实现远程桌面

    项目旨在让大家理解远控软件的原理,通过远控桌面可以实现远程控制我们的电脑,更好更方便的管理电脑.文末将给出初始版的完整代码,需要使用到的其他工具也会有所说明.最终实现的效果就是只要用户点击了客户端的程 ...

  4. TypeScript必知三部曲（一）TypeScript编译方案以及IDE对TS的类型检查

    TypeScript代码的编译过程一直以来会给很多小伙伴造成困扰,typescript官方提供tsc对ts代码进行编译,babel也表示能够编译ts代码,它们二者的区别是什么?我们应该选择哪种方案?为 ...

  5. 关于安装Sqlyog出现的问题

    前言 这篇博客主要是为了分析一下我安装Sqlyog出现的一些问题,也请圈友们帮忙指正一下,我是不是成立冤大头.由于春节前我的电脑死机,我重装了系统,之后格式化了C盘,导致很多软件(之前都安装在C盘)需 ...

  6. 在 Rainbond 上使用在线知识库系统zyplayer-doc

    zyplayer-doc 是一款适合企业和个人使用的WIKI知识库管理工具,提供在线化的知识库管理功能,专为私有化部署而设计,最大程度上保证企业或个人的数据安全,可以完全以内网的方式来部署使用它. 当 ...

  7. Terraform 系列-Terraform 简介

    系列文章 Terraform 系列文章 前言 最近在使用 Terraform 来置备 OCI 的 Always Free Tier, 发现它非常好用.总结学习下:Terraform 的基础知识. 什么 ...

  8. python 高级函数补充

    补充几个高级函数 zip 把两个可迭代内容生成一个可迭代的tuple元素类型组成的内容 # zip 案例 l1 = [ 1,2,3,4,5] l2 = [11,22,33,44,55] z = zip ...

  9. java封装和关键字

    一.封装 封装:告诉我们如何正确设计对象的属性和方法 对象代表什么,就得封装对应的数据,并提供数据对应的行为 封装的好处: 让编程变得很简单,有什么事,找对象,调方法 降低学习成本,可以少学,少记,或 ...

  10. 原来Spring能注入集合和Map的computeIfAbsent是这么好用！

    大家好,我是3y,今天继续来聊我的开源项目austin啊,但实际内容更新不多.这文章主是想吹下水,主要聊聊我在更新项目中学到的小技巧. 今天所说的小技巧可能有很多人都会,但肯定也会有跟我一样之前没用过 ...