AJAX 简单上手

没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,如实现显示服务器的时间
每次都要刷新页面的坏处：页面刷新打断用户操作、速度慢、增加服务器的流量压力。如果没有AJAX，
在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页，页面就会刷新，视频就会被打断

AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种进行页面局部异步刷新
的技术。用AJAX 向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，
而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数 
据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的
返回数据，这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象

<input id="Text1" type="text" />
<input id="Submit1" type="button" value="当前时间" onclick="btnGetdate()" />

<script type="text/javascript">
   function btnGetdate() {
       var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  //创建XMLHTTP对象,相当于WebClient
       if (!xmlhttp) {
                alert("创建xmlhttp对象异常！");
                return false;
        }
    xmlhttp.open("Get", "GetDate.ashx", false);   //如果是GET请求,可能会出现缓存,flase 为同步,true 为异步

    //准备向服务器的GetDate.ashx发出Get请求
        //XMLHTTP默认(推荐)不是同步请求的,也就是open方法并不像WebClinent的DownloadString
    //那样把服务器返回的数据拿到才返回，是异步的,因此需要监听onreadystatechange事件(准备状态事件)
    
    xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {   //服务器返回了
                if (xmlhttp.status == 200) { //如果状态码为200则是成功
                    document.getElementById("Text1").value = xmlhttp.responseText;
                                             //responseText属性为服务器返回的文本 
                }
                else {alert("AJAX无法请求！");}
              }
            }
            xmlhttp.send();  //这时才开始发送请求
       }
 </script>

 xmlhttp.open("Get", "GetDate.ashx?date="+new Date(), false);  //date普通参数 new 当前时间

xmlhttp.open("Get", "GetDate.ashx?&text=中国", false);

xmlhttp.open("post", "GetDate.ashx?id="+encodeURI(‘中国‘), false); 

<input id="count" type="text" />
 <select id="SelectType" name="D1">
   <option value="1">美元</option>
   <option value="2">日元</option>
   <option value="3">港币</option>
 </select>
 <input id="Button1" type="button" value="转换" onclick="zhuanghuan()"/>   //指定单击事件
 <input id="requst" type="text" />

function zhuanghuan() {
  var amount = document.getElementById("count").value;
  var type = document.getElementById("SelectType").value;
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  
  if (!xmlhttp) {
            alert("创建xmlhttp对象异常！");
   }
   xmlhttp.open("Post", "huilv.ashx?amount=" + amount + "&type=" + type);
   xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
                document.getElementById("requst").value = xmlhttp.responseText;
            }
         }
     }
     xmlhttp.send();
  }

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int amount =Convert.ToInt32(context.Request["amount"]);
            int type =Convert.ToInt32(context.Request["type"]);
            if (type == 1) //美元
            {
                context.Response.Write(amount / 7);
            }
            else if(type == 2)//日元
            {
                context.Response.Write(amount * 11);
            }
            else if (type == 3)//港币
            {
                context.Response.Write(amount * 10 / 9);
            }
        }