OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

ajax实例入门代码

2022-2-5 17:01| 发布者: 菜鸟教程小白| 查看: 290| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 想学习ajax的朋友，如果刚开始接触可以查看极客世界的ajax栏目，之前的一些文章。

静态页面

<!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"]); 
}