WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例(2)_.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

【4.3】处理返回数据：
在XMLHttpRequest对象返回数据以后，我们需要对数据进行处理。这些返回数据的可以是字符，也可以是XML文档格式。
这里我们需要在在XMLHttpRequest对象的onreadystatechange属性绑定我们要处理数据的Javascript函数 .然后进行数据的处理。
我们可以通过 XMLHttpRequest对象的responseText 属性来取回由服务器返回的数据。参考代码如下：

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
    {
        var data =xmlHttp.responseText;
        //获取返回数据，添加处理代码进行处理
    }
}
如果返回的是XML格式的数据，我们也可以通过xmlHttp.responseXML.documentElement来处理;在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 这里需要想请求的服务器发送数据和请求。参考代码如下：

http_request.open('GET', 'http://www.google.com', true);
http_request.send(null);
(1)open()的第一个参数是HTTP请求方式 – GET, POST, HEAD 或任何服务器所支持调用的方式. 有关HTTP请求方法的详细信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs
(2)第二个参数是请求的URL.
(3)第三个参数设置请求是否为异步模式.如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器:name=frank&address=shanghai。
   以上久是AJAX通信和数据处理相关的主要知识点。这些是AJAX技术的基础步骤，无论你使用数目AJAX框架，基本的通信步骤和数据处理都是在此基础上的封装和扩展。
【5】示例代码分析：
    这里我们给出的是一个AJAX读取数据，并且显示到页面的例子。不使用ASP.NET FrameWork等框架.只使用Javascript和HTML借助XMLHttpRequest来实现数据的读取，纯洁的原生态AJAX代码。这里大家可以使用文本编辑器或者写字板等工具来编写代码。当然也可以借助其他功能强大的IDE编辑器。
【5.1】页面Javascript代码：
     这里页面上放置了3个HTML控件，2个文本和一个按钮，点击按钮，读取数据，显示到文本框。页面比较简单。整个过程发送一个简单的HTTP请求。全部的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯AJAX例子：读取数据</title>
</head>
<body>
<script type="text/javascript">
function ajaxCall()
{
var xmlHttp;
try{// Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();//实例化XMLHttpRequest对象
    }
catch (e)
    {
// Internet Explorer 5+
   try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {
      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("浏览器不支持AJAX！");
         return false;
         }
      }
    }
    //绑定数据处理函数。
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
            if (xmlHttp.status == 200)
            {
                document.getElementById('txtResult').innerHTML=document.getElementById('txtUsername').value + xmlHttp.responseText;
            } else
            {
                alert('请求出错.');
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
            }
        }
      }
    xmlHttp.open("GET","data.txt",true);//异步请求数据
    xmlHttp.send(null);
}
</script>
<form style="text-align:left">
姓名: <input type="text" name="txtUsername" style="width:400px;" />
<br />
测试:<input type="button" name="btn"   value="测试" onclick="ajaxCall();" style="width:400px;" />
<br />
结果: <textarea name="txtResult" style="width:400px;"></textarea>
</form>
</body>
</html>
【5.2】数据文件：
   数据文件使用文本文件，内容是简单的字符。包含字符“Hello，It is a pure AJAX test!”。这个会和输入的用户名显示到一起。简单的SayHello程序。就不贴出了。大家可以在例子代码里下载这个代码，然后自己定义或者修改。进行测试。
【5.3】测试结果：
   输入姓名，然后发送http get请求，XMLHttpRequest对象异步读取数据，显示在结果列表。这里借助Visual Studio来测试页面，使用Visual Studio网站方式打开刚才编辑的文件的目录文件夹。然后运行或者在浏览器中查看页面，就可以进行测试了。直接查看测试会出错，文件读取权限错误。测试结果如图：

【6】总结：
以上就是AJAX基础概念和例子的全部内容。这个文章适合AJAX入门的初学者。目前AJAX的应用已经相当广泛。几乎所有的网站和基于Web的系统都能看到AJAX的影子，它已经相当成熟。而且为广大的开发者和用户接受。
（1）AJAX不是一门新的技术，它是多种已有技术的集成应用，带来了更好的用户体验。
（2）AJAX最先由Microsoft创立，Google对AJAX的推广起到很大作用。
（3）AJAX不是万能的，在开发AJAX程序的过程里一定要注意浏览器的兼容性问题。可以考虑借助一些开源的AJAX框架。
（4）AJAX的初学者，很多人直接学习和使用ASP.NET AJAX框架，习惯拖拽控件，导致AJAX学习走了很都弯路。学ASP.NET AJAX等开发框架以前，最好能先阅读一些AJAX基础概念的书籍或者教程,这样可以使你对AJAX的本质有个清晰的认识。

1.PureAJAXSampleFrankXuLei.rar

WPF用ListBox做简单的柱状图	WCF学习序列(十三)：分布事务
WPF自定义XAML标记扩展时使用IProvideValueTarget获取目标对象	WFP加载xml文档生成wpf界面UI
WPF中ListView绑定Dictionary，顺带提右键菜单和CheckBox	将Xaml文档转成XPS文档
WPF在TextBox失去焦点时检测数据，出错重新获得焦点解决	Ajax与Wcf交互-JSON
Ajax与WCF交互-WCF之美	WPF中善用路由事件
WPF自定义滚动条ScrollBar	WPF中的数据绑定（使用XmlDataProvider作控件绑定之二：使用外部URL
使用WPF实现iPhone的短信框效果	WPF程序的Visual Tree和Logical Tree并显示在TreeView
WCF4.0新特性体验(7):自定义绑定实现字节流编码(ByteStream)	在VS2005中设置WPF中自定义按钮的事件
WPF气泡形式的ToolTip提示框	WCF学习序列(十二)：宿主环境

i-favourite3.0Build多用户博客系统免安装版源码	Tab可切换皮肤的后台模板
快速查询ICP备案号的VB.Net源码	医院门诊管理系统源码
慧摩森电子系统技术公司整站(.Net+ACCESS)	isRoc个人内容管理系统简约iPlaySoft皮肤
CRM客户关系管理系统源码	淄博某泵业网站源码
基于SQLite开发的数据库示例	Silverlight实现的在线头像截取功能
Winform企业综合人事管理系统	C#使用DataBinding、DataView进行数据绑定一些实例
Asp.net简单多用户Blog程序源码	Asp.net修正版eWebEditor源码

.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程|vs2010中文旗舰版下载

热门标签

WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例(2)

Tags：WCF与AJAX编程