AJax技术

快速学习AJAX之一 Ajax基础

字号+ 作者:H5之家 来源:H5之家 2016-04-05 15:00 我要评论( )

接触比较多的AJAX技术就是 在线地图服务了,Google地图就是率先将AJAX技术应用到切合实际的技术当中去的。AJAX技术中用到的四个比较重要的技术点 Javascrip Css

大家好,这是一套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 你好 呵呵 够俗了吧

为了完成这个 我们需要创建一个一般处理程序

然后我们在一般处理程序当中写上如下的简单代码

 

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/html";

context.Response.Write(DateTime.Now.ToString());

}

好了下面开始我们的主要任务

 

 

 

 

 

 

 

上面的代码就是特别简单的一个例子了

我给大家简单的说明一下

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()时间 ,看看那个视频会中断吗?(*^__^*) 嘻嘻…… 传说中的无刷新

顶一下

(0)

0%

踩一下

(0)

0%

本文Tags:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax技术全解之二(3)

    Ajax技术全解之二(3)

    2016-04-05 16:00

  • 传达学习全国“两会”和中省重要文件精神

    传达学习全国“两会”和中省重要文件精神

    2016-04-05 14:01

  • AJAX技术vs传统的ASP无刷新技术

    AJAX技术vs传统的ASP无刷新技术

    2016-04-05 13:00

  • ajax上传文件file

    ajax上传文件file

    2016-04-05 11:00

网友点评