A few months ago, I wrote the following three AJAX-related functions because of the project requirements. Publish it and share it with you.
The first is used to load a section of HTML without refreshing
The second is to convert the form data into a string of request strings
The third is to combine function one and function two without refreshing submission form implementation.
Another point to mention is that there is no refresh form submission and the file upload cannot be processed, primarily because of the browser's security settings. At present, there is no refresh upload, usually with an iframe to achieve. On this, we search in Google to find a lot.
Although there are already many excellent AJAX classes and functions on the Internet, but perhaps I have some of the functions of some useful, so I released.
can be downloaded here.
Copy Code code as follows:
@desc load a page (some HTML) via Xmlhttp,and display on a container
@param url The URL of the page would 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 would 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=surfch En ")
@param form_obj the Form object
@usage formtorequeststring (DOCUMENT.FORM1)
@notice This function can do used to upload a file.if there is a file input element,the func would 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 would 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 )
}
