DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 發布三個ajax相關的函數,包括無刷新提交表單
發布三個ajax相關的函數,包括無刷新提交表單
編輯:AJAX詳解     

幾個月前,因為項目需求,我寫了下面的三個AJax相關的函數。發布出來和大家分享。
第一個是用來無刷新加載一段Html
第二個是把表單數據轉換成一串請求字符串
第三個是結合函數一和函數二的無刷新提交表單實現。

還有一點要提到的是,無刷新表單提交,還不能對文件上傳進行處理,這個主要是因為浏覽器的安全設置。目前無刷新的上傳,一般是用iframe來實現的。關於這個,我們在google裡搜索能找到很多。

網上雖然已經有很多優秀的AJax的類和函數了,但是或許我這幾個函數對大家還有點用處,於是我就發布出來了。
可以在這裡下載。


[復制此代碼]CODE:
//@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 <[email protected]>
//@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 <[email protected]>
//@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 <[email protected]>
//@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)
}

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved