首页 > 代码库 > AJAX 简单上手

AJAX 简单上手

AJAX简介

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

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

 

XMLHTTPRequest对象

AJAX的编写流程:
1.创建一个ActiveXObject类
2.open打开对象,并指定提交类型,请求页面
3.判断状态,进行相应的处理
4.对象send请求


开发一个AJAX功能需要开发服务端和客户端两块程序。以一个显示服务端时间为例
首先开发一个GetDate1.ashx,输出当前时间,在HTML页面中放一个按钮,在按钮的onclick中
创建XMLHTTP向GetDate1.ashx发送请求,获得返回的数据并且显示到界面上
面试常考:不使用UpdatePanel、JQuery等AJAX库编写一个AJAX程序
也可以在xmlhttp.open中向服务器传递参数:xmlhttp.open("POST","GetDate1.ashx?id=1", false),
如果传递给服务器的请求里有中文,则需要使用Javascript函数encodeURI来进行URL编码

案例1:将服务器的当前时间写入到 HTML中的Text中,要求不提交表单

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

2.写入AJAX的框架,在后台请求数据

<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 =http://www.mamicode.com/ xmlhttp.responseText;                                             //responseText属性为服务器返回的文本                 }                else {alert("AJAX无法请求!");}              }            }            xmlhttp.send();  //这时才开始发送请求       } </script>

缓存的处理
只有GET请求才会有缓存,是由于它会判断请求的内容是否一样,如果一样则返回缓存
如果是POST请求就不会有缓存,处理原理:给它提交的内容里面,每次都不一样,如加入当前时间
如下 :

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

中文的处理
如果在请求中含有中文的话,可能会出现乱码,解决办法:利用encodeURI()进行转换
如下是没有做处理的:

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

如下是处理过的:

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

案例2:

用AJAX实现汇率转换,页面放一个文本框 (输入人民币)、一个下拉列表 (美元,日元, 币)、一个按钮,点击按钮在一个span中
显示转换后的金额。汇率计算在服务器端完成,假设汇率 (人民币/外币 ):7、0.1、0.9

1.HTMl页面设计,一个文本,一个下拉列表,一个按钮,一个文本

<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" />

2.Javascript的编写(单击事件)AJAX的框架

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 =http://www.mamicode.com/ xmlhttp.responseText;            }         }     }     xmlhttp.send();  }

3.后台处理程序的编写 huilv.ashx

 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);            }        }

 

AJAX 简单上手