goahead前台与后台的交互(ajax)

2017-10-14 19:45:39来源:CSDN作者:MNJLJ_23NMK人点击

分享

GoActions

1.goActions简介

goAction以我的理解就是与前台打交道的中间人,它接受客户端(浏览器)的请求,goaction把客户端的请求转交给其他业务处理的函数并从中得到结果,然后把结果推送给客户端完成一次完整的http请求,goAction其实非常类似于java的Servlet。官网对他的介绍如下:

The traditional Common Gateway Interface (CGI) is a slow technique for creating dynamic web pages because CGI processing results in the creation of a new process for every request. This is slow and cumbersome. GoAhead provides a high-performance replacement called GoActions™ that is a more suitable solution for embedded systems that demand compact and efficient solutions.
GoActions are “C” language functions that are directly bound to specific URIs. They respond to client requests without creating a new process for each request. By sharing the address space with GoAhead, GoActions can directly access the full request context. GoActions are serviced by the action handler.

2.goActions定义

定义一个goAction的函数如下:

/***goaction的函数最好用XXXXAction,这样让人一看就知道这是一个goAction函数***/static void exampleAction(Webs *wp){    websSetStatus(wp, 200);    websWriteHeaders(wp, 0, 0);    websWriteEndHeaders(wp);    websWrite(wp, "%s", "hello GoAction!");     websDone(wp);}/**特别注意:这句话一定要放在main函数里否者这个Action是失效的***//****这句注册一个可以通过action/exampleAction访问的GoAction函数****/websDefineAction("exampleAction", exampleAction);

3.goActions函数的调用

定义并注册好后GoAction函数,就可以通过浏览器:ip:port/action/exampleAction访问这个action,其中:
ip:开启这个action的服务器地址
port:端口号
例如我在本机启动了goAhead服务器我就可以通过:
127.0.0.1:8089/action/exampleAction访问

Ajax

1.Ajax简介

引用百度百科对Ajax的定义:

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。[1]
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

2.原生类Ajax定义:

//只适用于IE7+, Firefox, Chrome, Opera, Safari等浏览器var xmlhttp = new XMLHttpRequest();//创建xmlhttp对象xmlhttp.open("GET","action/exampleAction",true);xmlhttp.send();

3.通过jquery定义Ajax:

/** *第一个参数:url *第二个参数:回调函数**/$.get("action/exampleAction",function(status,data){  //前台处理后台发送的数据:data})

goActions函数与ajax的数据交互

关于goactions与怎么ajax的交互过程,由于作者的表达能力有限,所以只能通过代码与结果的形式来展现出来。下面我将用后台模拟的人物信息数据,然后发送到前台进行展示。

1.后台action函数的定义:

/**封装人物信息的结构体**/typedef struct PERSON{  char *name;  int age;  char *gender;}Person;static void personInfoAction(Webs *wp){    int i;     Person person[2];    person[0].name = "kangkang";    person[0].age = 12;    person[0].gender = "male";    person[1].name = "Jane";    person[1].age = 14;    person[1].gender = "female";   websSetStatus(wp, 200);   websWriteHeaders(wp, -1, 0);   websWriteEndHeaders(wp);  websWrite(wp,"[");  for(i = 0;i < 2; i++)      {          websWrite(wp, "       {/"name/":/"%s/",/"age/":/"%d/",/"gender/":/"%s/"}",  person[i].name,person[i].age,person[i].gender);         if(i != 1)         {            websWrite(wp, ",");         }  websWrite(wp, "]");  websDone(wp);}

别忘了在main函数注册这个Action哦!

2.前台显示界面(personInfo.html)的定义:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>goahead action数据传送方式</title>        <style type="text/css">            table.gridtable {                font-family: verdana, arial, sans-serif;                font-size: 11px;                color: #333333;                border-width: 1px;                border-color: #666666;                border-collapse: collapse;            }            table.gridtable th {                border-width: 1px;                padding: 8px;                border-style: solid;                border-color: #666666;                background-color: #dedede;            }            table.gridtable td {                border-width: 1px;                padding: 8px;                border-style: solid;                border-color: #666666;                background-color: #ffffff;            }        </style>    </head>    <body>        <table class="gridtable" id="gridtable">        </table>        <script src="jquery.js"></script>        <script>         var table_info="<tr><th>姓 名</th><th>年 龄</th><th>性别</th></tr>";            $.get("/action/personInfoAction",function(data,status){                var data_json = JSON.parse(data);                $.each(data_json, function(index,info) {                    table_info += "<tr>";                    table_info += "<td>"+info.name+"</td>";                    table_info += "<td>"+info.age+"</td>";                    table_info += "<td>"+info.gender+"</td>";                    table_info += "</tr>";                });                $("#gridtable").html(table_info);                console.log(table_info);            });        </script>    </body> <script> </script></html>

3.浏览器显示的结果:

结果

总结

  1. 使用action与ajax可以局部的刷新数据。
  2. 实现了前台与后台逻辑层面的分离,后台只关注业务的处理,前台只用来显示后台返回的结果。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台