Ajax 利用XMLHttpRequest、jquery几种实现[代码片段]

利用Ajax来动态获取时间的例子。

HTML代码:

View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!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 runat="server">

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>

    <script type="text/javascript" src="Scripts/jwy.js"></script>  

    

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="text" name="textbox" id="text1" />

        <input type="button" name="button" id="Button1" value="显示时间" onclick="btnclick()" />

    </div>

    

    </form>

</body>

</html>

创建一个“一般处理程序”来处理前台请求,返回系统当前时间:

Handler.ashx

View Code
<%@ WebHandler Language="C#" Class="Handler" %>



using System;

using System.Web;

using System.Linq;

using System.Collections.Generic;

using System.Text;



public class Handler : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        context.Response.Write(ShowTime());

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

    public static string ShowTime()

    {

        return DateTime.Now.ToString(); 

    }

   



}

js代码:

View Code
function btnclick() {

    var httprequest = null;

    // 初始化XMLHttpRequest对象

    if (window.XMLHttpRequest) {

        // Firefox等现代浏览器中的XMLHttpRequest对象创建

        httprequest = new XMLHttpRequest();

    }

    else if (window.ActiveXObject) {

        // IE中的XMLHttpRequest对象创建

        httprequest = new ActiveXObject("Microsoft.XMLHTTP");

    }

    if (!httprequest) {

        alert("创建httprequest对象出现异常!");

    }

    httprequest.open("POST", "Handler.ashx", true);

    //httprequest向handler发送post请求,最后参数是设定是否为异步请求,true为异步,false为同步

    httprequest.onreadystatechange = function () {

        //指定onreadystatechange事件句柄对应的函数

        if (httprequest.readyState == 4) {

            //4代表服务器返回完成

            if (httprequest.status == 200) {

                //200代表成功了

                document.getElementById("text1").value = httprequest.responseText;

                //responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml

            }

            else {

                alert("AJAX服务器返回错误!");

            }

        }

    }

    httprequest.send();

    //在这里才真正的向服务器端发送请求

}

我们用jquery来前台js代码会变得十分简洁:

基于jquery编写的js代码:【注意】:

HTML代码要把button的onclick事件去掉,因为我们直接在js用了事件绑定。

 

$(document).ready(function () {

    //button1绑定事件

    $("#Button1").bind("click", function () {

        $.ajax({

            url: "Handler.ashx",

            type: "POST",

            success: function (data) {

                //$("#text1").val(data);

                document.getElementById("text1").value = data;

            }

        });



    });



});

 

不得不说jquery“简约而不简单”……

 

jquery中的$.ajax集合了get、post方法,默认的是get。

如果直接用POST的话,代码更简单

$(document).ready(function () {

    //button1绑定事件

    $("#Button1").bind("click", function () {

        $.post("Handler.ashx", function (data) {

    document.getElementById("text1").value = data;

        

       });    

  });



});

 

 

你可能感兴趣的:(XMLhttpREquest)