您的位置:首页 > Web前端 > JavaScript

浅谈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内建对象。
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。

readyState状态值
0Uninitialized

1Open
2Send
3Receiving

4Loaded

status:用于返回服务器的HTTP状态码。

ststusText:用于返回HTTP状态码对应的文本。

常见HTTP状态码及对应文本
200OK
202Accepted
400Bad Request
404Not Found
500Internal Server Error
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文档。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息