ajax打开请求的两种方式(get,post)
ajax有三种打开服务的方式分别是get,post,head
head主要是获取服务器的一些头文件的信息，比如说charset,cont-type之类
这里主要讨论前两种方式，是实际中应用频繁的
一、get方式
get方式是最为常见的，一般实现用户登录，修改密码用的都是get方式
1，新建一html文档，body标签内容如下
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>
<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]);
}
}
}
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);
}
}
{
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()" />
<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]);
}
}
}
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);
}
}
{
if (Request["arg"] != null)
{
string res = "成功实现get方式回调！传入的参数是：" + Request["arg"].ToString() + "\n";
Response.Write(res);
}
}
4，到此一个简单的post方式回调完成。
