快速学习AJAX之一

======================================================

注：本文源代码点此下载

======================================================

大家好,这是一套ajax的基础教程,首先声明一下我是从事asp.net开发
但是我这回讲解的ajax不是asp.net其中的哪些控件的操作。虽然asp.net自带的ajax控件给我们使用ajax带来了极大的方便
但是我决定我还是要一篇篇的更新“原生态的ajax”
呵呵,我也不知道这套教程大概有多少讲,但是有一点我一定将我知道的ajax完全以一种简单通俗的方式告诉大家。
ajax是什么呢?英文的全称你可以“有道一下”说白了就是异步javascript+xml
大家可以去google上面搜索一下ajax的来历什么的,我这里一些从简。 弱弱的记得 希腊英雄里面有一个名字挺像 “ajax”的,哈哈......
其实大家简单的理解ajax就是 一种“无刷新的技术”当然这是泛泛而谈,毕竟
ajax技术没有这么简单。
我们接触比较多的ajax技术就是 在线地图服务了,google地图就是率先将ajax技术应用到切合实际的技术当中去的。
ajax技术中用到的四个比较重要的技术点javascripcss 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()时间 ,看看那个视频会中断吗?(*^__^*) 嘻嘻……传说中的无刷新

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/