AJAX 笔记1：如何开发原始的AJAX程序

来源：互联网发布：最新搜片软件编辑：程序博客网时间：2024/05/21 01:28

AJAX （ Asynchronous JavaScript and XML ，异步 JavaScript 和XML ）是一种进行页面局部异步刷新的技术。

用 AJAX 向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在 HTML 页面中使用 JavaScript 创建XMLHTTP Request 对象（就像WebClient对象，就是网页中的网页）来向服务器发出请求以及获得返回的数据，就像 JavaScript 版的 WebClient 一样，在页面中由XMLHTTP Request 来发出 Http 请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTP Request 是 AJAX 的核心对象，实现AJAX最终要借助于它。

如何开发AJAX程序：

开发一个 AJAX 功能需要开发服务端和客户端两块程序。以一个显示服务端时间为例。首先开发一个 GetDate1.ashx ，输出当前时间。在HTML 页面中放一个按钮，在按钮的 onclick 中创建 XMLHTTP 向GetDate1.ashx 发送请求，获得返回的数据并且显示到界面上。

案例：不用AJAX框架，写出一个AJAX程序（重点，面试常考）
第一步：创建一个GetDate1.ashx，用于返回服务器上的时间

<%@ WebHandler Language="C#" Class="GetDate1" %>using System;using System.Web;public class GetDate1 : IHttpHandler {        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        context.Response.Write(DateTime.Now.ToString());//返回服务器上的时间    }     public bool IsReusable {        get {            return false;        }    }}

第二步：创建一个html页面（客户端的页面）

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    //核心代码，必须会写！    <script type="text/javascript">        function btnClick() {           ①： var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，负责网页和服务器的一个页面之间通讯，相当于WebClient，            //这一段if判断代码可有可无            if (!xmlhttp) {                alert("创建xmlhttp对象异常！");                return false;            }         ②：   xmlhttp.open("POST", "GetDate1.ashx?ts" + new Date(), false); //准备向服务器的GetDate1.ashx发出Post请求         ③ ：   //下面一段代码：注册事件            //XMLHTTP默认不是同步请求的，也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回的，            //XMLHTTP是异步的，因此需要监听onreadystatechange事件            xmlhttp.onreadystatechange = function () {                if (xmlhttp.readyState == 4) {//服务器xmlhttp有很多状态，当readyState为4的时候，表示服务器成功返回                    if (xmlhttp.status == 200) {//如果状态码是200则是成功                        document.getElementById("Text1").value = xmlhttp.responseText;                    }                    else {                        alert("AJAX服务器返回错误！");                    }                }            }           ④： xmlhttp.send(); //这才是开始发送请求        }    </script></head><body>    <input id="Text1" type="text" />    <input id="btnPost" type="button" value="获取时间" onclick="btnClick()"/></body></html>

还可以向服务器传参数：
可以在 xmlhttp.open 中向服务器传递参数： xmlhttp.open("POST", "GetDate1.ashx?id=1", false) ，如果传递给服务器的请求里有中文，则需要使用 Javascript 函数 encodeURI 来进行 URL 编码。

服务器端获取参数：

<%@ WebHandler Language="C#" Class="GetDate1" %>using System;using System.Web;public class GetDate1 : IHttpHandler {        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        string id=context.Request["id"];//服务器端获取参数        context.Response.Write(DateTime.Now.ToString()+"----"+id);//返回给客户端    }     public bool IsReusable {        get {            return false;        }    }}

客户端传参数：

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript">        function btnClick() {            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于WebClient            //这一段if判断代码可有可无            if (!xmlhttp) {                alert("创建xmlhttp对象异常！");                return false;            }            //加上时间字符串或者随机字符什么的避免服务器之发送缓存ts" + new Date()，如果不加的话，服务器会省事地给客户端发送缓存，这样客户端接收的东西是不会变的           //如果只传输非中文字符，则直接id=xxx即可。            xmlhttp.open("POST", "GetDate1.ashx?id="+encodeURI("中国")+"&ts" + new Date(), false); //准备向服务器的GetDate1.ashx发出Post请求            //下面一段代码：注册事件            //XMLHTTP默认不是同步请求的，也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回的，            //XMLHTTP是异步的，因此需要监听onreadystatechange事件            xmlhttp.onreadystatechange = function () {                if (xmlhttp.readyState == 4) {                    if (xmlhttp.status == 200) {//如果状态码是200则是成功                        document.getElementById("Text1").value = xmlhttp.responseText;                    }                    else {                        alert("AJAX服务器返回错误！");                    }                }            }            xmlhttp.send(); //这才是开始发送请求        }    </script></head><body>    <input id="Text1" type="text" />    <input id="btnPost" type="button" value="获取时间" onclick="btnClick()"/></body></html>

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

服务器端：money.ashx

<%@ WebHandler Language="C#" Class="money" %>using System;using System.Web;public class money : IHttpHandler {        public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        string amount = context.Request["amount"];        string moneytype = context.Request["moneytype"];        int Smount = Convert.ToInt32(amount);        if (moneytype == "1")//美元        {            context.Response.Write(Smount/7);         }        else if (moneytype == "2")//日元        {            context.Response.Write(Smount*10);        }        else if (moneytype == "3")//港币        {            context.Response.Write(Smount*10/9);         }            }     public bool IsReusable {        get {            return false;        }    }}

客户端html（使用JQuary）：

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <script language="javascript" type="text/javascript">        function Button1_onclick() {            var amount = $("#Text1").val();            var moneytype = $("#Select1").val();            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于WebClient            //这一段if判断代码可有可无            if (!xmlhttp) {                alert("创建xmlhttp对象异常！");                return false;            }            xmlhttp.open("POST", "money.ashx?amount=" + amount + "&moneytype=" + moneytype + "&ts" + new Date(), false); //准备向服务器的GetDate1.ashx发出Post请求            //下面一段代码：注册事件            //XMLHTTP默认不是同步请求的，也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回的，            //XMLHTTP是异步的，因此需要监听onreadystatechange事件            xmlhttp.onreadystatechange = function () {                if (xmlhttp.readyState == 4) {                    if (xmlhttp.status == 200) {//如果状态码是200则是成功                        $("#Text2").val(xmlhttp.responseText);                    }                    else {                        alert("AJAX服务器返回错误！");                    }                }            }            xmlhttp.send(); //这才是开始发送请求        }    </script></head><body> <input id="Text1" type="text" />    <select id="Select1">        <option value="1">美元</option>        <option value="2">日元</option>        <option value="3">港币</option>    </select>    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />    <input id="Text2" type="text" /></body></html>