AJAX基础解说 GET与POST提交

06年接触了AJAX技术,当时买本书看了看,感觉功能很好,对用户来说,不用像以前一样等页面完全返回后才能看到信息,AJAX可以实现局部刷新等功能,上网查查或买本书看看,就知道了.

学了没有多久,公司有个频道要开发(小说网),经理给我说了需求,根据他的要求我发现用AJAX技术能达,我学的是.NET,当然是NET+AJAX类型的网站了(http://novel.booye.com/),这是我第一个使用AJAX技术做的网站.

最近又用到AJAX技术,实现在做网站时,在某些功能上(比如三联动功能)我都会用AJAX技术去做,可以从网上下载到AjaxPro.dll组件,现在网上有不少示例.对于新手来说,在使用AJAX容易出现两种小问题 1.提交参数包含中文时,获取不到中文值 2.POST提交获取不到参数值

以前一直没有机会整理这些内容,以后慢慢把这方面的内容补充进来,有兴趣的朋友可以一块交流。

解决方法:1.中文参数要用escape(str)函灵数处理后在传递,否则获取不到值

                 2.POST提交时,要多加一段代码:

xmlHttp.setrequestheader("content-length",post.length); 
xmlHttp.setrequestheader(
"content-type","application/x-www-form-urlencoded");

否则也获取不到参数值

GET,POST提交示例: 

var xmlHttp;
function ajaxSubmit(site)
{
    createXMLHttpRequest();
    
    
//get提交
    var keywords = escape(document.getElementById("keywords").value);//escape()解决中文参数
    var url = "web.aspx?keywords="+keywords;
    xmlHttp.open(
"get",url,true);
    xmlHttp.onreadystatechange 
= callback;
    xmlHttp.send(
null);
    
    
//post提交
    var keywords = escape(document.getElementById("keywords").value);
    
var url = "web.aspx";
    
var postdate = "keywords="+keywords;
    xmlHttp.open(
"post",url,true);
    xmlHttp.setrequestheader(
"content-length",postdate.length);//post提交设置项
    xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded");//post提交设置项
    xmlHttp.onreadystatechange = callback;
    xmlHttp.send(postdate);
}

function createXMLHttpRequest()
{
    
if(window.ActiveXObject)
    
{
        xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
    }

    
else if(window.XMLHttpRequest)
    
{
        xmlHttp 
= new XMLHttpRequest();
    }

}

function callback()
{
    
if(xmlHttp.readyState == 4)
    
{
        
if(xmlHttp.status == 200)
        
{
             
var dates = xmlHttp.responseText;
             document.getElementById(
"obj").innerHTML=dates;
        }

    }
else
    
{
         document.getElementById(
"obj").innerHTML="正在加载数据,请稍等......";
    }

}
posted @ 2008-11-25 09:27  XGU_Winner  阅读(348)  评论(0编辑  收藏  举报