AJAX技术小实例

walleyekneel · 发表于 2013-1-23 01:35:02

<!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 src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
      var xmlHttp = null;
      function createXMLHttp()
      {
         if(window.ActiveXObject)
            {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
         else if(window.XMLHttpRequest)
            {
                  xmlHttp = new XMLHttpRequest();
            }
      }
      function checka()
      {
         createXMLHttp();
            var txt=$("#Text1").val();
            var url = "ajaxTest.ashx?txt="+txt;
            xmlHttp.open("post",url,true);//采用post传输数据不会中断，并且传输容量可以达到4M true表示同步传输  false表示异步传输
            xmlHttp.onreadystatechange = sub;
            xmlHttp.send();
      }
      function sub()
      {
         if(xmlHttp.readyState == 4&&xmlHttp.status==200)
         {
            var txt=xmlHttp.ResponseText;
            $("#Text2").val(txt);
         }
      }

//以下是jquery的AJAX
$(function(){
   $("#Button2").click(function(){
      var value=$("#Text1").val();
      $.post("ajaxTest.ashx?"+new Date(),{txt:value},function(data,textStatus){
            alert(data);
            alert(textStatus);

      });
   // alert(value);
   });
})

</script>

</head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="ajax测试"  />
<input id="Button2" type="button" value="ajax测试jquery"  />
<input id="Text2" type="text" />
</body>
</html>

以下是ajaxTest.ashx页面

<%@ WebHandler Language="C#" Class="ajaxTest" %>

using System;
using System.Web;

public class ajaxTest : IHttpHandler {

public void ProcessRequest (HttpContext context) {
      context.Response.ContentType = "text/plain";
   // context.Response.Write("Hello World");
      string txt = context.Request["txt"];
      context.Response.Write(txt);
}

public bool IsReusable {
      get {
         return false;
      }
}

}

//注册无刷新提示用户是否存在，自己修改一下就OK 迟点再整理好点
function FunAjax()
{
$.ajax({
      type: "POST",
      url: "jQueryAjaxTest.ashx",
      data: "begin=1&end=9",
      beforeSend: function(){
         $("#span_content").text("数据处理中...");
      },
      success: function(msg){
         $("#span_content").text("两个数的和为： " + msg);
      }
});
}

//这个网址不错。介绍AJAX用法。。附带有实例。。傻瓜都能看懂。。。
http://www.w3school.com.cn/jquery/ajax_post.asp

		自动登录	找回密码
密码			立即注册