LWIP应用开发|Web开发技术

Web开发技术

1. HTML

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言, 但不是一种编程语言。HTML定义了网页的结构，HTML文档包含了HTML标签及文本内容。您可以使用HTML来建立自己的WEB站点，HTML运行在浏览器上，由浏览器来解析

其基本机构如下图所示
在这里插入图片描述
HTML体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

2. CSS

CSS是指层叠样式表 (Cascading Style Sheets)，其作用与功能如下示：

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<style type="text/css">
		p{
     
      
			font-size:200px;
			color:red;
		 } 
		</style>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

在浏览器中的运行结果如下示
在这里插入图片描述

3. JavaScript

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

直接写入 HTML 输出流
对事件的反应
改变 HTML 内容
改变 HTML 图像
改变 HTML 样式
验证输入

JavaScript体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<script type = "text/javascript">
		var arr = new Array();
		arr[0] = "辛芷蕾.jpg";
		arr[1] = "江疏影.jpg";
		arr[2] = "王鸥.jpg";
		var i = 0;
		setInterval(changeImg,1000);
		function changeImg()
		{
    
    
			var obj = document.getElementById("obj");
			obj.src = arr[i++];
			if(i == 3){
    
    
				i = 0;
			}		
		}
		</script>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
		<img id = "obj" src = "辛芷蕾.jpg"/>
	</BODY>
</HTML>

在浏览器中的运行结果如下示

在这里插入图片描述

4. AJAX

AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

在这里插入图片描述

创建 XMLHttpRequest 对象：XMLHttpRequest 是 AJAX 的基础，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）；XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

var xmlhttp;
if (window.XMLHttpRequest)
{
    
    
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    
    
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求：XMLHttpRequest 对象用于和服务器交换数据，如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求
	method：请求的类型；GET 或 POST
	url：文件在服务器上的位置
	async：true（异步）或 false（同步）
send(string)	将请求发送到服务器
	string：仅用于 POST 请求

GET 还是 POST ？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

//GET请求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
//POST请求
/* 如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据 */
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头
	header: 规定头的名称
	value: 规定头的值

服务器响应：如需获得来自服务器的响应，需使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据

//responseText实例
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//responseXML实例
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    
    
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

在这里插入图片描述