ajax打开请求的两种方式(get,post)

ajax有三种打开服务的方式分别是get,post,head
head主要是获取服务器的一些头文件的信息，比如说charset,cont-type之类
这里主要讨论前两种方式，是实际中应用频繁的

一、get方式
get方式是最为常见的，一般实现用户登录，修改密码用的都是get方式

1，新建一html文档，body标签内容如下

< body  style ="text-align: center" >
     < input  type  ="text"  id  ="txt"   />
     < br  />
     < input  type  ="button"  value  ="get方式回调"   onclick  ="get()"   />
body >

2，js代码文件

var  xhr = getXHR(); // 获得xmlhttprequest对象,getXHR函数的具体实现这里不给出，因为非常简单

function  get()
{
     var  str = document.getElementById ( " txt " ).value;
     var  url = " PageAjax.aspx?argument= " + escape(str); // 编码str
    xhr.open( " get " ,url, true );
    xhr.onreadystatechange = renew;
    xhr.send( null ); // 不发送任何内容,因为url中包含了参数数据
}
function  renew()
{
     if  (xhr.readystate == 4 )
    {
         if  (xhr.status == 200 )
        {
             var  response = xhr.responsetext;
             var  res = response.split( ' \n ' );
            alert(res[ 0 ]);
        }
    }
}

3，服务器端PageAjax.aspx.cs文件代码如下

     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  (Request[ " argument " ]  !=   null )
        {
             string  res  = " 成功实现post方式回调！传入的参数是： " +  Request[ " argument " ].ToString() + " \n " ;
            Response.Write(res);
        }
    }

4，到此一个简单的get方式回调完成。

二、post方式

由于get方式每次都要传入参数到url地址上，像用户名，密码之类的参数由于字符比较少，完全可以考虑这中传递方式，但是当有很多参数、并且参数的字符串值很长时（比如博客，你不可能把整篇博客的内容都以参数的方式传递到url上），这种方式就不好了，由于有了post方式的出现。

1，新建一html文档，body标签内容如下

< textarea  id ="TextArea1"  style ="width: 323px; height: 76px" > textarea >
     < br  />
     < input  id ="Button1"  type ="button"  value ="post方式回调"  onclick ="post()"   />

2，js代码文件

var  xhr = getXHR(); // 获得xmlhttprequest对象,getXHR函数的具体实现这里不给出，因为非常简单
function  post() 
{
     var  str = document.getElementById ( " TextArea1 " ).value;
     var  poststr = " arg= " + str;
     var  url = " PageAjax.aspx?time= " + new  Date(); // 加一时间戳,放置发回的数据是服务器缓存的数据
    xhr.open( " post " ,url, true );
    xhr.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " );  // 告诉服务器发送的是文本
     // xhr.setRequestHeader("Content-Type", "text/xml"); //告诉服务器发送的是一个xml文件
    xhr.onreadystatechange = update;
    xhr.send(poststr); // 发送poststr数据到服务器
}
function  update()
{
     if  (xhr.readystate == 4 )
    {
         if  (xhr.status == 200 )
        {
             var  response = xhr.responsetext;
             var  res = response.split( ' \n ' );
            alert(res[ 0 ]);
        }
    }
}

3，服务器端PageAjax.aspx.cs文件代码如下

     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  (Request[ " arg " ]  !=   null )
        {
             string  res  =   " 成功实现get方式回调！传入的参数是： "   +  Request[ " arg " ].ToString()  +   " \n " ;
            Response.Write(res);
        }
    }

4，到此一个简单的post方式回调完成。

转载于:https://www.cnblogs.com/gisland/archive/2009/09/26/1574518.html