[本周]----我们共同关注:Ajax 那点事-阿里云开发者社区

开发者社区> 开发与运维> 正文

[本周]----我们共同关注:Ajax 那点事

简介:

 上周的话题是页面转向,帖子很热,大家都给出了自己的方法。我本来认为自己总结的很全,看到回帖才直到有些几乎没有怎么用过的方法,收获不小。[本周]话题:Ajax那点事

这个话题很大,首先想到的是一大堆.net下的Ajax开发框架,想到曾经的Atlas,想到一大堆借Ajax春风火了一把的图书。我们今天要把问题简化一下,逐条列出Ajax不得不说的那点事。我做好接砖的准备了,来吧… …

1.         Ajax全称Asynchronous JavaScript And Xml(异步JavaScriptXml

2.         Ajax20052Adaptive Path公司的Jesse James Garrett在文章”Ajax:A New Approach To Web Applications”提出。

3.         Ajax 完全基于成熟的技术:1999XMLHttpRequest引入浏览器,成为事实上的标准;JavaScript DOM CSS则是W3C标准

4.         Ajax的典型应用是Google MapGoogle Suggest

5.         传统的Web开发模式是:请求—>刷新—>响应 每一个页面对应服务器端的业务逻辑,客户端的页面实际上是纯界面性质的

6.         Ajax同步的模式转为异步,引用时服务器端的页面不再只是界面表现的工具,而可以成为数据提供的接口。

7.         JavaScriptWeb开发的角色发生改变,不再只是与花哨的页面特效,一下子从后台走向前台。成为Ajax各种技术的桥梁!

8.         XMLHttpReques对象异步的提交信息,Ajax的核心动力!

9.         Xml为跨平台 跨领域的通信提供了通信载体,它简洁 通用 规范

10.     DOM文档对象模型,用来表示浏览器上的整个文档对象及其层次结构。DOM中的所有节点可以使用JavaScript脚本使用。

11.     DOM模型使得页面层次结构能够动态的变化。

12.     不得不说:CSS使Ajax对页面展现的控制更加灵活 方便 高效;CSS使外观独立于HTML容器而存在

13.     我们通过一个例子做一个整体上的梳理:JavaScript使用XMLHttpRequest从服务器端获取所需要的信息,数据传递是XML格式的,通过DOMCSS结合可以实现局部的刷新

JavsScript
对于JavaScript,我们要做更多的是一个学习重点的改变和态度的扭转。
不只是玩几个特效,JavaScript有很多东西一直被我们忽略着。看看开源JS框架ProtoType的代码,知道竟然可以把Js写到这种程度。具体JavaScript细节不再展开;
Prototype资料:

  送给所有关注Prototype的朋友们 【完整版】Prototype实战教程 1-16 

XMLHttpRequest

1.         XMLHttpRequest对象由浏览器提供,由微软提出,由于并非标准,创建改对象因浏览器而异。IEnew AcitveXObject(‘Microsoft. XMLHttp’) Mozilla: new XMLHttpRequest()

2.         readystate 表示XMLHTTP的请求状态
0-已创建但尚未初始化,未调用open方法
1---Open方法已调用但未调用Send方法
2---Send方法已调用,其它数据未知
3---请求已经发送成功,正在接受数据
4---数据接受成功 浏览器状态栏显示完成

3.         status属性存储服务器端返回的HTTP响应代码,用来判断请求的结果
200:成功 202:请求被接受,但是未处理 400:错误的请求 404:请求资源未找到
500:内部服务器错误

4.         Open方法创建请求:Openmethodurlasynchronoususerpassword
method:请求类型 get post
asynchronousbool型,是否使用异步
user password 可选参数

5.         创建了请求之后使用Send方法来向服务器发送请求:sendbodybody的格式为查询字符串格式。如果是异步提交请求则执行之后立即执行下一条语句,否则一致阻塞直到返回

6.         如果open指定了Post方式提交那么要设置HTTP头:
xmlHttp.setRequestHeader(“content-Type”,”application/x-www-form-urlencoded”)

7.         open send方法之前定义onreadystatechange事件来捕获请求的状态变化

8.         responseText获得返回的文本

9.         reponseXml用来获得返回的XML

10.     abort方法取消一个请求


DOM

1.         DHTML发展而来

2.         DOM侧重于模型而非结构,作为一个对象模型,定义了每个对象的接口

3.         DOM包含:最底层的文档操作接口 HTML XML

4.         动态的创建、改变、clone节点等等都是相关知识点 不再详述


CSS

1.         Cascading Style sheet 级联样式表 W3C标准定义:“一种对Web页面外观进行控制的机制“

2.         用来取代传统的HTML表现代码,样式独立于页面

3.         样式文件 缓存浏览器中 节省了带宽

4.         更丰富的页面效果,据我们的美工说还可以使用滤镜等等 非专业人士不复多


XML JSON

XML JSON作为数据通信的载体出现,就XML就有N本砖头一样的专著,点到即止,不再展开

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章