goahead 利用ajax实现局部刷新

最新推荐文章于 2022-05-30 11:37:22 发布

ccwwff

最新推荐文章于 2022-05-30 11:37:22 发布

阅读量5k

点赞数

分类专栏： 4.----WEB应用

4.----WEB应用专栏收录该内容

37 篇文章

订阅专栏

From: http://blog.youkuaiyun.com/seuge/article/details/8209685

ajax

“Asynchronous JavaScript and XML”（异步JavaScript和XML)

我们操作网页时往往只需要刷新网页上的一部分数据甚至可能是一个文本框内的数据，但是采用传统的刷新方式服务器会把整个页面重新发送至浏览器，浏览器再加载整个页面，这样不仅浪费了带宽，而且整个页面刷新视觉上也不流畅。

ajax技术解决了这一问题，ajax的思路是我需要刷新局部数据时给服务器一个请求，服务器收到请求后将数据将需要刷新的数据回送，浏览器接受到数据后通过脚本更新相应位置的数据，这个过程必须是在后台进行的。实现这个过程的核心便是JavaScript对象XmlHttpRequest。该对象在是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

在goahead中的实现：

1.首先是一个前台页面：

[html] view plain copy print ?

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>需要刷新的局部内容</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 实现局部刷新</button>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>需要刷新的局部内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">通过 AJAX 实现局部刷新</button>

</body>
</html>

把改htm放入服务器中。

2.在服务器端实现XMLHttpRequest的请求应答。

为ajax请求专门创建一个handle

[html] view plain copy print ?

int websAjaxHandler(webs_t wp, char_t *urlPrefix, char_t *webDir, int arg,
char_t *url, char_t *path, char_t *query)
{
websHeader(wp);
websWrite(wp, T("<body><h2>this is ajax test!</h2>\n"));
websFooter(wp);
websDone(wp, 200);
return 1;
}

int websAjaxHandler(webs_t wp, char_t *urlPrefix, char_t *webDir, int arg, 
char_t *url, char_t *path, char_t *query)
{
  	websHeader(wp);
	websWrite(wp, T("<body><h2>this is ajax test!</h2>\n"));
	websFooter(wp);
	websDone(wp, 200);
	return 1;
}

注册handle

[html] view plain copy print ?

websUrlHandlerDefine(T("/ajax"), NULL, 0, websAjaxHandler, 0);

websUrlHandlerDefine(T("/ajax"), NULL, 0, websAjaxHandler, 0);

这样就实现了局部刷新。

扩展

[html] view plain copy print ?

xmlhttp.open("GET","/ajax/",true);
xmlhttp.send();

xmlhttp.open("GET","/ajax/",true);
xmlhttp.send();

这是后台数据请求，现在仅是示意，所以没有对ajax请求进行分类，以后可以进行细分比如
xmlhttp.open("GET","/ajax/time",true);
然后响应的在goahead端进行二次判断，作出响应的应答。