VB.NET 和 ASP.NET 中 AJAX 示例代码，无需使用 Ajax.dll

• 下载源代码 - 4.09 KB

引言

AJAX 代表异步 JavaScript 和 XML。初学者在学习 AJAX 时可能会觉得困难。他们可能会在看到使用 Atlas 的示例时感到困惑。本文主要面向 AJAX 初学者。示例代码非常简单且易于理解。此代码不使用 Ajax.dll。它使用 XmlHttp 对象来实现 AJAX。

使用代码

下载源代码，解压缩它，并在 IIS 中配置它。文件夹“Ajax_VB.Net”包含一个名为“DB Table”的子文件夹。此子文件夹包含一个 SQL 文件。在您的本地 SQL Server 中执行 SQL 文件。将创建一个名为“employee”的表。使用 SQL 文件中的 Insert 查询向表中添加更多数据。

执行项目 Ajax_VB.Net。单击按钮。该按钮是一个 HTML 按钮。它从表 'employee' 中获取员工数据，无需页面回发，并将数据填充到下拉列表中。当在下拉列表中选择特定记录时，所选员工姓名和员工 ID 将显示在标签中。

什么是 AJAX？

AJAX 代表异步 JavaScript 和 XML。它是一种浏览器技术。它是 JavaScript 和 XML 的组合。数据以 XML 形式传输。XMLHttp 对象用于 AJAX 进行数据传输。

为什么使用 AJAX？

AJAX 用于消除向服务器发送请求时的往返次数。简单来说，如果我们想在不刷新页面访问数据库的情况下，可以使用 AJAX。

GetData() 函数调用 GetEmployeeDetails 页面。在该页面中，从数据库检索员工详细信息，并返回到调用的 JavaScript 函数。从 Response 对象中评估返回值，并将其绑定到下拉列表中。

示例源代码

var xmlHttp

function GetData()
{
    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request")
        return;
    } 

    var url="GetEmployeeDetails.aspx"
    xmlHttp.onreadystatechange=stateChanged
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
} 

function stateChanged() 
{ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    { 
        var response=xmlHttp.responseText;
        response=response.substring(0,response.indexOf("<!DOCTYPE")-4);

        if(response=="Empty")
        {
            alert("No Record Found !!!");
        }
        else if(response=='Error')
        {
            alert("An Error occured in accessing the DataBase !!!");
        }
        else
        {
            var arr=response.split("~");
            var empID=arr[0].split(",");
            var empName=arr[1].split(",");

            document.getElementById('dlistEmployee').length=0;

            for(var i=0;i<empID.length;i++)
            {
                var o = document.createElement("option");
                o.value = empID[i];
                o.text = empName[i];
                document.getElementById('dlistEmployee').add(o);
            }
        }
    } 
} 

function GetXmlHttpObject()
{ 
    var objXMLHttp=null

    if (window.XMLHttpRequest)
    {
        objXMLHttp=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
        objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    return objXMLHttp
} 

function display()
{
    var selIndex=document.getElementById("dlistEmployee").selectedIndex;
    var empName=document.getElementById("dlistEmployee").options(selIndex).text;
    var empID=document.getElementById("dlistEmployee").options(selIndex).value;

    document.getElementById("lblResult").innerHTML="You have selected " + 
                            empName + " ( ID : " + empID + " )";
}