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

  }