[本周]----我们共同关注: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 本砖头一样的专著,点到即止,不再展开
目录
相关文章
|
JavaScript 前端开发 数据格式
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
39 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
60 0
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
3月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
16 0
|
8月前
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
43 0
|
3月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
43 0
|
4月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
52 0
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本