VisualC++网络编程案例实战之简易网页浏览器.pptx

1、第6章 简易网页浏览器,在如今网络流行的时代中，大多数用户都在使用微软的IE浏览器浏览网页。从以前的静态网页到现在丰富多彩的动态网页，用户都是通过网页浏览器进行浏览。网页浏览器应该具有解析HTML代码或者其他语言（如ASP.NET等）网页的功能。本章将向用户介绍浏览器的工作原理以及设计流程等知识。,6.1 HTTP协议,6.1.1 HTTP基础,网页浏览其实就是浏览器，即客户端向服务器发送访问请求，然后服务器向浏览器发送请求内容的过程。浏览器的请求是以HTTP协议规定的方式发送的，然后再解析服务器发送给浏览器的内容。 HTTP（HyperText Transfer Protocol）超文本传输

2、协议，在互联网上应用的十分广泛，所有的WWW文件都遵守这个协议。而设计这个协议的最初目的，就是为了提供一个发送和接收HTTP页面的方法。,6.1.2 HTTP请求,通常情况下，设计过网页的用户都会知道客户端浏览器通过向服务器发送HTTP请求，服务器接受请求以后，将相应的网页内容传回客户端进行显示。这就是常见的C/S（客户端/服务器）网络模型。客户端程序负责解析服务器传回的网页内容。 在HTTP中，请求就是客户端通过向服务器发送消息要求提供一定的服务的过程。请求方式有两种：GET和POST。 注意：C/S模型是指网络通信的双方以特定角色进行数据传输。例如，从IE浏览器的角度来说，与网络服务器进行

3、数据传输是基于C/S模型，浏览器相当于客户端；而从用户的角度来说，相当于是使用IE这个浏览器工具与服务器进行数据传输，所以该种方式是B/S网络模型。,1.GET方式,GET请求方式在网页设计中，被用来在客户端和服务器之间交换数据。该数据包括网页HTML内容、ZIP或RAR等附件数据。当向服务器传送数据使用GET方式时，传送的数据会被显示在网络地址后面。例如，这个网址“/luntan/?fromuid=539356”，所表示的内容是客户端首先将变量fromuid赋予值539356，然后传送到服务器。 根据GET请求方式传送数据的特点，用户可以知道这种方式是不安全

4、的。因为，用户所要传送的数据都会被显式地连接在网址后面，连接符号是“？”。但是，在邮箱中下载附件时所用的方式是GET方式。,以GET方式向服务器传送数据的HTML代码如下： 代码在IE浏览器中运行的效果如图6.1所示。,图6.1 代码运行效果,用户在表单中输入姓名、地址、电话号码和邮箱，单击“保存”按钮，浏览器会将数据赋予变量并连接在所提交的网络地址后面进行连接服务器。客户端根据用户所填内容构造的网络地址是：/get.html/?name=liangcharset=ASCII 上述字段的意思是实体数据是文本格式的HTML文件，所使用的字符集为ASCII。如果服务器

5、返回一幅“JPG”或其他格式的图片到客户端，则该字段形式应如下： Content-type：image/jpg Content-type：image/bmp,（2）Content-Length标题 该标题必须与Content-type标题一起使用，用于表示实体数据的大小（以字节为单位）。其用法如下： HTTP/1.1 200 OK Date：Mon,21 Nov 2008 18:33:22 GMT Sever：Microsoft-IIS/6.0 Accept-Ranges：bytes Content-Type：image/bmp Content-Length：1024 Connection:c

6、lose 上述字段表示在服务器的响应消息中，实体数据是一幅bmp格式的位图，其大小为1024B。关于一些不常用的实体标题，如Content-Language、Last-Modified、Content-Base等标题的用法，请读者自行参考其他相关资料，本书不再赘述。,4.实体数据,前面已经提到，在服务器的响应消息中包括了消息头和消息体两部分。其中，消息体中包含了实体数据，并且在消息头和实体数据之间使用一个空白行进行分隔。,例如，客户端向服务器请求一个页面GET.html，服务器的响应消息格式如下： 01HTTP/1.1 200 OK/消息头 02Date：Mon,21 Nov 2008 18:

7、33:22 GMT 03Sever：Microsoft-IIS/6.0 04Accept-Ranges：bytes 05Content-Type：text/html 06Content-Length：1024 07Connection：close 08/用空白行进行分隔 09/消息体数据 10 11GET方式传送数据 12,13 14 16 17姓名： 18 19地址： 20 21电话号码： 22 23邮箱： 24 25 /数据头指针 float i;/实体数据的大小 char *messagebody; /实体数据指针 message;,这个结构体的用法很简单，例如利用该类获取响应消息的响应

8、码，代码如下： 01message msg;/结构体对象 02CString str;/存放响应码 03msg.messagehead=/输出格式化字符串，通知用户消息响应码,由于消息响应码位于数据头的第九位到第十一位，所以在代码中直接使用了响应码准确位置进行查找。如果用户在预先不知道的情况下，则必须利用指针进行移位查找。当然也可以使用CString类进行查找，也就是将常用的一些响应码存入文件中，然后使用函数CString:Find()与文件中的数据进行比较查找亦可。实现的方法有很多，具体方法视用户而定。,6.2 应用Microsoft Web控件实例,在MFC中，用户可以使用COM来实现简易

9、网络浏览器。使用COM进行编程，不但方便用户缩短开发周期，还可以使用户进一步加深理解面向对象编程的意义。,6.2.1 创建工程,建立基于对话框的应用程序，默认向导的所有设置，工程名设置为“htmlCtrl”。添加5个按钮控件、1个文本框控件、1个标签控件和一个web控件，界面设计及控件ID如图6.2所示。,图6.2 程序界面及控件ID,程序使用控件的ID及其关联的变量如图6.3所示。,图6.3 控件ID及其关联的变量,6.2.2 添加Microsoft Web控件,一般情况下，用户在VC中可以利用菜单向工程添加控件。如果该控件没有在程序所运行的系统中进行注册，那么需要用户利用相关工具、代码或者

10、Windows命令进行注册控件。控件添加成功，还需要为该控件生成相应的类。具体方法将在本节中讲述。 （1）通过选择Project | Add To Project命令添加COM对象，如图6.4所示。,图6.4 添加COM组件对象,（2）选择Components and Controls Gallery命令以后，会弹出插入组件对话框，如图6.5所示。,图6.5 插入组件对话框,（3）双击第一个文件夹，找到Microsoft Web Browser组件并单击Insert按钮弹出一个询问对话框，直接单击“确定”按钮。这样，用户就可以将Web组件插入到工程中。,（4）将Web组件添加到工程中，需要用户

11、为该组件生成一个相应的类。在弹出的配置类对话框中，用户可以修改组件类的名称、头文件名等。在本工程中，使用默认的类名CWebBrowser2以及文件名webbrowser2.h，如图6.6所示。,图6.6 配置类对话框,用户将新建类的信息修改完毕以后，单击OK按钮，返回到VC主界面，可以在界面左侧的ClassView中查看新添加类的声明和定义。 注意：如果用户添加的COM组件没有在系统中注册，则需要用户通过相关工具或者代码注册组件，关于此方面的内容请读者参考有关动态链接库的书籍。,6.2.3 输入地址，载入网页,双击“跳转”按钮，添加消息响应函数OnGoto()，代码如下： 响应函数首先获取用户

12、在文本框中输入的网址，然后调用CWebBrowser2类的成员函数Navigate()实现网页的加载。,在WebBrowser2.cpp文件中其函数原型如下所示： void CWebBrowser2:Navigate( LPCTSTRURL, VARIANT*Flags, VARIANT*TargetFrameName, VARIANT*PostData, VARIANT*Headers ),6.2.4 网页导航,分别双击“上一页”、“下一页”和“刷新”按钮添加消息响应函数。如下： 响应函数均调用CWebBrowser2类的成员函数实现了网页的导航。编译运行程序，运行效果如图6.7所示。,图6

13、.7 程序运行效果,用户使用COM组件对象进行编程，可以实现程序中一些复杂的功能或者界面。在本节中，向用户介绍了在工程中使用Microsoft Web浏览器控件访问网页时，需要用到的控件类属性与方法，并且举例说明了一些较常用的CWebBrowser2类函数。关于该类的其他功能函数，用户可以参考MSDN。,6.3 应用CHtmlView实例,CHtmlView类在MFC中是专门用来显示网页的视图类。通常情况下，用户只需将该类作为视图类的父类，便可以调用其类中的函数方法进行网页的显示以及刷新等功能。下面，将向用户介绍该类中部分函数的作用以及使用方法。,如果用户在工程中需要实现连接并打开网页，那么调

14、用该类中的函数Navigate2()，便可以实现这个功能。其原型如下： void Navigate2(LPCTSTR lpszURL, DWORD dwFlags = 0, LPCTSTR lpszTargetFrameName = NULL, LPCTSTR lpszHeaders = NULL, LPVOID lpvPostData = NULL, DWORD dwPostDataLen = 0 ); 该函数的作用是连接并打开指定网页。其中，参数lpszURL为将要打开的网页地址，其他参数均为NULL。例如，用户需要打开地址为“”的网页，则将参数lpszURL设置为该地址即可。,代码如下：

15、 CHTML1View: Navigate2(,0,NULL); 上面的代码运行之后，将在工程视图中打开并显示地址为“”的网页内容。当用户浏览网页时，可以使用该类中提供的刷新功能获取更新后的当前网页内容，也可以在工程中查看已经浏览过的网页等。,6.3.1 创建工程,建立基于单文档的应用程序，命名为htmlMFC，在向导第4步中选中Internet Explorer ReBars单选按钮，如图6.8所示。,图6.8 向导单选按钮选择,在向导第6步选择CHtmlMFCView的父类为CHtmlView，如图6.9所示。,图6.9 视图类父类选择,注释掉向导在CHtmlMFCView类的OnInit

16、ialUpdate()函数中自动添加的导航代码： 接着需要为工程添加资源“对话框”和“工具栏”。,1在工具栏上显示的对话框,在工程中已经预先添加了ID为IDR_MAINFRAME的对话框，将组合框与按钮放置到对话框面板上，最终界面如图6.10所示。,图6.10 界面效果,界面中各个控件ID以及属性如表6.2所示。,表6.2 控件ID及其属性,2. 工具栏,修改工程向导自动创建的工具栏，如图6.11所示。,图6.11 自定义工具栏,从左至右按钮的ID分别为ID_LAST、ID_NEXT和ID_REFRESH，表示“后退”、“前进”和“刷新”,6.3.2 输入地址，载入网页,在CMainFrame

17、类中添加“跳转”按钮的消息响应函数OnGoto()，代码如下： 响应函数实现了获取用户在地址组合框中输入的网址，并在客户区显示网址对应的网页。GetActiveView()函数用来在CMainFrame类中获取View窗口的指针，调用网页视图类的成员函数Navigate2()实现网页的加载。,在CMainFrame类中要想使用CHtmlMFCView还需要在MainFrm.cpp文件中添加文件包含命令如下： #include HtmlMFCView.h 在HtmlMFCView.cpp文件中添加文件包含命令如下： #include HtmlMFCDoc.h,6.3.3 网页导航,添加工具栏按钮的消息响应函数，代码如下： 代码分别调用了网页视图类的3个成员函数，实现了网页导航