发布三个ajax相关的函数,包括无刷新提交表单等

 更新时间:2006年08月15日 00:00:00   作者:  

几个月前,因为项目需求,我写了下面的三个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
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").value,formToRequestString(form_obj),form_obj.method,container)
}

相关文章

  • jQuery Ajax的readyState和status的区别和使用详解

    jQuery Ajax的readyState和status的区别和使用详解

    在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事,非常不错,对ajax readystate和status区别和使用感兴趣的朋友一起学习吧
    2017-03-03
  • ajax获取php页面的返回参数,控件赋值的方法

    ajax获取php页面的返回参数,控件赋值的方法

    下面小编就为大家带来一篇ajax获取php页面的返回参数,控件赋值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 探讨Ajax中的一些小问题

    探讨Ajax中的一些小问题

    在ajax使用过程经常会遇到各种各样的问题,今天小编给大家分享ajax中的一些小问题,比较实用,感兴趣的朋友可以参考下
    2016-05-05
  • 基于HTML5的可预览多图片Ajax上传

    基于HTML5的可预览多图片Ajax上传

    这篇文章主要为大家详细介绍了基于HTML5的可预览多图片Ajax上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • IE6中ajax aborted错误请求中断解决方法

    IE6中ajax aborted错误请求中断解决方法

    给a标签绑定了一个click事件用来触发ajax请求,在IE6中,请求时常会被中断,在其他浏览器中都一切正常,具体解决方法如下,感兴趣的朋友可以参考下
    2013-06-06
  • java+jquery处理xml数据的方法

    java+jquery处理xml数据的方法

    这篇文章主要介绍了java+jquery处理xml数据的方法,实例分析了Ajax处理XML数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 面试必备之ajax原始请求

    面试必备之ajax原始请求

    AJAX可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,下面这篇文章主要给大家介绍了关于ajax原始请求的相关资料,需要的朋友可以参考下
    2021-12-12
  • 关于ajax异步访问数据的问题

    关于ajax异步访问数据的问题

    这篇文章主要介绍了ajax异步访问数据的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • 编写轻量ajax组件02--浅析AjaxPro

    编写轻量ajax组件02--浅析AjaxPro

    ajaxpro虽然是一个比较老的组件,不过实现思想和源码还是很有借鉴价值的。接下来通过本篇文章给大家介绍编写轻量ajax组件02--浅析AjaxPro,感兴趣的朋友可以参考下
    2015-11-11
  • ajax上传多图到php服务器的方法

    ajax上传多图到php服务器的方法

    这篇文章主要为大家详细介绍了ajax上传多图到php服务器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05

最新评论