Ajax基础教程 (二)

作者:鸿亿网络   2008-02-29 11:11:36   点击:194   评论:0
  http_request.send(null);

    }

    function alertContents() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>


  本例中: 
  用户点击浏览器上的"请求"链接; 
  接着函数makeRequest()将被调用.其参数 ? HTML文件test.html在同一目录下; 
  这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents(); 
  alertContents()将检查服务器的响应是否成功地收到,如果是,就会"alert()"test.html文件的内容. 

步骤 4 ? "X-文档" --- 处理XML响应

  在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性. 

  首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示: 

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

  在该脚本中,我们只需修改请求部分: 

...
onclick="makeRequest('test.xml')">
...

  接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成: 

  var xmldoc = http_request.responseXML;
  var root_node = xmldoc.getElementsByTagName('root').item(0);
  alert(root_node.firstChild.data);

 

  这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.

Ajax初步使用方法 

Ajax定义为“Asynchronous JavaScript + XML”的简称,也就是异步的JavaScript和XML处理。从原理上看,主要是Ajax可以通过调用HttpRequest实现与服务器的异步通讯,并最终在网页中实现丰富友好的用户界面
Ajax使用初步,配置步骤
1.把Ajax.dll copy到应用系统bin目录下,然后在工程引用中引用Ajax.dll,如果没有的话可以下载/Files/singlepine/Ajax.rar
2.配置web.config,添加如下信息


<httpHandlers>
  <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>3.假设应用系统叫Document,目录格式为Pages\AjaxTest
4.在Pages\AjaxTest下建立cs文件AjaxMethod.cs,添加如下方法
//[Ajax.AjaxMethod]
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public static string GetNIVNumber(string str)
{
 return str;
}5.在Pages\AjaxTest下建立页面AjaxForm.aspx
<HTML>
 <HEAD>
  <title>AjaxForm</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <script language="javascript">
  function testAjax()
  {
   var first=document.getElementById("txtfirst");
   AjaxMethod.GetNIVNumber(first.value,callback_GetNIVNumber);
  }
  function callback_GetNIVNumber(res)
  {
   var obj=document.getElementById("txtsecond");   
   obj.value=res.value;    
  }
  </script>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <INPUT style="Z-INDEX: 101; LEFT: 208px; POSITION: absolute; TOP: 40px" type="button" value="Button"
    onclick="testAjax();">
   <asp:TextBox id="txtfirst" style="Z-INDEX: 102; LEFT: 40px; POSITION: absolute; TOP: 40px" runat="server"></asp:TextBox>
   <asp:TextBox id="txtsecond" style="Z-INDEX: 103; LEFT: 40px; POSITION: absolute; TOP: 72px" runat="server"></asp:TextBox>
  </form>
 </body>
</HTML>protected System.Web.UI.WebControls.TextBox txtfirst;
protected System.Web.UI.WebControls.TextBox txtsecond;
private void Page_Load(object sender, System.EventArgs e)
{
 //注册,其中Document.Pages.AjaxTest.AjaxMethod为AjaxMethod.cs方法所在的命名空间
 Ajax.Utility.RegisterTypeForAjax(typeof(Document.Pages.AjaxTest.AjaxMethod));
}然后运行就可以了,
实现效果:在第一个textbox中输入内容,点击button,就把内容显示到第二textbox中。这只是一个简单的示例,还可以修改调用方法,从数据库读取以及更复杂的操作
关于我们 | 代理合作 | 解决方案 | 常见问题 | 新闻资讯 | SEO博客
西安鸿亿网络科技有限公司
2007-2008 Inc.西安鸿亿网络科技有限公司.版权所有 陕ICP备07011159号
联系电话: 029-88726470   13201615271   13110444361 (6 * 8 小时)
联系电话: 029-88945654   15802957768   15829754525 (7 * 24 小时)
传真: 029-88726470   地址: 西安市高新区电子二路36号14F-1 企业电视台名扬网视