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

最新推荐文章于 2024-08-14 14:06:34 发布

zhanzkw

最新推荐文章于 2024-08-14 14:06:34 发布

阅读量640

点赞数

分类专栏： AJAX 文章标签： ajax 服务器 javascript button function input

本文链接：https://blog.csdn.net/studyalllife/article/details/6765324

版权

AJAX 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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="获取时间" οnclick="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="获取时间" οnclick="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" οnclick="return Button1_onclick()" />
    <input id="Text2" type="text" />

</body>
</html>

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 笔记1：如何开发原始的AJAX程序

AJAX （ Asynchronous JavaScript and XML ，异步 JavaScript 和XML ）是一种进行页面局部异步刷新的技术。用 AJAX 向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在 HTML 页面中使用
复制链接

扫一扫

专栏目录