• 12_AJAX

    知识点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

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="00_js.js"></script>
    7.     </head>
    8.     <body>
    9.        当前的温度值:<label id="wendu">0.0</label>
    10.        <br>
    11.        <input type="button" onclick="timer_fun(1);" value="开启定时器">
    12.        <input type="button" onclick="timer_fun(0);" value="停止定时器">
    13.        
    14.     </body>
    15. </html>

    00_js.js

    1. var my_timer;
    2. function timer_fun(arg)
    3. {
    4.     if(arg == "1")//开启定时器
    5.     {
    6.         //每1秒 就调用一次 my_fun()函数
    7.        my_timer =  setInterval( "my_fun()" ,1000 );//定时单位毫秒
    8.     }
    9.     else if(arg == "0")//关闭定时器
    10.     {
    11.         //清除定时器
    12.         clearInterval(my_timer);
    13.     }
    14. }
    15. function my_fun()
    16. {
    17.     //Math.random产生一个0~1的随机数浮点数
    18.     //Math.round 四舍五入 取整
    19.     var num =Math.round( Math.random()*100 );
    20.     document.getElementById("wendu").innerHTML = num;
    21. }

    运行结果：

    知识点2【日期Date对象】

    （1）Date对象方法

    getFullYear()：返回当前年份

    getMonth()：返回当前月份，0～11

    getDay()：返回星期中的某一天，0~6,0表示周日

    getDate()：返回一月中的某一天

    getHours()：返回当前时间的小时，0～23

    getMinutes()：返回当前时间的分钟，0～59

    getSeconds()：返回当前时间的秒，0～59

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="01_js.js"></script>
    7.     </head>
    8.     <body onload="get_time();">
    9.        当前的时间为:
    10.        <div id="div"></div>
    11.        
    12.     </body>
    13. </html>

    01_js.js

    1. function get_time()
    2. {
    3.     setInterval("get_time_fun()", 1000);
    4. }
    5. function get_time_fun()
    6. {
    7.     var d = new Date();
    8.     //在js中 去写网页 
    9.     var text= "";
    10.     //首行
    11.     text += " 时分秒"
    12.     //第一行
    13.     text += "";
    14.     text += d.getHours();
    15.     text += "";
    16.     text += d.getMinutes();
    17.     text += "";
    18.     text += d.getSeconds();
    19.     text += "";
    20.     text += "";
    21.  
    22.     document.getElementById("div").innerHTML= text;
    23. }

    运行结果：

    知识点3【Math数学对象】（了解）

    执行常见的算数任务

     知识点4【string对象】

    String对象用于处理文本（字符串）

    字符串是 JavaScript 的一种基本的数据类型。

    String 对象定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符等

    常用方法

    charAt()返回在指定位置的字符

    indexOf()检索字符串

    substr()从起始索引号提取字符串中指定数目的字符串

    substring()提取字符串中两个指定的索引号之间的字符串

     indexof函数：

     

    substring()函数：

    案例：例如有："2020:nz2001:good" 提取:号之间的字符串

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="02_js.js"></script>
    7.     </head>
    8.     <body onload="my_string();">
    9.        
    10.     </body>
    11. </html>

     02_js.js

    1. function my_string()
    2. {
    3.     var text="2020:nz2001:good";
    4.     //write讲字符串写入到浏览器上
    5.     document.write("字符串的长度:"+text.length+"
      "      );
    6.     document.write("第0个字符为:"+text.charAt(0)+"
      "      );
    7.  
    8.     var start = 0;
    9.     var stop = 0;
    10.  
    11.     while(1)
    12.     {
    13.         //寻找:的位置
    14.         stop = text.indexOf(":", start);
    15.         if(stop == -1)
    16.         {
    17.             //提取最后一个字符串
    18.             var tmp = text.substring(start,text.length);
    19.             document.write("提取的内容为:"+tmp+"
      "      );
    20.             break;
    21.         }
    22.  
    23.         var tmp = text.substring(start,stop);
    24.         document.write("提取的内容为:"+tmp+"
      "      );
    25.  
    26.         //步进条件
    27.         start = stop +1;
    28.     }
    29.  
    30. }

     运行结果：

    知识点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对象

    1. function getXMLHttpRequest()
    2. {
    3.     var xmlhttp = null;
    4.     if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
    5.     {// code for IE7+, Firefox, Chrome, Opera, Safari
    6.         xmlhttp=new XMLHttpRequest();//创建请求对象
    7.     }
    8.     else如果浏览器是底版本的
    9.     {// code for IE6, IE5
    10.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    11.     }
    12.     return xmlhttp;//返回请求对象
    13. }

    在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的使用

    1. //想从服务器上请求文件a.txt
    2. var url = "a.txt?data";
    3. xmlhttp.open("GET",url,true);//true异步   false同步

    4、send的使用

    1. //GET方式：
    2. xmlhttp.send(不要传任何数据);
    3.  
    4. //POST方式：
    5. xmlhttp.send(data);

    5、综合案例：请求服务器上的文件数据

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="03_js.js"></script>
    7.     </head>
    8.     <body>
    9.        文件的内容:<label id="label"></label>
    10.        <br>
    11.        <input type="button" value="获取文件内容" onclick="get_file_fun();">
    12.     </body>
    13. </html>

    03_js.js

    1. function getXMLHttpRequest()
    2. {
    3.     var xmlhttp = null;
    4.     if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
    5.     {// code for IE7+, Firefox, Chrome, Opera, Safari
    6.         xmlhttp=new XMLHttpRequest();//创建请求对象
    7.     }
    8.     else如果浏览器是底版本的
    9.     {// code for IE6, IE5
    10.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    11.     }
    12.     return xmlhttp;//返回请求对象
    13. }
    14. function get_file_fun()
    15. {
    16.     //1、创建xmlHttpRequest对象
    17.     var xmlhttp = null; 
    18.     xmlhttp = getXMLHttpRequest();
    19.  
    20.     //2、设置服务器响应的回调函数
    21.     xmlhttp.onreadystatechange = function(){
    22.         //xmlhttp.readyState==4 && xmlhttp.status==200 标识服务器处理完成
    23.         if(xmlhttp.readyState==4 && xmlhttp.status==200)
    24.         {
    25.             //获取服务器的结果 xmlhttp.responseXML才是服务器的应答
    26.             //获取服务器的结果 xmlhttp.responseText才是服务器的应答
    27.             var ret = xmlhttp.responseText;
    28.             //局部更新网页上的label
    29.             document.getElementById("label").innerHTML = ret;
    30.         }
    31.     }
    32.  
    33.     //3、open
    34.     var url="./file/a.txt";
    35.     xmlhttp.open("GET", url, true);//异步方式
    36.     
    37.     //4、send
    38.     xmlhttp.send();
    39. }

    运行结果：

    知识点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问号后的内容

    1. //可以直接读取到数据
    2. char *data = getenv("QUERY_STRING");//data-->"10+20"

    2、CONTENT_LENGTH：在浏览器端以POST方法输入的数据的字节数，数据的内容通过标准输入获取

    1. 1、首先的到数据的长度
    2. char *len = getenv("CONTENT_LENGTH");
    4. 2、根据长度 从标准输入设备 获取内容
    5. char data[128]="";
    6. fgets(data,atoi(len)+1, stdin);//"10+20"

    1、（GET异步方式实现）

    index.html

    1. <html>
    2.     <head>
    3.         <title>table</title>
    4.         <meta charset="UTF-8">
    5.         <!--这是描述 js中的函数来之哪个js文件-->
    6.         <script type="text/javascript" src="04_js.js"></script>
    7.     </head>
    8.     <body>
    9.        data1:<input type="text" id="data1">
    10.        <br>
    11.        data2:<input type="text" id="data2">
    12.        <br>
    13.        结果:<label id="ret"></label>
    14.        <br>
    15.        <input type="button" value="add" onclick="calc_fun(1);">
    16.        <input type="button" value="sub" onclick="calc_fun(0);">
    17.        
    18.     </body>
    19. </html>

    04_js.js

    1. function getXMLHttpRequest()
    2. {
    3.     var xmlhttp = null;
    4.     if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是IE5.0以上的高版本的浏览器
    5.     {// code for IE7+, Firefox, Chrome, Opera, Safari
    6.         xmlhttp=new XMLHttpRequest();//创建请求对象
    7.     }
    8.     else如果浏览器是底版本的
    9.     {// code for IE6, IE5
    10.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    11.     }
    12.     return xmlhttp;//返回请求对象
    13. }
    14. function calc_fun(arg)
    15. {
    16.     //1、获取网页输入框的数据data1 data2
    17.     var data1 = document.getElementById("data1").value;
    18.     var data2 = document.getElementById("data2").value;
    19.     //判断data1 data2是否合法
    20.     if(isNaN(data1) || isNaN(data2) )
    21.     {
    22.         document.getElementById("data1").value="";
    23.         document.getElementById("data2").value="";
    24.         alert("请输入有效的数值");
    25.         return;
    26.     }
    27.  
    28.     //组包请求报文url "/cgi-bin/calc.cgi?10+20"  "/cgi-bin/calc.cgi?10-20"
    29.     var url="/cgi-bin/calc.cgi?";
    30.     url +=data1;
    31.     if(arg == "1")//加
    32.     {
    33.         url +="+";
    34.     }
    35.     else if(arg == "0")//减
    36.     {
    37.         url +="-";
    38.     }
    39.     url+=data2;
    40.     alert("url:"+url);
    41.  
    42.     //创建一个xmlHttpRequest对象
    43.     var xmlHttp = null;
    44.     xmlHttp =  getXMLHttpRequest();
    45.  
    46.     //设置回调函数
    47.     xmlHttp.onreadystatechange=function(){
    48.         if(xmlHttp.readyState == 4 && xmlHttp.status==200)
    49.         {
    50.             //获取服务器的结果
    51.             var ret = xmlHttp.responseText;
    52.             //将ret赋值给label
    53.             document.getElementById("ret").innerHTML=ret;
    54.         }
    55.     }
    56.  
    57.     //open
    58.     xmlHttp.open("GET", url, true);
    59.  
    60.     //send
    61.     xmlHttp.send();//将请求url发送给服务器
    62.  
    63. }

    04_calc.c

    1. #include<stdio.h>
    2. #include<stdlib.h>
    3. int main()
    4. {
    5.     //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    6.     printf("content-type:text/html\n\n");
    7.  
    8.     //获取服务器的数据 GET方式 QUERY_STRING
    9.     char *data = getenv("QUERY_STRING");//data-->"10+20"
    10.     
    11.     //解析data
    12.     int data1=0,data2=0;
    13.     char ch = 0;
    14.     sscanf(data,"%d%c%d", &data1, &ch, &data2);
    15.     if(ch == '+')//加法运算
    16.     {
    17.         //将处理的结果 发送给服务器
    18.         printf("%d\n", data1+data2);
    19.     }
    20.     else if(ch == '-')//减法运算
    21.     {
    22.         //将处理的结果 发送给服务器
    23.         printf("%d\n", data1-data2);
    24.     }
    25.  
    26.     return 0;
    27. }

    gcc 04_calc.c -o calc.cgi

    浏览器访问结果：

     

  • 相关阅读:
    Java安全之深入了解SQL注入
    neo4j 图数据库初步调研 图数据库与关系型数据库差异-f
    HTML入门零基础教程（三）
    如何对ppt文件设置修改权限？
    双节履带机械臂小车实现蓝牙遥控功能
    从0到1开发一个React组件库
    STM8单片机在医疗设备中的应用和优势
    开设自己的网站系类01购买服务器
    FastTunnel在Ubuntu上以服务方式部署并开机自启动（.NET Core）
    深入React Flow Renderer（二）：构建拖动操作栏
  • 原文地址：https://blog.csdn.net/buhuidage/article/details/128087003