ajax 无刷新提交 - 中国源码教程网

第一个是用来无刷新加载一段HTML
第二个是把表单数据转换成一串请求字符串
第三个是结合函数一和函数二的无刷新提交表单实现。

还有一点要提到的是，无刷新表单提交，还不能对文件上传进行处理，这个主要是因为浏览器的安全设置。目前无刷新的上传，一般是用iframe来实现的。关于这个，我们在google里搜索能找到很多。

网上虽然已经有很多优秀的ajax的类和函数了，但是或许我这几个函数对大家还有点用处，于是我就发布出来了。
可以在这里下载。

//@desc load a page(some html) via xmlhttp,and display on a container //@param url the url of the page will load,such as "index.php" //@param request request string to be sent,such as "action=1&name=surfchen" //@param method POST or GET //@param container the container object,the loaded page will display in container.innerHTML //@usage // ajaxLoadPage('index.php','action=1&name=surfchen','POST',document.getElementById('my_home')) // suppose there is a html element of "my_home" id,such as "<span id='my_home'></span>" //@author SurfChen <surfchen@gmail.com> //@url http://www.surfchen.org/ //@license http://www.gnu.org/licenses/gpl.html GPL

if (!window.XMLHttpRequest) {
    window.XMLHttpRequest=function (){
     return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function ajaxLoadPage(url,request,method,container)
{
 method=method.toUpperCase();
 var loading_msg='Loading...';//the text shows on the container on loading.
 var loader=new XMLHttpRequest;//require Cross-Browser XMLHttpRequest
 if (method=='GET')
 {
  urls=url.split("?");
  if (urls[1]=='' || typeof urls[1]=='undefined')
  {
   url=urls[0]+"?"+request;
  }
  else
  {
   url=urls[0]+"?"+urls[1]+"&"+request;
  }
  
  request=null;//for GET method,loader should send NULL
 }
 loader.open(method,url,true);
 if (method=="POST")
 {
  loader.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 }
 loader.onreadystatechange=function(){
  if (loader.readyState==1)
  {
   container.innerHTML=loading_msg;
   
  }
  if (loader.readyState==4)
  {
   container.innerHTML=loader.responseText;
  }
 }
 loader.send(request);
}
//@desc      transform the elements of a form object and their values into request string( such as "action=1&name=surfchen")
//@param     form_obj            the form object
//@usage     formToRequestString(document.form1)
//@notice    this function can not be used to upload a file.if there is a file input element,the func will take it as a text input.
//           as I know,because of the security,in most of the browsers,we can not upload a file via xmlhttp.
//           a solution is iframe.
//@author    SurfChen <surfchen@gmail.com>
//@url     http://www.surfchen.org/
//@license http://www.gnu.org/licenses/gpl.html GPL
function formToRequestString(form_obj)
{
 var query_string='';
 var and='';
 //alert(form_obj.length);
 for (i=0;i<form_obj.length ;i++ )
 {
  e=form_obj[i];
  if (e.name!='')
  {
   if (e.type=='select-one')
   {
    element_value=e.options[e.selectedIndex].value;
   }
   else if (e.type=='checkbox' || e.type=='radio')
   {
    if (e.checked==false)
    {
     break; 
    }
    element_value=e.value;
   }
   else
   {
    element_value=e.value;
   }
   query_string+=and+e.name+'='+element_value.replace(/\&/g,"%26");
   and="&"
  }
  
 }
 return query_string;
}
//@desc      no refresh submit(ajax) by using ajaxLoadPage and formToRequestString
//@param     form_obj            the form object
//@param     container            the container object,the loaded page will display in container.innerHTML
//@usage     ajaxFormSubmit(document.form1,document.getElementById('my_home'))
//@author    SurfChen <surfchen@gmail.com>
//@url     http://www.surfchen.org/
//@license http://www.gnu.org/licenses/gpl.html GPL
function ajaxFormSubmit(form_obj,container)
{
 ajaxLoadPage(form_obj.getAttributeNode("action").