AJAX基础解说 GET与POST提交-web技术文档


用户名：	密码：
	飞诺网	加入收藏

飞诺网网页设计 FrontPage Dreamweaver html Javascript css 网页制作技巧网页特效色彩原理设计理念 web技术文档

FrontPage Dreamweaver html Javascript css 网页制作技巧网页特效色彩原理设计理念 web技术文档

您当前的位置：飞诺网 >> 网页设计 >> web技术文档

AJAX基础解说 GET与POST提交

www.diybl.com 时间： 2010-11-12 作者：佚名编辑：fnw 点击： [ 评论 ]

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提交时,要多加一段代码:

diyblPic

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

否则也获取不到参数值

GET，POST提交示例:

diyblPic

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="正在加载数据,请稍等......";
    }
}