12
知识点1【定时器】（重要）
知识点2【日期Date对象】
知识点3【Math数学对象】（了解）
编辑 知识点4【string对象】
indexof函数：
substring()函数：
知识点5【全局函数】（了解）
知识点6【AJAX的概述】固定的js编程流程
AJAX局部更新网页流程图：
知识点7【AJAX的通信过程】（重要）
1、创建xmlHttpRequest对象
2、设置服务器响应的回调函数
2-1：标准的XMLHttpRequest属性
3、open的使用
4、send的使用
5、综合案例：请求服务器上的文件数据
知识点8【CGI的概述】
什么是CGI?
CGI处理步骤
CGI编程
知识点9【cgi实现计算器案例】
1、QUERY_STRING：在浏览器端以GET的方法输入的数据，数据的内容就是url问号后的内容
2、CONTENT_LENGTH：在浏览器端以POST方法输入的数据的字节数，数据的内容通过标准输入获取
1、（GET异步方式实现）
知识点1【定时器】（重要）
案例：不停的获取当前温度
index.html
<html><head><title>table</title><meta charset="UTF-8"><!--这是描述 js中的函数来之哪个js文件--><script type="text/javascript" src="00_js.js"></script></head><body>当前的温度值:<label id="wendu">0.0</label><br><input type="button" onclick="timer_fun(1);" value="开启定时器"><input type="button" onclick="timer_fun(0);" value="停止定时器"></body>
</html>00_js.js
var my_timer;
function timer_fun(arg)
{if(arg == "1")//开启定时器{//每1秒 就调用一次 my_fun()函数my_timer = setInterval( "my_fun()" ,1000 );//定时单位毫秒}else if(arg == "0")//关闭定时器{//清除定时器clearInterval(my_timer);}
}
function my_fun()
{//Math.random产生一个0~1的随机数浮点数//Math.round 四舍五入 取整var num =Math.round( Math.random()*100 );document.getElementById("wendu").innerHTML = num;
}运行结果：
知识点2【日期Date对象】
（1）Date对象方法
getFullYear()：返回当前年份
getMonth()：返回当前月份，0～11
getDay()：返回星期中的某一天，0~6,0表示周日
getDate()：返回一月中的某一天
getHours()：返回当前时间的小时，0～23
getMinutes()：返回当前时间的分钟，0～59
getSeconds()：返回当前时间的秒，0～59
index.html
<html><head><title>table</title><meta charset="UTF-8"><!--这是描述 js中的函数来之哪个js文件--><script type="text/javascript" src="01_js.js"></script></head><body onload="get_time();">当前的时间为:<div id="div"></div></body>
</html>01_js.js
function get_time()
{setInterval("get_time_fun()", 1000);
}
function get_time_fun()
{var d = new Date();//在js中 去写网页 var text= "<table border='1'>";//首行text += "<tr> <td>时</td><td>分</td><td>秒</td></tr>"//第一行text += "<tr><td>";text += d.getHours();text += "</td><td>";text += d.getMinutes();text += "</td><td>";text += d.getSeconds();text += "</td></tr>";text += "</table>";document.getElementById("div").innerHTML= text;
}运行结果：
知识点3【Math数学对象】（了解）
执行常见的算数任务
知识点4【string对象】
String对象用于处理文本（字符串）
字符串是 JavaScript 的一种基本的数据类型。
String 对象定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符等
常用方法
charAt()返回在指定位置的字符
indexOf()检索字符串
substr()从起始索引号提取字符串中指定数目的字符串
substring()提取字符串中两个指定的索引号之间的字符串
indexof函数：
substring()函数：
案例：例如有："2020:nz2001:good" 提取:号之间的字符串
index.html
<html><head><title>table</title><meta charset="UTF-8"><!--这是描述 js中的函数来之哪个js文件--><script type="text/javascript" src="02_js.js"></script></head><body onload="my_string();"></body>
</html>02_js.js
function my_string()
{var text="2020:nz2001:good";//write讲字符串写入到浏览器上document.write("字符串的长度:"+text.length+"<br>");document.write("第0个字符为:"+text.charAt(0)+"<br>");var start = 0;var stop = 0;while(1){//寻找:的位置stop = text.indexOf(":", start);if(stop == -1){//提取最后一个字符串var tmp = text.substring(start,text.length);document.write("提取的内容为:"+tmp+"<br>");break;}var tmp = text.substring(start,stop);document.write("提取的内容为:"+tmp+"<br>");//步进条件start = stop +1;}}运行结果：
知识点5【全局函数】（了解）
常用的函数：isNaN Number String
js获取网页上数据 以及讲数据 局部刷新到网页上
知识点6【AJAX的概述】固定的js编程流程
AJAX 不是语言 而是（基于js和xml）技术
概述：
1、AJAX是 Asynchronous JavaScript And XML的缩写
2、AJAX 是一种用于创建快速动态网页的技术
3、AJAX 不是新的编程语言，而是一种使用现有标准的新方法
4、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等
浏览器与服务器通信采用的就是AJAX技术，AJAX核心是XMLHttpRequest对象
AJAX局部更新网页流程图：
简易版：
异步流程：
1、创建对象
2、设置回调函数 ，fun函数
3、open 创建服务器请求
4、send 向服务器发送请求，
5、服务器有结果会自动调用fun回调函数
在回调函数里面根据服务器返回的响应信息 更新用户界面
知识点7【AJAX的通信过程】（重要）
1、创建xmlHttpRequest对象
function getXMLHttpRequest()
{var xmlhttp = null;if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}在js文件中开始定义这个函数，其他js函数直接调用就能创建一个异步请求对象
2、设置服务器响应的回调函数
2-1：标准的XMLHttpRequest属性
Onreadystatechange 每个（服务器的）状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
服务器的状态：
readyState：请求的状态。0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
status：服务器的HTTP状态码（200对应OK，404对应Not Found（未找到））
状态的改变会触发异步函数，调用回调函数。
不是每一种状态改变都要处理，一般在readyState 状态值为4，status状态值为200的时候，处理服务器应答，所以在回调函数里写一个判断，判断readyState 为4，status为200，再做处理
服务器的应答：
responseText 和 responseXML就是服务器的反馈的结果
| 属 性 | 描 述 |
| onreadystatechange | 每个状态改变时都会触发这个事件处理器 通常会调用一个JavaScript函数 |
| readyState | 请求的状态。0 = 未初始化，1 = 正在加载，2 = 已加载， 3 = 交互中，4 = 完成 |
| responseText | 服务器的响应，表示为一个字符串 |
| responseXML | 服务器的响应，表示为XML。这个对象可以解析为一个DOM对象 |
| status | 服务器的HTTP状态码（200对应OK，404对应Not Found（未找到）） |
| statusText | HTTP状态码的相应文本（OK或Not Found（未找到）等等） |
标准的XMLHttpRequest对象的方法
| 方 法 | 描 述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open(“method”, “url”, true) | 建立对服务器的请求。method参数可以是GET、POST。url参数可以是相对URL或绝对URL。 true:异步；false:同步 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
3、open的使用
//想从服务器上请求文件a.txt
var url = "a.txt?data";
xmlhttp.open("GET",url,true);//true异步 false同步4、send的使用
//GET方式：
xmlhttp.send(不要传任何数据);//POST方式：
xmlhttp.send(data);5、综合案例：请求服务器上的文件数据
index.html
<html><head><title>table</title><meta charset="UTF-8"><!--这是描述 js中的函数来之哪个js文件--><script type="text/javascript" src="03_js.js"></script></head><body>文件的内容:<label id="label"></label><br><input type="button" value="获取文件内容" onclick="get_file_fun();"></body>
</html>03_js.js
function getXMLHttpRequest()
{var xmlhttp = null;if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}
function get_file_fun()
{//1、创建xmlHttpRequest对象var xmlhttp = null; xmlhttp = getXMLHttpRequest();//2、设置服务器响应的回调函数xmlhttp.onreadystatechange = function(){//xmlhttp.readyState==4 && xmlhttp.status==200 标识服务器处理完成if(xmlhttp.readyState==4 && xmlhttp.status==200){//获取服务器的结果 xmlhttp.responseXML才是服务器的应答//获取服务器的结果 xmlhttp.responseText才是服务器的应答var ret = xmlhttp.responseText;//局部更新网页上的labeldocument.getElementById("label").innerHTML = ret;}}//3、openvar url="./file/a.txt";xmlhttp.open("GET", url, true);//异步方式//4、sendxmlhttp.send();
}运行结果：
知识点8【CGI的概述】
CGI是任何具备标准输入、输出、环境变量的语言编写并生成的可执行文件。
什么是CGI?
CGI是通用网关接口(Common Gateway Interface);是HTTP服务器与其它程序进行“交谈”的工具
通过CGI接口就能在服务器端运行其他的程序。
CGI处理步骤
1、通过浏览器将用户请求送到服务器
2、服务器接收用户请求并交给CGI程序处理
3、CGI程序把处理结果传送给服务器
4、服务器把结果送回到浏览器
CGI编程
（1）CGI程序通过标准输入(stdin)、标准输出(stdout)实现与web服务器间信息的传递
（2）环境变量为Web服务器和CGI接口之间约定的,用来向CGI程序传递一些重要的参数
CGI传送给Web服务器的信息可以用各种格式,通常是以HTML文本或者XML文本的形式
（1）传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
（2）传输XML文本第一行输出的内容必须是”content-type:text/xml\n\n”
（3）还有其他的一些格式：JIF(image/gif)、JPEG(image/jpeg)、AVI(video/avi)
知识点9【cgi实现计算器案例】
两个重要的CGI环境变量:
1、QUERY_STRING：在浏览器端以GET的方法输入的数据，数据的内容就是url问号后的内容
//可以直接读取到数据
char *data = getenv("QUERY_STRING");//data-->"10+20"2、CONTENT_LENGTH：在浏览器端以POST方法输入的数据的字节数，数据的内容通过标准输入获取
1、首先的到数据的长度
char *len = getenv("CONTENT_LENGTH");2、根据长度 从标准输入设备 获取内容
char data[128]="";
fgets(data,atoi(len)+1, stdin);//"10+20"1、（GET异步方式实现）
index.html
<html><head><title>table</title><meta charset="UTF-8"><!--这是描述 js中的函数来之哪个js文件--><script type="text/javascript" src="04_js.js"></script></head><body>data1:<input type="text" id="data1"><br>data2:<input type="text" id="data2"><br>结果:<label id="ret"></label><br><input type="button" value="add" onclick="calc_fun(1);"><input type="button" value="sub" onclick="calc_fun(0);"></body>
</html>04_js.js
function getXMLHttpRequest()
{var xmlhttp = null;if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{//1、获取网页输入框的数据data1 data2var data1 = document.getElementById("data1").value;var data2 = document.getElementById("data2").value;//判断data1 data2是否合法if(isNaN(data1) || isNaN(data2) ){document.getElementById("data1").value="";document.getElementById("data2").value="";alert("请输入有效的数值");return;}//组包请求报文url "/cgi-bin/calc.cgi?10+20" "/cgi-bin/calc.cgi?10-20"var url="/cgi-bin/calc.cgi?";url +=data1;if(arg == "1")//加{url +="+";}else if(arg == "0")//减{url +="-";}url+=data2;alert("url:"+url);//创建一个xmlHttpRequest对象var xmlHttp = null;xmlHttp = getXMLHttpRequest();//设置回调函数xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState == 4 && xmlHttp.status==200){//获取服务器的结果var ret = xmlHttp.responseText;//将ret赋值给labeldocument.getElementById("ret").innerHTML=ret;}}//openxmlHttp.open("GET", url, true);//sendxmlHttp.send();//将请求url发送给服务器}04_calc.c
#include<stdio.h>
#include<stdlib.h>
int main()
{//传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"printf("content-type:text/html\n\n");//获取服务器的数据 GET方式 QUERY_STRINGchar *data = getenv("QUERY_STRING");//data-->"10+20"//解析dataint data1=0,data2=0;char ch = 0;sscanf(data,"%d%c%d", &data1, &ch, &data2);if(ch == '+')//加法运算{//将处理的结果 发送给服务器printf("%d\n", data1+data2);}else if(ch == '-')//减法运算{//将处理的结果 发送给服务器printf("%d\n", data1-data2);}return 0;
}gcc 04_calc.c -o calc.cgi
浏览器访问结果：
发布评论