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对象

Handler1.ashx.cs:

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

namespace WebApplication1
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString());
        }

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

HTMLPage1.htm:

<!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 type="text/javascript">
        function btn_Click() {
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHTTP对象
            if (!xmlhttp) {
                return false;
            }

　　　 //传中文参数encodeURI(中文)

//缓存问题，返回的不一样，加一个每次都会变的东西，xmlhttp.open("POST", "Handler1.ashx?ts="+new Date(), false);

xmlhttp.open("POST", "Handler1.ashx", false);//准备向服务器的
Handler1.ashx发出Post请求

            xmlhttp.onreadystatechange = function () {//监听onreadystatechange事件
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {

　　　　　　　　//responseText属性为服务器返回的文本
                        document.getElementById("Text1").value = xmlhttp.responseText;
                    }
                    else {
                        alert("AJAX服务器返回错误");
                    }
                }
            }
            xmlhttp.send();

        }
    </script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="button" onclick="btn_Click()" />
</body>
</html>

开发一个AJAX功能需要开发服务端和客户端两块程序。以一个现实服务端时间为例。首先开发一个Handler1.ashx，输出当前时间。在HTML页面中放一个按钮，在按钮的onclick中创建XMLHTTP向Handler1.ashx发送请求，获得返回的数据并且显示到界面上。面试常考：不使用UpdatePanel，JQuery等AJAX库编写一个AJAX程序。

也可以在xmlhttp.open中向服务器传递参数：

xmlhttp.open("POST", "Handler1.ashx?id=1", false);

如果传递给服务器的请求里有中文，则需要使用JavaScript函数encodeURI来进行URL编码。

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

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

namespace WebApplication1
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string amount = context.Request["amount"];
            string moneytype = context.Request["moneytype"];
            int iAmount = Convert.ToInt32(amount);
            if (moneytype=="1")
            {
                context.Response.Write(iAmount/7);
            }
            else if (moneytype=="2")
            {
                context.Response.Write(iAmount * 10);
            }
            else if (moneytype=="3")
            {
                context.Response.Write(iAmount *10/9);
            }
        }

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

<!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 type="text/javascript">
        function Button1_onclick() {
            var amount = $("#Text1").val();
            var moneytype = $("#Select1").val();

        }
    </script>
</head>
<body>
    <input id="Text1" type="text" />
    <select id="Select1" name="D1">
        <option value="1">美元</option>
        <option value="2">日元</option>
        <option value="3">港元</option>
    </select>

    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />

JQuery AJAX（做项目用）

new ActiveXObject("Microsoft.XMLHTTP")是IE中穿件XMLHTTPRequest对象的方法。非IE浏览器中创建方法是new XmlHttpRequest()。为了兼容不同的浏览器需要编写很多代码。

回调函数中data参数为服务器返回的数据，textStatus为服务器返回状态码，textStatus为"success"表示成功。

JQuery中提供了简化ajax使用的方法。$.ajax()函数是JQuery中提供的ajax访问函数，$.post()是对$.ajax()的post方式提交ajax查询的封装，$.get()是对$.ajax()的get()方式提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题。演示，get方式中缓存处理的处理方法。

如果有请求参数则在第二个参数用字典方式来设置。

$.post("Handler.ashx",{"id":"2"}.function(data,textStatus){.JQuery帮我们进行了URL编码，因此参数中有中文也不用担心。)

案例：JQuery AJAX版的汇率转换。

posted @ 2012-10-07 16:33 joesphos 阅读(224) 评论(0) 收藏举报

刷新页面返回顶部

joesphos

AJAX简介

公告