WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
在《WCF分布式安全开发实践》系列文章之后,很想重新开启一个系列文章,来完善WCF的学习知识。思考很久,决定写一下WCF和AJAX学习的文章,取名为《WCF与AJAX编程开发实践》。
这个系列主要关注在WCF于AJAX集成的开发学习上。考虑到很多没有AJAX的朋友,可能要接触WCF。这里会从头开始。最初的AJAX概念和原理,然后会讲解微软的ASP.NET AJAX,中间是支持AJAX的Web Service,因为在WCF之前,Web Service已经支持AJAX集成交互了,这里作为过渡知识,会单独给出一篇介绍。最后正式进入WCF和AJAX的学习阶段,进而分析一些与AJAX相关的重要的WCF的特性。
1.简单的AJAX示例;
2.支持ASP.NET Ajax的Web Service;
3.支持ASP.NET Ajax的WCF服务;
4.支持非ASP.NET AJAX的WCF服务;
5.支持JSON的Ajax WCF服务;
6.支持XML的Ajax WCF服务 。
这些是计划初步完成的文章。有一定AJAX基础的学习者,可以直接从文章3以后看,前面3篇文章是作为0基础AJAX学习准备的。这个计划也是希望能使得学习者有个阶梯进步的过程。网上关于AJAX的文章也很多,大家也可以自己学习。这里我坚持的原则还是从Ajax最初的历史讲起。免得给大家导致不必要的误会。技术高手可以作为趣闻来重新回顾一下AJAX。
文章还是从最基本的概念讲起,AJAX的起源和兴起。一些与AJAX相关的重要Web技术标准.然后会提到AJAX的核心对象XMLHttpRequest。最后会是简单AJAX的分析。
【1】什么是AJAX:
AJAX全称是Asynchronous JavaScript and XML,也就是异步JavaScript和XML。
来自W3schools的定义:
2.AJAX is based on JavaScript and HTTP requests.()。
3.AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).
4.AJAX is not a new programming language, but a new way to use existing standards.
翻译为中文以后就是:
1.AJAX等价于Asynchronous JavaScript and XML.
2.AJAX基于JavaScript和HTTP请求
3.AJAX是一种由Google 提示而流行起来的编程方式,
4.AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。
Ajax这个词由Jesse James Gaiiett2005年在《Ajax: A New Approach to Web Applications》一文所创。从此AJAX为业界接受。另外,Mozilla Firefox、Opera 以及 Safari 浏览器的支持,也使得AJAX的得推广更加容易,使得该技术走向成熟。
【1.2】基本原理与优点:
AJAX技术的本质原理就是:使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,JavaScript 可在不重载页面的情况与 Web 服务器交换数据。然后通过DOM更新部分页面原属。
AJAX 可使因特网应用程序更小、更快,更友好。
【2】相关的重要Web技术:
AJAX基于JavaScript和HTTP请求,那一定会使用到一些现有的技术,或者标准。简单来说就是:
(1)JavaScript,脚本语言,操作DOM页面对象,使用XMLHttpRequest 对象来直接与服务器进行通信。
(2)XML :跨平台数据传递的标准。
(3)HTML :超文本标记语言。
(4)CSS :级联样式表,CSS提供了从内容中分离应用样式和设计的机制。
在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器IE5+,Mozilla Firefox、Opera 以及 Safari 支持。AJAX 应用程序独立于浏览器和平台。
所以说AJAX不是一个新技术,而是现有技术和标准的结合。
【3】浏览器兼容性:
关于AJAX的应用,要考虑的一个重要问题就是浏览器的兼容性,因为各个厂商在定义诸如AJAX和CSS样式特性的时候,标准不统一,应用过程中会出现浏览器兼容的问题。例如对于XMLHttpRequest。构建一个运行在不同浏览器就需要特别注意。
这个问题解决的办法之一就是在使用这些对象的时候,判断浏览器,进而区别对待。另外一个推荐的方式就是使用现有的AJAX框架,它们符合跨浏览器AJAX开发的客户端JavaScript库。一些流行的框架包括:AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us.可以直接使用。XMLHttpRequest 对象得到下列浏览器的支持:Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
【4】XMLHttpRequest:
【4.1】对象创建:
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。代码如下:
function ajaxCall()
{
var xmlHttp;
try
{
// Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7等浏览器
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer 5.0+浏览器
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("浏览器不支持AJAX!");
return false;
}
}
}
}
</script>
【4.2】对象状态:
在使用XMLHttpRequest对象时, 我们可以通过readyState属性来判断服务器响应状态。返回值与状态的关系如下:
状态 | 描述 |
---|---|
0 | 请求未初始化(在调用 open() 之前) |
1 | 请求已提出(调用 send() 之前) |
2 | 请求已发送(这里通常可以从响应得到内容头部) |
3 | 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) |
4 | 请求已完成(可以访问服务器响应并使用它) |
【4.3】处理返回数据:
在XMLHttpRequest对象返回数据以后,我们需要对数据进行处理。这些返回数据的可以是字符,也可以是XML文档格式。
这里我们需要在在XMLHttpRequest对象的onreadystatechange属性绑定我们要处理数据的Javascript函数 .然后进行数据的处理。
我们可以通过 XMLHttpRequest对象的responseText 属性来取回由服务器返回的数据。参考代码如下:
{
if(xmlHttp.readyState==4)
{
var data =xmlHttp.responseText;
//获取返回数据,添加处理代码进行处理
}
}
open()
和send()
方法, 这里需要想请求的服务器发送数据和请求。参考代码如下:
http_request.send(null);
(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请求。全部的代码如下:
<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>
数据文件使用文本文件,内容是简单的字符。包含字符“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的本质有个清晰的认识。
最后是本文的参考代码:/Files/frank_xl/1.PureAJAXSampleFrankXuLei.rar。欢迎关注后续WCF AJAX文章。谢谢.
参考文章:
1.http://www.w3schools.com/Ajax/Default.Asp
2.https://developer.mozilla.org/cn/AJAX/%e5%bc%80%e5%a7%8b
3.http://baike.baidu.com/view/1641.htm
4.http://www.w3school.com.cn/ajax/ajax_intro.asp
转载于:https://blog.51cto.com/frankxulei/320470
WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例相关推荐
- Processing互动编程开发实践之动态文字打乱功能(别嫌长,代码多,图片多)
这篇文章有什么价值? 简单介绍Processing编程 提供一份基于鼠标响应的动画的Processing代码 重头戏:描述动态文字打乱功能实现的重要细节,并将源码公开 1.什么是Processing编 ...
- 判断线程是否执行完毕_Java并发编程 | 线程核心机制,基础概念扩展
源码地址:GitHub || GitEE 一.线程基本机制 1.概念描述 并发编程的特点是:可以将程序划分为多个分离且独立运行的任务,通过线程来驱动这些独立的任务执行,从而提升整体的效率.下面提供一个 ...
- 微信小程序云函数传递数组_微信小程序云开发能力之数据库基础概念
云开发提供了一个 JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象.何为JSON 格式的对象? 像这样的{"name":"温仪" , ...
- python ajax mysql_Python开发【第十六篇】:AJAX全套
概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...
- 自学shell编程——第1讲(基础概念、变量、符号、字符串处理)
shell编程 1. 常见shell命令 ls cd more less pwd mkdir clear touch vim chmod grep cp ln mv man ps -ef 查看这些命令 ...
- 微信小程序开发(一)基础概念汇总
大家好,我是千与千寻,最近开始涉及小程序开发了,学一学最后做出来一个项目,最开始进入微信小程序开发的时候,如果学过Vue框架接触微信小程序开发的速度会非常快.我准备顺便开设一个专题,进行讲解微信小程序 ...
- shell编程入门步步高(二、基础概念)
基础概念部分 登陆主机 登陆主机分为本地登陆和远程登陆. 本地登陆:就是直接面对主机,由键盘输入用户密码登陆,使用tty1-tty6,或者图形界面tty7 远程登陆:通过网络连接主机,以虚拟终端的方式 ...
- php生鲜超市系统,毕业论文:基于PHP平台下的Ajax开发实践—网上生鲜超市系统的开发...
毕业论文:基于PHP平台下的Ajax开发实践-网上生鲜超市系统的开发 发表时间:2013-5-8 12:17:49 大学学士毕业论文 基于PHP平台下的Ajax开发实践 --网上生鲜超市系统的开发 专 ...
- 《PYTHON3网络爬虫开发实践》——第六章 Ajax数据爬取
第六章 Ajax数据爬取 有时候我们在用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样:这是因为requests 获取的都是原始的HTML文档,而浏览器中的页面则是经过Java ...
最新文章
- 拼多多员工爆料:拼多多开启硬核模式!午休减半!每月工作300小时!千万别来拼多多!...
- 为WordPress添加favicon图标
- 第一百一十四节,JavaScript文档对象,DOM进阶
- 云效故障定位研究论文被ICSE 2021 SEIP track收录
- sizeof不是java关键字是_下列哪项不是Java语言的关键字。
- 博士四年8篇CNS主刊论文,清华大学优秀科研团队叫做“沈飞党”
- mysql+缓冲池脏块率高_什么是数据库的 “缓存池” ?(万字干货)
- vnc非授权访问漏洞
- vs编写windows服务和调用webservice
- java8 重复注解_Java8新特性_重复注解与类型注解
- Java核心技术笔记 1
- 人脸对齐(四)--CLM算法及概率图模型改进
- 软件默认安装路径注册表更改问题
- 异速联应用交付解决方案的优势
- 回收站无法清空,提示无法读源文件或磁盘的解决办法
- php怎么分栏,word文档怎么设置分栏格式
- mysql fixed数据类型_MySQL数据类型有哪些?MySQL数据类型详解
- 螃蟹保存方法保存时间_活面包蟹怎么保存?面包蟹能保存多久
- vue实现图片预加载的几种方式
- 计算机写给未来自己的一段话,现实,致自己 写给自己的霸气一段话汇总73句