ajax实例入门代码

【 tulaoshi.com - Web开发 】

静态页面
代码如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title无标题页/title
script type="text/javascript" src="jquery/jquery.js"
//这里不可以用script type="" src="" /
/script
script type="text/javascript"
/*
encodeURI 方法
对URL传递的参数进行编码
将文本字符串编码为一个有效的统一资源标识符 (URI)。
*/
function createQueryString(){
var firstName=encodeURI($("#firstName").val());
var birthday=encodeURI($("#birthday").val());
//组合成对象的形式
var queryString={firstName:firstName,birthday:birthday};
return queryString;
}
function doRequestUsingGET(){
$.get("AjaxServe.aspx",createQueryString(),
//发送GET请求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
function doRequestUsingPOST(){
$.post("AjaxServe.aspx",createQueryString(),
//发送POST请求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
/script
/head
body
h2输入姓名和生日/h2
form
input type="text" id="firstName" /br /
input type="text" id="birthday" /

input type="button" value="GET" onclick="doRequestUsingGET();" /br /
input type="button" value="POST" onclick="doRequestUsingPOST();" /
/form
div id="serverResponse"/div
/body
/html


动态页面
代码如下：

protected void Page_Load(object sender, EventArgs e)
{
//Response.Write("后台数据");
if (Request.HttpMethod == "POST")
Response.Write("POST:" + Request["firstName"] + ",your birthday is" + Request["birthday"]);
else if(Request.HttpMethod=="GET")
Response.Write("GET:" + Request["firstName"] + ",your birthday is" + Request["birthday"]);
}