浅谈Ajax

最新推荐文章于 2022-08-13 17:07:03 发布

Amos_Xue

最新推荐文章于 2022-08-13 17:07:03 发布

阅读量437

点赞数

分类专栏： Web 文章标签： ajax javascript web 客户端

本文链接：https://blog.youkuaiyun.com/u013536429/article/details/50291103

版权

Web 专栏收录该内容

1 篇文章

订阅专栏

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状态值
0	Uninitialized
1	Open
2	Send
3	Receiving
4	Loaded

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

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

常见HTTP状态码及对应文本
200	OK
202	Accepted
400	Bad Request
404	Not Found
500	Internal 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

叠层样式表，是一种基于文本的样式设计语言，能够对网页中的对象位置排版进行像素级的精确控制，可以实现样式信息与网页内容的分离。

五、DOM

文档对象模型，是W3C组织推荐的处理可扩展标志语言的应用程序标准编程接口。可以独立于平台和语言访问和控制文档的内容和结构。常用于表示和处理HTML或XML文档。