快速学习AJAX之一 Ajax基础
2011-11-01 16:45
344 查看
大家好,这是一套AJAX的基础教程,首先声明一下我是从事ASP.NET开发
但是我这回讲解的AJAX不是ASP.NET其中的哪些控件的操作。虽然ASP.NET自带的AJAX控件给我们使用AJAX带来了极大的方便
但是我决定我还是要一篇篇的更新 “原生态的AJAX”
呵呵,我也不知道这套教程大概有多少讲,但是有一点我一定将我知道的AJAX完全以一种简单通俗的方式告诉大家。
AJAX是什么呢?英文的全称你可以“有道一下” 说白了就是异步JavaScript+XML
大家可以去Google上面搜索一下AJAX的来历什么的,我这里一些从简。 弱弱的记得 希腊英雄里面有一个名字挺像 “AJAX”的,哈哈......
其实大家简单的理解AJAX就是 一种“无刷新的技术”当然这是泛泛而谈,毕竟
AJAX技术没有这么简单。
我们接触比较多的AJAX技术就是 在线地图服务了,Google地图就是率先将AJAX技术应用到切合实际的技术当中去的。
AJAX技术中用到的四个比较重要的技术点 Javascrip Css Dom(文档对象模型) XMLHttpRequest对象 这个我们会在后面慢慢的接触到
当你了解了以上的前三项技术,那么你就可以接下来学习AJAX应用了。
好了,开始我们的AJAX之路
首先我们需要创建XmlHttpRequest对象 。当然由于一些原因,浏览器兼容性问题,创建方式不同
我们首先创建一个支持多浏览器的 XMLHttpRequest 对象
然后我们写好了这个,大家可以自己把他写到一个 function中去
下面我们继续 写完成 我们的第一个例子 Ajax 你好 呵呵 够俗了吧
为了完成这个 我们需要创建一个一般处理程序
然后我们在一般处理程序当中写上如下的简单代码
好了下面开始我们的主要任务
上面的代码就是特别简单的一个例子了
我给大家简单的说明一下
xmlHttp.open("GET",
"Ajax.ashx"); 这句话中 包含的几个要点 第一 “GET” 这个是得到数据的一种方式 ,当然常见的也有 “POST”
其实还有几种,我记得好像是有7种 (HEAD,PUT,DELETE,OPTION,TRACE)这些方法大家可以自己去查找资料都是干神马的,我就不详细说明了。
后面是请求的路径,当然你可以请求一个URL的地址。
其实后面还有第三个参数,是设定异步操作还是同步操作的,这个我们以后再说。
onreadystatechange:
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
简单点说就是
每当 readyState 改变时,就会触发 onreadystatechange 事件。
还有 onreadystatechange 只是一个属性名称,而不是函数名称,这里其实是创建了一个匿名函数
readyState:
表示的是当前的对象状态【他有五个值】
0: uninitialized, 【请求未初始化】
1: loading, 【服务器连接已建立】
2: loaded, 【请求已接收】
3: interactive, 【请求处理中】
4: complete。 【请求已完成,且响应已就绪】
status:
HTTP响应状态码 具体的可以去Google上面找
我简单的举几个例子
403 Forbidden,
404 Not Found,【你懂的】
200正常返回
所以我们需要满足这两个条件。
好了,剩下的就交给
xmlHttp.responseText 去读取吧。
哦了,第一节课就到这里了,讲解的不好,还望大家海涵,我会继续写下去的,谢谢!
对了,大家可以试一下 页面上面嵌入一个 视频,然后再调用 Alert()时间 ,看看那个视频会中断吗?(*^__^*) 嘻嘻…… 传说中的无刷新
作者:KingDZ
出处:http://www.cnblogs.com/hihell/
关于作者:作者喜欢编程,擅长ASP.NET网站开发,喜欢MVC,SilverLight开发,喜欢交流,喜欢创新
我的QQ:860866679 MSN:wangdezhen@live.com 期待有共同志向者交流进步。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题 可以通过KingDZ's Email 联系我,非常感谢。
但是我这回讲解的AJAX不是ASP.NET其中的哪些控件的操作。虽然ASP.NET自带的AJAX控件给我们使用AJAX带来了极大的方便
但是我决定我还是要一篇篇的更新 “原生态的AJAX”
呵呵,我也不知道这套教程大概有多少讲,但是有一点我一定将我知道的AJAX完全以一种简单通俗的方式告诉大家。
AJAX是什么呢?英文的全称你可以“有道一下” 说白了就是异步JavaScript+XML
大家可以去Google上面搜索一下AJAX的来历什么的,我这里一些从简。 弱弱的记得 希腊英雄里面有一个名字挺像 “AJAX”的,哈哈......
其实大家简单的理解AJAX就是 一种“无刷新的技术”当然这是泛泛而谈,毕竟
AJAX技术没有这么简单。
我们接触比较多的AJAX技术就是 在线地图服务了,Google地图就是率先将AJAX技术应用到切合实际的技术当中去的。
AJAX技术中用到的四个比较重要的技术点 Javascrip Css Dom(文档对象模型) XMLHttpRequest对象 这个我们会在后面慢慢的接触到
当你了解了以上的前三项技术,那么你就可以接下来学习AJAX应用了。
好了,开始我们的AJAX之路
首先我们需要创建XmlHttpRequest对象 。当然由于一些原因,浏览器兼容性问题,创建方式不同
我们首先创建一个支持多浏览器的 XMLHttpRequest 对象
<script type="text/javascript"> var xmlHttp = false; //这个声明成什么都无所谓啦 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } </script>
然后我们写好了这个,大家可以自己把他写到一个 function中去
下面我们继续 写完成 我们的第一个例子 Ajax 你好 呵呵 够俗了吧
为了完成这个 我们需要创建一个一般处理程序
然后我们在一般处理程序当中写上如下的简单代码
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; context.Response.Write(DateTime.Now.ToString()); }
好了下面开始我们的主要任务
<head> <title></title> <script type="text/javascript"> var xmlHttp = false; //这个声明成什么都无所谓啦 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } function getAjax() { xmlHttp.open("GET", "Ajax.ashx"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } } xmlHttp.send(); } </script> </head> <body> <input type="button" value="单击我显示时间" onclick="getAjax();" /> </body> </html>
上面的代码就是特别简单的一个例子了
我给大家简单的说明一下
xmlHttp.open("GET",
"Ajax.ashx"); 这句话中 包含的几个要点 第一 “GET” 这个是得到数据的一种方式 ,当然常见的也有 “POST”
其实还有几种,我记得好像是有7种 (HEAD,PUT,DELETE,OPTION,TRACE)这些方法大家可以自己去查找资料都是干神马的,我就不详细说明了。
后面是请求的路径,当然你可以请求一个URL的地址。
其实后面还有第三个参数,是设定异步操作还是同步操作的,这个我们以后再说。
onreadystatechange:
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
简单点说就是
每当 readyState 改变时,就会触发 onreadystatechange 事件。
还有 onreadystatechange 只是一个属性名称,而不是函数名称,这里其实是创建了一个匿名函数
readyState:
表示的是当前的对象状态【他有五个值】
0: uninitialized, 【请求未初始化】
1: loading, 【服务器连接已建立】
2: loaded, 【请求已接收】
3: interactive, 【请求处理中】
4: complete。 【请求已完成,且响应已就绪】
status:
HTTP响应状态码 具体的可以去Google上面找
我简单的举几个例子
403 Forbidden,
404 Not Found,【你懂的】
200正常返回
所以我们需要满足这两个条件。
好了,剩下的就交给
xmlHttp.responseText 去读取吧。
哦了,第一节课就到这里了,讲解的不好,还望大家海涵,我会继续写下去的,谢谢!
对了,大家可以试一下 页面上面嵌入一个 视频,然后再调用 Alert()时间 ,看看那个视频会中断吗?(*^__^*) 嘻嘻…… 传说中的无刷新
作者:KingDZ
出处:http://www.cnblogs.com/hihell/
关于作者:作者喜欢编程,擅长ASP.NET网站开发,喜欢MVC,SilverLight开发,喜欢交流,喜欢创新
我的QQ:860866679 MSN:wangdezhen@live.com 期待有共同志向者交流进步。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题 可以通过KingDZ's Email 联系我,非常感谢。
相关文章推荐
- Ajax快速学习 文章索引
- 快速学习AJAX之六 Ajax实现无刷新上传头像
- 快速学习AJAX之七 AJAX修改用户资料
- Ajax快速学习笔记
- 循序渐进学Ajax【01】--目前最好的学习Ajax的教程--浅显易懂,快速是上手
- 快速学习AJAX之二 Ajax基础扩展
- 快速学习AJAX之一
- 快速学习AJAX之三 Ajax实现登陆
- JavaScript Ajax快速学习
- 快速学习AJAX之四 Ajax登陆改造
- 快速学习AJAX之三 Ajax实现登陆
- 快速学习AJAX之五 Ajax注册(需要数据库了)
- 快速学习 js 笔记一 dom 基础学习
- 前端基础快速学习-Dom
- 详细教程:如何快速在阿里云上构建机器学习应用?
- jquery 学习日志-- AJAX load() 方法
- 快速学习php
- Spring学习笔记(3)----------Spring快速入门
- 7.27--SSH学习之SpringMVC,Ajax请求、拦截器、文件上传和MyBatis访问数据库基本操作
- 分享8个帮助你学习快速编程的实用网站