Chinaunix首页 | 论坛 | 博客

manpaizhou的ChinaUnix博客

首页　| 　博文目录　| 　关于我

manpaizhou

  • 博客访问： 411221
  • 博文数量： 48
  • 博客积分： 1032
  • 博客等级： 上士
  • 技术积分： 1256
  • 用 户 组： 普通用户
  • 注册时间： 2012-05-19 13:24
文章分类

全部博文（48）

文章存档

2014年（3）

2013年（23）

2012年（22）

我的朋友
最近访客
推荐博文
相关博文
EJScript实现数据异步传输

分类： 系统运维

2012-12-11 16:31:22

在w3school（）上面看到一个关于异步传输的例子，在服务器端其用asp和php两种方式实现了该传输，在这里我将服务器端程序改装一下使用ejs完成相同功能。
    说到web异步传输不得不提到XMLHttpRequest对象，它是所有异步传输的基础。如：ajax；XMLHttpRequest用于在后台与服务器交换数据。
主要的功能：
   1、在不重新加载页面的情况下更新网页；
   2、在页面已加载后从服务器请求数据；
   3、在页面已加载后从服务器接收数据；
   4、在后台向服务器发送数据；
创建方式：

  1. var xmlhttp;
  2. if (window.XMLHttpRequest)
  3.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  4.   xmlhttp=new XMLHttpRequest();
  5.   }
  6. else
  7.   {// code for IE6, IE5
  8.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  9.   }
发送请求：

  1. open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求
参数：
1、method:请求的类型；GET或者POST;
2、url:文件在服务器上的位置；
3、async:true(异步)或者false(同步)

  1. send(string) 将请求发送到服务器。
参数string：用于POST请求；

服务器端响应：

  1. responseText 获得字符串形式的响应数据。
  2. respon***ML 获得 XML 形式的响应数据。
onreadystatechange事件：
当请求发送到服务器的时候，就会去响应一下任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。

点击(此处)折叠或打开

  1. onreadystatechange     存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

  3. readyState    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  4. 0: 请求未初始化
  5. 1: 服务器连接已建立
  6. 2: 请求已接收
  7. 3: 请求处理中
  8. 4: 请求已完成，且响应已就绪

  10. status     200: "OK"
  11. 404: 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪；eg：

  1. xmlhttp.onreadystatechange=function()
  2.   {
  3.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  4.     {
  5.     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  6.     }
  7.   }
上面就是整个XMLHttpRequest响应过程，下面是例子；客户端代码不变，只改动服务器端代码。

服务器端：

  1. <html>
  2. <body>
  3. <%
  4.     var a = new Array(30);
  5.     a[1]="Anna";
  6.     a[2]="Brittany";
  7.     a[3]="Cinderella";
  8.     a[4]="Diana";
  9.     a[5]="Eva";
  10.     a[6]="Fiona";
  11.     a[7]="Gunda";
  12.     a[8]="Hege";
  13.     a[9]="Inga";
  14.     a[10]="Johanna";
  15.     a[11]="Kitty";
  16.     a[12]="Linda";
  17.     a[13]="Nina";
  18.     a[14]="Ophelia";
  19.     a[15]="Petunia";
  20.     a[16]="Amanda";
  21.     a[17]="Raquel";
  22.     a[18]="Cindy";
  23.     a[19]="Doris";
  24.     a[20]="Eve";
  25.     a[21]="Evita";
  26.     a[22]="Sunniva";
  27.     a[23]="Tove";
  28.     a[24]="Unni";
  29.     a[25]="Violet";
  30.     a[26]="Liza";
  31.     a[27]="Elizabeth";
  32.     a[28]="Ellen";
  33.     a[29]="Wenche";

  35.     var value,result;
  36.     value = params.q;//接收表单数据
  37.     var i,s,s1="";
  38.     if (value != null)
  39.         {
  40.         result = ""
  41.         for (i = 1;i < 30; i++){
  42.         s = a[i].substring(0,1);
  43.         if (s == value){
  44.             if (result == ""){
  45.             result = a[i];
  46.             }
  47.             else {
  48.             result = result +','+a[i];
  49.             }
  50.             }
  51.         }
  52.         }
  53.         if (result == ""){
  54.             write("no suggestion");
  55.         }
  56.         else{
  57.             write(result);
  58.         }

  60. %>
  61. </body>
  62. </html>
客户端代码：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function showHint(str)
  5. {
  6. var xmlhttp;
  7. if (str.length==0)
  8.   {
  9.   document.getElementById("txtHint").innerHTML="";
  10.   return;
  11.   }
  12. if (window.XMLHttpRequest)
  13.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  14.   xmlhttp=new XMLHttpRequest();//创建XMLHttpRequest对象
  15.   }
  16. else
  17.   {// code for IE6, IE5
  18.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//老的浏览器所指出的XMLHttpRequest对象
  19.   }
  20. xmlhttp.onreadystatechange=function()
  21.   {
  22.   if (xmlhttp.readyState==4 && xmlhttp.status==200) //判断响应是否接受完成
  23.     {
  24.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  25.     }
  26.   }
  27. xmlhttp.open("GET","xml.ejs?q="+str,true);//请求格式
  28. xmlhttp.send();//发送请求
  29. }
  30. </script>
  31. </head>
  32. <body>

  34. <h3>请在下面的输入框中键入大写字母（A - Z）：</h3>
  35. <form action="">
  36. 姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
  37. </form>
  38. <p>建议：<span id="txtHint"></span></p>

  40. </body>
  41. </html>
通过这个例子我们可以知道在服务器端选择ejs的优势，它可以让开发者在开发客户端界面和服务器端程序时使用相同的编程语言。ejs只是js的一个模板补充。






阅读(2774) | 评论(1) | 转发(0) |
0

上一篇：EJScript数据交互

下一篇：jQuery创建滑动条

给主人留下些什么吧！~~

CCAbyss2014-12-09 11:34:06

楼主你好！我用你的代码跑了一下，浏览器报错500，应该是我EJS配置的问题，EJS默认访问index.ejs，我想请教一下怎样才能修改他的默认路径来访问我的自定义ejs文件呢？比如xml.ejs。我现在用
appweb  --home /etc/appweb/ --ejs /xml.ejs:/etc/appweb/blog/ --log stdout:4让它遇到xml.ejs就自动访问index.ejs,但是实际运行的时候还是会报错（500），想请教有什么办法解决这个问题？

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6