ajax 学习笔记之二 POST GET方式提交数据

来源:互联网 发布:淘宝网银支付到账 编辑:程序博客网 时间:2024/05/16 12:08

//begin

//-创建基本信息:
<script language="javascript" type="text/javascript">
var xmlHttp;
//创建xml实例
function createXmlHttpRequest()
    {
 if(window.ActiveXObject)
    {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//兼容IE浏览器
           }
 else if(window.XMLHttpRequest)//兼容非IE浏览器
   {
      xmlHttp=new XMLHttpRequest();
   }
   }
//响应事件
function handleStateChange()
   {
      if(xmlHttp.readyState==4)
 {
   if(xmlHttp.status==200)
      {
         var td=document.getElementById("td3");
     var writeOk=xmlHttp.responseText;
     if(writeOk==1)
        {
          clearValue(); 
          td.innerHTML="信息保存成功";
        }
     else
        {
          td.innerHTML=xmlHttp.responseText;//"信息保存失败,请稍后再试!";
        }
    }
 }
   }

function getValue()
{
   var str1=document.getElementById("Text1").value;
   var str2=document.getElementById("TextArea1").value;
   var temp="id1="+str1+"&id2="+str2;
   return temp;
}
function clearValue()
{
   var str1=document.getElementById("Text1");
   var str2=document.getElementById("TextArea1");
   str1.value="";
   str2.value="";
}
//================================================================
//1.Get方式提交数据,及其服务器端的响应。
//说明:使用Get发送请求时,查询串会追加到Url中。
function sendRequestDoGet()
 {
    createXmlHttpRequest();
    var sql=getValue();
    var url="AjaxServer/AddInfoServer.aspx?"+sql;
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.send(null);
 }
//Asp.Net,服务器端接收Get发送的参数:Request.QueryString["id1"].ToString();
//其他服务器端技术请参照具体语言获取参数的方法。

//2.Post方式提交数据,及其服务器端的响应。(post方式可以避免中文乱码问题)
//说明:为了确保服务器端知道请求体中有参数,需要调用setRequestHeader将Content-Type
//设置为"application/x-www-form-urlencoded",最后再使用send()方法发送参数。
function sendRequest()
   {
       createXmlHttpRequest();
       var sql=getValue();
       var url="AjaxServer/AddInfoServer.aspx";
       //var url="AjaxServer/AddInfoServer.aspx?time="+new Date().getTime();
       xmlHttp.open("POST",url,true);
       xmlHttp.onreadystatechange=handleStateChange;
       xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xmlHttp.send(sql);
  }
</script>
//Asp.Net,服务器端响应:Request.Form["id1"].ToString();
//var url="AjaxServer/AddInfoServer.aspx?time="+new Date().getTime();
//在url中追加一个时间戳参数,是因为在有些浏览器会把多个XMLHttpReques请求的结果缓存在同一个URL下
//如果对请求的响应不动,就会带来不好的结果。把当前时间戳加到URL中可以确保URL的唯一性,从而避免
//浏览器缓存结果。end

 
原创粉丝点击