ASP.NET中手工编码应用AJAX

在ASP.NET页面可中手工编码应用AJAX，根据用户输入的商品条码异步显示商品名称。

（1）在页面中引入js文件：

<script type="text/javascript" src="../js/createXmlHttpRequest.js" charset="gb2312"></script> 

reateXmlHttpRequest.js的功能是创建XMLHttpRequest对象，对应的代码如下：

 

// JavaScript Document

function createXmlHttpRequest()

{

    var xmlRequest=null;

    if(window.XMLHttpRequest)

    {

        try

        {

            xmlRequest=new XMLHttpRequest();

        }

        catch(ex)

        {

            throw new Error("Create XMLHttpRequest object error!");

        }

    }

    else if(window.ActiveXObject)

    {

        try

        {

            xmlRequest=new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch(ex)

        {

            try

            {

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

            }

            catch(ex)

            {

                throw new Error("Create XMLHttpRequest object error!");

            }

        }

    }

    else

    {

        alert("Your browser cannt support XMLHttpRequest!");

    }

 

    if(xmlRequest!=null)

    {

        return xmlRequest;

    }

    else

    {

        return null;

    }

}

（2）TextBox对应的页面代码如下：

<asp:TextBox ID="txtSptm" runat="server" οnkeypress="startRequest(this,event)"></asp:TextBox>

startRequest函数的代码：

function startRequest(id,oEvent)

{

    if (oEvent.keyCode == 13)

    {   

         myid=id;  // 接收传入的id

        //创建XmlHttpRequest对象

        request=createXmlHttpRequest();

       //设定回调函数

        request.onreadystatechange=callBack;

        var url="GetSpmc.aspx?sptm="+id.value;  

        //向指定URL发出HTTP请求，参数true表示使用异步请求方式

        request.open("GET",url,true);

        //发送数据

        request.send(null);        

        id.parentNode.parentNode.childNodes[3].childNodes[0].focus();   //移动光标           

    }

}

（3）//收到数据时的回调函数

function callBack()

{

    if(request.readyState==4)

    {

        if(request.status==200)

        {

            //基于DOM更新网页

           // alert(request.responseText);

           // document.getElementById("TextBox2").value=request.responseText;

           //if(request.responseText.length==0)

           //     alert('商品条码录入错误，请重新录入');

           //else

                myid.parentNode.parentNode.childNodes[2].childNodes[0].value=request.responseText;

        }

    }

}  

      通过AJAX可以，可实现页面局部刷新，改善用户体验。当然，如果在项目中纯粹使用手工编码应用AJAX工作量太大，可以考虑使用微软的ASP.NET AJAX技术框架。