包含 ajax 标签的文章

form.reset() 失效,对象不支持此属性或方法的原因

今天在做一个 ajax 的 form 的时候,在提交完执行 reset() 函数重置该表单,结果浏览器总是提示对象不支持此属性或方法,我使用 document.forms['form1'].reset(); 和 document.getElementById('form1').reset(); 都不行,查了 id 和 name 都是对的,哎,废话不多说了,后来我把表单独立拿出来试终于找到原来在 form1 里我给一个重置按钮设置了 id="reset" 导致和 reset() 冲突,于是去掉这个 id 就OK了,OK,Thank you!

便签2-无刷新ASP版严重出炉!

经过本人来重考虑,终于做了第二版本的便签程序,与第一个版本不同之处如下:

 1)界面布局不同,标签全部左栏竖形布局,现在的屏幕是越来越宽,但在高度上还是有一点紧张,所在标签列表不再横着挤从上往下排了。
 2)所有的载入数据使用AJAX无刷新的方式,POST数据包函中文的使用伪AJAX无刷新的方式,这就是第二版本最大的改变,所有的操作都是在一个页面,无刷新。
 3)在页面上大量使用了 jQuery,有很多的小细节等待你去发现哦。。
 4)加入了自动保存的功能,如果你在写带有大量文字的内容的话,点保存时一不小心超时了或者断网了等意外的事故怎么办,虽然第一个版本在点保存数据时会自动把内容复制一份到剪切板,但那也并不是万全之策,现在只要点一下下方工具栏上的“自动保存”按钮,默认就会每 30 秒自动保存一次,再配上保存时自动将内容到剪切板,岂不是更Safe~~

虽然已经可以使用了,但是很多细节上还是有待改善,包括一些个性化设置还没有加入,下方工具栏右边的“设置”按钮只是一个假的东东,点了是没有任何反应滴~~~~

目前完成的是 ASP+Access 版本,原本准备先完成的是 PHP+MySQL 版,因为不想使用伪AJAX技术,也就是在 PHP 版上想使用纯的 AJAX 技术,碰到一些转码的问题,在AJAX把数据发送到服务器端的时候,转换编码时总是有内容从后面意外的丢失,这应该是 PHP iconv 函数从 tf-8 转 gb2312 的一个BUG,郁闷啊~~
不过相信很快就会搞捏的,敬请期待。。。

因为本人没有ASP的空间,所以没办法提供演示了,郁闷啊~~

用心感受PHP无刷新留言簿

这个留言簿做出来有两个多月了,以前调用的XMLHTTP全是自己写的,一直测试正常,后来在多种环境和浏览器下测试才发现很不稳定,只有在册了什么DLL的IE和FireFox下才可以正常使用,JAVASCRIPT的函数我研究了好久,也参考了其它的源码好久,可是有时候写的就是一样,就是问题不断,怎么也找不到哪里错了,因为最近在学JQuery,发现JQuery的AJAX很强大,也很简单,而且兼容多浏览器,便把留言簿的AJAX函数全使用JQuery的代替了,于是也现出来给大家看看,呵呵。

演示地址:http://www.vgot.net/test/myfeel/

终于搞定了

想写几个通用的 AJAX 所用的函数,在写 postRequest() 这个函数的时候总是得不到返回值,后来才知道,用异步数据是不行的,得同步,记录下。。。

在此要感谢这篇文章 http://xujingbao.javaeye.com/blog/186050
 
下面的 writePostRequest() 函数因为不想脚本臃肿,就直接调用了 postRequest() 函数了,因为没有返回值可以用异步回调的方式,不过要另写整个函数,所以如果想看上去执行速度快一些的话就可以重写 writePostRequest() 函数用异步的方式。
另外一点就是如果 Post 数据的时候中文要编码,否则发送到服务器端会乱码,当然可以在服务器端转换编码,详情可以参考《PHP的unescape()函数》这篇文章。

JavaScript代码
  1. <!--   
  2. var xmlHttp;   
  3. var isie = false;   
  4. function createXmlHttp(){   
  5.     var theObject;   
  6.     if(window.ActiveXObject){ //Get xmlHttp   
  7.         theObject = new ActiveXObject("Microsoft.XMLHTTP"); //IE6及以上版本   
  8.         isie = true;   
  9.     }else if(window.XMLHttpRequest){   
  10.         theObject = new XMLHttpRequest();   
  11.     }else{   
  12.         alert("您的浏览器不支持XMLHTTP,页面无法创建对象,将会影响到页面的正常功能!");   
  13.     }   
  14.     return theObject;   
  15. }   
  16.   
  17. function getRequest(url){   //获取 GET 返回数据   
  18.     xmlHttp = createXmlHttp();   
  19.     try{   
  20.         if(isie == false ){   
  21.             xmlHttp.open("GET", url, false);   
  22.             xmlHttp.setRequestHeader("If-Modified-Since","0");    
  23.             xmlHttp.overrideMimeType("text/html;charset=gb2312");   
  24.             xmlHttp.send(null);   
  25.             return xmlHttp.responseText;   
  26.         }else{   
  27.             xmlHttp.open("GET", url, false);   
  28.             xmlHttp.setRequestHeader("If-Modified-Since","0");    
  29.             xmlHttp.send(null);   
  30.             if(xmlHttp.readyState == 4){   
  31.                 if(xmlHttp.status == 200 || xmlHttp.status == 0){   
  32.                     return Recenspace(xmlHttp.responseBody);   
  33.                 }   
  34.             }   
  35.         }   
  36.     }catch(exception){       
  37.         document.write('exception:'+exception.message);       
  38.     }       
  39. }   
  40.   
  41. function postRequest(url,postString){   //获取 POST 返回数据   
  42.     xmlHttp = createXmlHttp();   
  43.     var returnText = null;   
  44.     xmlHttp.onreadystatechange = function(){   
  45.         if(xmlHttp.readyState == 4 && xmlHttp.status == 200){   
  46.             returnText = xmlHttp.responseText;   
  47.         }   
  48.     }   
  49.     xmlHttp.open("POST", url, false);   
  50.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
  51.   //xmlHttp.overrideMimeType("text/html;charset=gb2312");   
  52.     xmlHttp.send(postString);   
  53.     return returnText;   
  54. }   
  55.   
  56. function Recenspace(Html){   
  57.     var rs=new ActiveXObject("ADODB.RecordSet");   
  58.     rs.fields.append("a",201,1);   
  59.     rs.open();   
  60.     rs.addNew();   
  61.     rs(0).appendChunk(Html);   
  62.     rs.update();   
  63.     return rs(0).value;   
  64.     rs.close();   
  65. }   
  66.   
  67. function writeGetRequest(url,element){  //写入 GET 返回值   
  68.     document.getElementById(element).innerHTML = getRequest(url);   
  69. }   
  70.   
  71. function writePostRequest(url,postString,element){  //写入 POST 返回值   
  72.     document.getElementById(element).innerHTML = postRequest(url,postString);   
  73. }   
  74.   
  75. function doIt(){   
  76.     //无操作函数    
  77. }   
  78. //-->  

AJAX技术在PHP开发中的简单应用

  AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力)

  [AJAX介绍]

  Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

  异步JavaScript和XML(AJAX)不是什么新技术,而是使用几种现有技术——包括级联样式表(CSS)、JavaScript、XHTML、XML和可扩展样式语言转换(XSLT),开发外观及操作类似桌面软件的Web应用软件。

  [AJAX执行原理]

  一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的,它允许一个客户端脚本来执行HTTP请求,并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GET或POST)来处理请求,并将目标URL设置到XMLHttpRequest对象上。

  当你发送HTTP请求,你不希望浏览器挂起并等待服务器的响应,取而代之的是,你希望通过页面继续响应用户的界面交互,并在服务器响应真正到达后处理它们。要完成它,你可以向XMLHttpRequest注册一个回调函数,并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器,当服务器响应到达时,回调函数将会被调用。

  [AJAX实际应用]

  1. 初始化Ajax

  Ajax实际上就是调用了XMLHttpRequest对象,那么首先我们的就必须调用这个对象,我们构建一个初始化Ajax的函数:

初始化一个xmlhttp对象
  1. function InitAjax()   
  2. {   
  3.  var ajax=false;    
  4.  try {    
  5.   ajax = new ActiveXObject("Msxml2.XMLHTTP");    
  6.  } catch (e) {    
  7.   try {    
  8.    ajax = new ActiveXObject("Microsoft.XMLHTTP");    
  9.   } catch (E) {    
  10.    ajax = false;    
  11.   }    
  12.  }   
  13.  if (!ajax && typeof XMLHttpRequest!='undefined') {    
  14.   ajax = new XMLHttpRequest();    
  15.  }    
  16.  return ajax;   
  17. }  


  你也许会说,这个代码因为要调用XMLHTTP组件,是不是只有IE浏览器能使,不是的经我试验,Firefox也是能使用的。
那么我们在执行任何Ajax操作之前,都必须先调用我们的InitAjax()函数来实例化一个Ajax对象。

  2. 使用Get方式

  现在我们第一步来执行一个Get请求,加入我们需要获取 /show.php?id=1的数据,那么我们应该怎么做呢?

  假设有一个链接:<a href="/show.php?id=1">新闻1</a>,我点该链接的时候,不想任何刷新就能够看到链接的内容,那么我们该怎么做呢?


//将链接改为:
<a href="#" onClick="getNews(1)">新闻1</a>

//并且设置一个接收新闻的层,并且设置为不显示:
<div id="show_news"></div>

  同时构造相应的JavaScript函数:

JavaScript代码
  1. function getNews(newsID)   
  2. {   
  3.  //如果没有把参数newsID传进来   
  4.  if (typeof(newsID) == 'undefined')   
  5.  {   
  6.   return false;   
  7.  }   
  8.  //需要进行Ajax的URL地址   
  9.  var url = "/show.php?id="+ newsID;   
  10.   
  11.  //获取新闻显示层的位置   
  12.  var show = document.getElementById("show_news");    
  13.   
  14.  //实例化Ajax对象   
  15.  var ajax = InitAjax();   
  16.   
  17.  //使用Get方式进行请求   
  18.  ajax.open("GET", url, true);    
  19.   
  20.  //获取执行状态   
  21.  ajax.onreadystatechange = function() {    
  22.   //如果执行是状态正常,那么就把返回的内容赋值给上面指定的层   
  23.   if (ajax.readyState == 4 && ajax.status == 200) {    
  24.    show.innerHTML = ajax.responseText;    
  25.   }    
  26.  }   
  27.  //发送空   
  28.  ajax.send(null);    
  29. }   


  那么当,当用户点击“新闻1”这个链接的时候,在下面对应的层将显示获取的内容,而且页面没有任何刷新。当然,我们上面省略了show.php这个文件,我们只是假设show.php文件存在,并且能够正常工作的从数据库中把id为1的新闻提取出来。

  这种方式适应于页面中任何元素,包括表单等等,其实在应用中,对表单的操作是比较多的,针对表单,更多使用的是POST方式,这个下面将讲述。

  3. 使用POST方式

  其实POST方式跟Get方式是比较类似的,只是在执行Ajax的时候稍有不同,我们简单讲述一下。

  假设有一个用户输入资料的表单,我们在无刷新的情况下把用户资料保存到数据库中,同时给用户一个成功的提示。


//构建一个表单,表单中不需要action、method之类的属性,全部由ajax来搞定了。

 

XML/HTML代码
  1. <form name="user_info">  
  2. 姓名:<input type="text" name="user_name" /><br />  
  3. 年龄:<input type="text" name="user_age" /><br />  
  4. 性别:<input type="text" name="user_sex" /><br />  
  5. <input type="button" value="提交表单" onClick="saveUserInfo()">  
  6. </form>  


//构建一个接受返回信息的层:
<div id="msg"></div>


  我们看到上面的form表单里没有需要提交目标等信息,并且提交按钮的类型也只是button,那么所有操作都是靠onClick事件中的saveUserInfo()函数来执行了。我们描述一下这个函数:

JavaScript代码
  1. function saveUserInfo()   
  2. {   
  3.  //获取接受返回信息层   
  4.  var msg = document.getElementById("msg");   
  5.   
  6.  //获取表单对象和用户信息值   
  7.  var f = document.user_info;   
  8.  var userName = f.user_name.value;   
  9.  var userAge = f.user_age.value;   
  10.  var userSex = f.user_sex.value;   
  11.   
  12.  //接收表单的URL地址   
  13.  var url = "/save_info.php";   
  14.   
  15.  //需要POST的值,把每个变量都通过&来联接   
  16.  var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;   
  17.   
  18.  //实例化Ajax   
  19.  var ajax = InitAjax();   
  20.     
  21.  //通过Post方式打开连接   
  22.  ajax.open("POST", url, true);    
  23.   
  24.  //定义传输的文件HTTP头信息   
  25.  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  26.   
  27.  //发送POST数据   
  28.  ajax.send(postStr);   
  29.   
  30.  //获取执行状态   
  31.  ajax.onreadystatechange = function() {    
  32.   //如果执行状态成功,那么就把返回信息写到指定的层里   
  33.   if (ajax.readyState == 4 && ajax.status == 200) {    
  34.    msg.innerHTML = ajax.responseText;    
  35.   }    
  36.  }    
  37. }  


  大致使用POST方式的过程就是这样,当然,实际开发情况可能会更复杂,这就需要开发者去慢慢琢磨。

  4. 异步回调(伪Ajax方式)

  一般情况下,使用Get、Post方式的Ajax我们都能够解决目前问题,只是应用复杂程度,当然,在开发中我们也许会碰到无法使用Ajax的时候,但是我们又需要模拟Ajax的效果,那么就可以使用伪Ajax的方式来实现我们的需求。

  伪Ajax大致原理就是说我们还是普通的表单提交,或者别的什么的,但是我们却是把提交的值目标是一个浮动框架,这样页面就不刷新了,但是呢,我们又需要看到我们的执行结果,当然可以使用JavaScript来模拟提示信息,但是,这不是真实的,所以我们就需要我们的执行结果来异步回调,告诉我们执行结果是怎么样的。

  假设我们的需求是需要上传一张图片,并且,需要知道图片上传后的状态,比如,是否上传成功、文件格式是否正确、文件大小是否正确等等。那么我们就需要我们的目标窗口把执行结果返回来给我们的窗口,这样就能够顺利的模拟一次Ajax调用的过程。

  以下代码稍微多一点, 并且涉及Smarty模板技术,如果不太了解,请阅读相关技术资料。

  上传文件:upload.html


//上传表单,指定target属性为浮动框架iframe1
<form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1">
选择要上传的图片:<input type="file" name="image"><br />
<input type="submit" value="上传图片">
</form>
//显示提示信息的层
<div id="message" style="display:none"></div>

//用来做目标窗口的浮动框架
<iframe name="iframe1" width="0" height="0" scrolling="no"></iframe>


  处理上传的PHP文件:upload.php

PHP代码
  1. <?php   
  2.   
  3. /* 定义常量 */  
  4.   
  5. //定义允许上传的MIME格式   
  6. define("UPLOAD_IMAGE_MIME""image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png");    
  7. //图片允许大小,字节   
  8. define("UPLOAD_IMAGE_SIZE", 102400);   
  9. //图片大小用KB为单位来表示   
  10. define("UPLOAD_IMAGE_SIZE_KB", 100);    
  11. //图片上传的路径   
  12. define("UPLOAD_IMAGE_PATH""./upload/");    
  13.   
  14. //获取允许的图像格式   
  15. $mime = explode(",", USER_FACE_MIME);   
  16. $is_vaild = 0;   
  17.   
  18. //遍历所有允许格式   
  19. foreach ($mime as $type)   
  20. {   
  21.  if ($_FILES['image']['type'] == $type)   
  22.  {   
  23.   $is_vaild = 1;   
  24.  }   
  25. }   
  26.   
  27. //如果格式正确,并且没有超过大小就上传上去   
  28. if ($is_vaild && $_FILES['image']['size']<=USER_FACE_SIZE && $_FILES['image']['size']>0)   
  29. {   
  30.  if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))    
  31.  {   
  32.   $upload_msg ="上传图片成功!";   
  33.  }    
  34.  else    
  35.  {   
  36.   $upload_msg = "上传图片文件失败";   
  37.  }   
  38. }   
  39. else  
  40. {   
  41.  $upload_msg = "上传图片失败,可能是文件超过". USER_FACE_SIZE_KB ."KB、或者图片文件为空、或文件格式不正确";   
  42. }   
  43.   
  44. //解析模板文件   
  45. $smarty->assign("upload_msg"$upload_msg);   
  46. $smarty->display("upload.tpl");   
  47.   
  48. ?>  


模板文件:upload.tpl

{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if} 

回调的JavaScript函数,用来在父窗口显示信息
  1. function callbackMessage(msg)   
  2. {   
  3.  //把父窗口显示消息的层打开   
  4.  parent.document.getElementById("message").style.display = "block";   
  5.  //把本窗口获取的消息写上去   
  6.  parent.document.getElementById("message").innerHTML = msg;   
  7.  //并且设置为3秒后自动关闭父窗口的消息显示   
  8.  setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);   
  9. }  


  使用异步回调的方式过程有点复杂,但是基本实现了Ajax、以及信息提示的功能,如果接受模板的信息提示比较多,那么还可以通过设置层的方式来处理,这个随机应变吧。

  [结束语]

  这是一种非常良好的Web开发技术,虽然出现时间比较长,但是到现在才慢慢火起来,也希望带给Web开发界一次变革,让我们朝RIA(富客户端)的开发迈进,当然,任何东西有利也有弊端,如果过多的使用JavaScript,那么客户端将非常臃肿,不利于用户的浏览体验,如何在做到快速的亲前提下,还能够做到好的用户体验,这就需要Web开发者共同努力了。

原文地址: http://9host.cn/php/200742218322811257.html