Ajax基本步骤

最新推荐文章于 2024-07-25 12:41:07 发布

jjjjlele

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量289

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest button microsoft 服务器浏览器

本文链接：https://blog.csdn.net/jjjjlele/article/details/6588973

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。
2. 设置XMLHttpRequest对象的onReadyStateChange属性，指定服务器返回响应数据时要调用的回调函数，即指
定响应处理函数。
3. 调用XMLHttpRequest对象的open方法，创建http请求。
4. 调用XMLHttpRequest对象的setResouceHeader等方法，设置必要的http请求头信息。
5. 调用XMLHttpRequest对象的send方法，发送之前创建的http请求。
6. 根据XMLHttpRequest对象的open方法参数，决定等待或者不等待服务器回响应数据。如果服务器返回响应数据
，则将控制权交给之前设置回调函数。

例子：

客户端：

<!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="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
// <![CDATA[

        function Button1_onclick() {
//            var amount = $("#Text1").val();
            //            var moneytype = $("#Select1").val();
            var amount = document.getElementById("Text1").value;
            var moneytype = document.getElementById("Select1").value;
            http_request = false;
            //创建xmlhttprequest对象
            if (window.XMLHttpRequest) {
                //非IE浏览器
                http_request = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    http_request = new ActiveXObject("Msxml12 XMLHTTP"); //较新版本的IE浏览器

                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft XMLHTTP"); //旧版本的IE
                    } catch (e) { }
                }

            } else {
                window.alert("不能创建XMLHTTPREQUEST对象");
                return false;
            }

            //制定回调函数
            http_request.onreadystatechange= function () {
                if (http_request.readyState == 4)//发送成功
                {
                    if (http_request.status == 200)//交易成功
                    {
                        document.getElementById("Text2").value = http_request.responseText;
                    } else {
                            window.alert("AJAX返回错误!")
                    }
                }
            }

//创建http请求
http_request.open("post","huilv.ashx?amount=" + amount + "&moneytype=" + moneytype, true);

            //发送上面创建的http请求
            http_request.send(null);
        }

// ]]>
    </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="计算汇率"
        οnclick="return Button1_onclick()" />
    <input id="Text2" type="text" />
</body>
</html>

服务器端：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxTest
{
    /// <summary>
    /// huilv 的摘要说明
    /// </summary>
    public class huilv : IHttpHandler
    {

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


        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

jjjjlele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基本步骤

1. 初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。2. 设置XMLHttpRequest对象的onReadyStateChange属性，指定服务器返回响应数据时要调用的回调函数，即指定响应处理函数。3. 调用XMLHttpRequest对象的open方法，创建
复制链接

扫一扫

专栏目录