제출 폼 을 새로 고침 하지 않 는 등 ajax 관련 함수 세 개 를 발표 합 니 다.

몇 달 전에 프로젝트 수요 로 인해 저 는 아래 의 ajax 와 관련 된 함수 세 개 를 썼 습 니 다.발표 해서 여러분 과 나 누 겠 습 니 다.첫 번 째 는 새로 고침 없 이 HTML 을 불 러 오 는 것 입 니 다.두 번 째 는 폼 데 이 터 를 요청 문자열 로 변환 하 는 것 입 니 다.세 번 째 는 함수 1 과 함수 2 를 결합 한 새로 고침 없 는 제출 폼 을 실현 하 는 것 입 니 다.
또 하 나 는 새로 고침 폼 이 제출 되 지 않 고 파일 업 로드 를 처리 할 수 없다 는 점 이다.이것 은 브 라 우 저의 안전 설정 때문이다.현재 새로 고침 되 지 않 은 업 로드 는 일반적으로 iframe 으로 이 루어 집 니 다.이것 에 대해 서 는 구 글 에서 검색 하면 찾 을 수 있 습 니 다많다.
인터넷 에는 이미 우수한 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 <[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) 
}