浅谈Ajax
2015-12-14 10:11
495 查看
Ajax:异步JavaScript和XML。是一种客户端技术,与所使用的服务器端技术无关。
作用:对网页实现异步更新。
优点:可以对网页进行部分更新而不需要重新加载整个网页。
核心:XMLHttpRequest对象。一个JavaScript对象,是支持异步请求的关键技术。用于在后台与服务器交换数据,在不阻塞用户的情况下处理相应。
关联技术:JavaScript、XML、CSS、DOM等。
与服务器通信:
1. 初始化XMLHttpResponse对象;
2. 为该对象指定回调函数,处理返回结果;
3. 创建连接;
4. 发送请求。
应用Ajax技术时,建议使用重构来降低藕合度。
一、XMLHttpRequeest
1. 创建对象
IE5、IE6使用 ActiveXObject方法。
其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。
2. 属性
onreadystatechange:指定状态改变时触发的事件处理器,在Ajax中通常是一个JavaScript方法。
readyState:用于获取请求的状态,取值范围0-4。
readyState状态值
status:用于返回服务器的HTTP状态码。
ststusText:用于返回HTTP状态码对应的文本。
常见HTTP状态码及对应文本
responseText:从服务器获得字符串形式的响应数据。
responseXML:从服务器获得XML形式的响应数据。
3. 方法
open(String method, String url, boolean async):异步请求初始化,指定HTTP方法,目标URL,是否异步等。
send(content):向服务器发送请求,content类型可以有多种,如:字符串、输入流或DOM对象。
setRequestHeader(String header, String value):向请求添加HTTP头,value是header的值。
getResponseHeader(String header):返回指定的HTTP头,返回值是字符串。
getAllResponseHeader():返回完整的HTTP头,返回值是字符串,包括Server、Date、Content-Type、Content-Length等。
abort():停止或放弃当前异步请求。
二、JavaScript
一种解释性脚本语言,可以在Web页面中添加动态脚本实现各种动态功能,来提高用户使用好感,已经获得绝大多数浏览器支持。
三、XML
可扩展标记语言,是W3C的推荐标准,用于传输数据而不是显示数据,XMLHttpResponse对象与服务器的数据交换会用到XML格式。
四、CSS
叠层样式表,是一种基于文本的样式设计语言,能够对网页中的对象位置排版进行像素级的精确控制,可以
4000
实现样式信息与网页内容的分离。
五、DOM
文档对象模型,是W3C组织推荐的处理可扩展标志语言的应用程序标准编程接口。可以独立于平台和语言访问和控制文档的内容和结构。常用于表示和处理HTML或XML文档。
作用:对网页实现异步更新。
优点:可以对网页进行部分更新而不需要重新加载整个网页。
核心:XMLHttpRequest对象。一个JavaScript对象,是支持异步请求的关键技术。用于在后台与服务器交换数据,在不阻塞用户的情况下处理相应。
关联技术:JavaScript、XML、CSS、DOM等。
与服务器通信:
1. 初始化XMLHttpResponse对象;
2. 为该对象指定回调函数,处理返回结果;
3. 创建连接;
4. 发送请求。
应用Ajax技术时,建议使用重构来降低藕合度。
一、XMLHttpRequeest
1. 创建对象
IE5、IE6使用 ActiveXObject方法。
其他浏览器使用名为XMLHttpRequest的JavaScript内建对象。
var xmlhttp = null; if(window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else if(window.ActiveXObject) //IE5&IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
2. 属性
onreadystatechange:指定状态改变时触发的事件处理器,在Ajax中通常是一个JavaScript方法。
readyState:用于获取请求的状态,取值范围0-4。
0 | Uninitialized |
1 | Open |
2 | Send |
3 | Receiving |
4 | Loaded |
ststusText:用于返回HTTP状态码对应的文本。
200 | OK |
202 | Accepted |
400 | Bad Request |
404 | Not Found |
500 | Internal Server Error |
responseXML:从服务器获得XML形式的响应数据。
3. 方法
open(String method, String url, boolean async):异步请求初始化,指定HTTP方法,目标URL,是否异步等。
send(content):向服务器发送请求,content类型可以有多种,如:字符串、输入流或DOM对象。
setRequestHeader(String header, String value):向请求添加HTTP头,value是header的值。
getResponseHeader(String header):返回指定的HTTP头,返回值是字符串。
getAllResponseHeader():返回完整的HTTP头,返回值是字符串,包括Server、Date、Content-Type、Content-Length等。
abort():停止或放弃当前异步请求。
二、JavaScript
一种解释性脚本语言,可以在Web页面中添加动态脚本实现各种动态功能,来提高用户使用好感,已经获得绝大多数浏览器支持。
三、XML
可扩展标记语言,是W3C的推荐标准,用于传输数据而不是显示数据,XMLHttpResponse对象与服务器的数据交换会用到XML格式。
四、CSS
叠层样式表,是一种基于文本的样式设计语言,能够对网页中的对象位置排版进行像素级的精确控制,可以
4000
实现样式信息与网页内容的分离。
五、DOM
文档对象模型,是W3C组织推荐的处理可扩展标志语言的应用程序标准编程接口。可以独立于平台和语言访问和控制文档的内容和结构。常用于表示和处理HTML或XML文档。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- java-WEB中的监听器Lisener
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 2019年开发人员应该学习的8个JavaScript框架
- 使用zabbix监控Nginx活动状态--Part1
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法