Ajax开始准备篇

在此之前我们需要做一下简单的ajax准备工作,但你必须要具备基本的html,javascript,dom编写能力.否则这个ajax教程你读起来会很吃力.我的目的是通过这份教程.可以让你在你的网页中使用ajax技术实现,读取,添加,修改,删除数据的操作.也许你是只老鸟对我写的这些不屑一顾,但我还是希望你能看 下该教程中演示的一些例子,没准会有地方吸引你!
下面我们要做的有2点.第1我们必须创建一个可用的XMLHTTPRequest对象,如果你不知道什么是XMLHTTPRequest,请阅读:XMLHTTPRequest是什么?
因为各大浏览器对XMLHTTPRequest对象的支持标准不同,所谓可用的XMLHTTPReqeust对象.就是说要在IE,FF,Chrome等浏览器中无错误的运行该对象.我们使用JavaScript来创建该对象,并编写一个函数.在以后的ajax教程实例里 我们都将使用该函数来调用XMLHTTPRequest.看下面的代码:


代码如下:

<html>
<head>
<title>创建一个可用的xmlhttpreuqest对象</title>
</head>
<body>
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于IE浏览器的xmlhttp.结束
//如果非IE浏览器,则创建基于FireFox等浏览器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
alert(ajax_xmlhttp());
</script>
</body>
</html>

运行上面代码以后.在IE浏览器里会弹出"Object",在FF和Chrome浏览器里会弹出"Object XMLHTTPRequest"字样,如果正确弹出的话即代表 XMLHTTPRequest对象创建成功!
第2:我们使用Asp技术来输出一个xml文件.在以后的ajax教程实例中.我们都将请求该文件进行ajax的读取,添加,删除,修改数据的操作.也许你还不知道.我们可以使用服务端的任何一种语言将数据以xml的格式输出.比如我们使用Asp读取数据库某个表内的数据,然后将该表的数据做为xml文件格式来输出到客户端.这也是ajax最标准的使用方法!点击查看:asp输出xml格式的数据
下面是该asp文件的源码,你可以复制到你的电脑里进行测试.


"
xml = xml&"一个简单的Asp输出xml的示例,以后在我们的ajax教程实例中,我们都将使用该文件进行数据的读取操作"
xml=xml&""
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.Write xml
Response.End
%>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

好了,今天的ajax系统教程准备工作已经完成.明天我们将小试牛刀--ajax初试之读取数据
出自:http://Www.Web666.Net
作者:康董

(0)

相关推荐

  • Ajax初试之读取数据篇

    拿出来我们上次准备好的东西.1:XMLHTTPRequest对象的函数.2:Asp输出xml格式的文件.你可以点击查看该文件内容:Asp输出xml格式的数据 打开以后你会发现我们使用Asp技术动态的输出一个xml格式的数据.如果你对该技术还不了解,请返回阅读:ajax开始准备篇 在这个输出的数据里面有一个msg标签.标签里包含了一段文字内容.今天我们就读取这个msg标签.并将文字内容显示到你的网页上. 先看下面的代码.并附上效果演示 web_ajax.asp 复制代码 代码如下: <?xml v

  • 深入理解ajax系列第一篇之XHR对象

    前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验.虽然名字中包含XML,但ajax通信与数据格式无关.下面将详细介绍ajax的内容  创建 ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以

  • 菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不用拖控件的方式写一个原生态的Ajax程序呢,所以它的重要性,你懂的!)!好了,说了这么多,应该"忘记"了吧你!呵呵....

  • 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)

    其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术.好了, 简单的描述了一下,现在直接上代码吧! (1).功能描述: 新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的"获取数据"按钮后,将2.html页中的内容显示在1.html页面的<div>标记中. (2).实现代码: 1.html实现代码: 复制代码 代码如下: <head>

  • Ajax开始准备篇

    在此之前我们需要做一下简单的ajax准备工作,但你必须要具备基本的html,javascript,dom编写能力.否则这个ajax教程你读起来会很吃力.我的目的是通过这份教程.可以让你在你的网页中使用ajax技术实现,读取,添加,修改,删除数据的操作.也许你是只老鸟对我写的这些不屑一顾,但我还是希望你能看 下该教程中演示的一些例子,没准会有地方吸引你! 下面我们要做的有2点.第1我们必须创建一个可用的XMLHTTPRequest对象,如果你不知道什么是XMLHTTPRequest,请阅读:XML

  • AJAX实践DWR篇

    DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-

  • JavaScript Ajax编程 应用篇

    一.Ajax  (Asynchronous JavaScript + XML)  能够像服务器请求额外的数据而无需卸载页面,即局部刷新技术 二.创建一个XHR对象 function createXHR () { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // <

  • Ajax初试之读取数据篇实现代码

    是的,今天我们要实现的效果是.在不刷新网页的情况下读取并显示服务端的数据. 拿出来我们上次准备好的东西. 1:XMLHTTPRequest对象的函数. 2:Asp输出xml格式的文件.你可以点击查看该文件内容 复制代码 代码如下: <% '出自:http://Www.Web666.Net '作者:康董 '如需转载请务必保留以上信息 '定义一个变量,来保存xml数据 dim xml xml = "<?xml version='1.0' encoding='gb2312'?><

  • Ajax添加数据即时显示信息篇

    今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最

  • Ajax修改数据即时显示篇实现代码

    我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

随机推荐