Ajax技术

此文章内容参考《》【其实我也忘了，这是一篇很早之前我卸载云笔记本上的，现在腾到CSDN上了】

 

---

目录

Ajax技术

一  什么是Ajax？

XMLHttpRequest 对象

XML

JavaScript

CSS

DOM

二 使用XMLHttpRequest对象

2.1初始化XMLHttp

2.2 XMLHttpRequest对象常用方法

三 XMLHttpRequest 对象的常用属性

onreadystatechange 属性

readyState 属性

responseText 属性

responseXML 属性

status 属性

statusText 属性

四 与服务器通信--发送请求与处理响应

五 Ajax 重构

---

Ajax技术

---

一  什么是Ajax？

Ajax 是 XMLHttpRequest 对象和 JavaSript 、 XML 、 CSS 、DOM 等多种技术的组合

 

XMLHttpRequest 对象

Ajax 使用过的是剧中，最核心的技术就是XMLHttpRequest ，他是一个具有应用程序接口的JavaScript 对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999 年在IE 5.0 浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同

XML

XML 是 Extensible Markup Language （可拓展标记语言） 的缩写，它提供了用于描述结构化数据的格式，适用于不同应用程序间的数据狡猾，而且这种交换不以预先定义的一组数据结构为前提，增加了可扩展性。XMLHttpRequest 对象与服务器交换的数据通常采用 XML 格式

JavaScript

JavaScript 是一种在Web 页面中添加动态脚本代码的解释性程序语言，其核心已经嵌入到目前主流的Web浏览器中。虽然平时应用最多的是通过JavaScript 实现一些网页特定功能和数据验证等功能。但其实JavaScript 可以实现的功能不仅这些。JavaScript 是一种具有丰富的***对象特性的程序设计语言，利用它能执行许多复杂的任务。例如，Ajax 技术是利用 JavaScript 将 DOM、XHTML（或HTML）、XML以及CSS 等技术综合起来，并攻之他们的行为。因此，要开发一个复杂搞笑的Ajax 应用程序，就必须对JavaScript 有深入的了解。

CSS

Css  是 Cascading Style Sheet （层叠样式表）的缩写，用于控制网页样式并允许将验尸官hi信息与网页内容分离的一种标记行语言。在Ajax 出现以前，CSS 已经广泛的应用到传统的网页中了。在Ajax 中，通常使用CSS 进行页面布局，并通过改变文档对象的CSs属性控制页面的外观和行为

DOM

DOM 是文档对象模型的简称，是表示文档（如HTMl文档）和访问、操作工构成文档的各种元素（人HTML标记和文本穿）的应用程序接口。WC 定义了标准的文档对象模型，他以属性结构表示HTML 和XML 文档，并且定义了遍历树和添加、修改、查找树的节点的方法和属性。在Ajax 应用中，通过JavaScript 操作 DOM，可以达到在不刷新页面的情况下实时修改用户界面的目的。

 

二 使用XMLHttpRequest对象

通过XMLHttpRequest ，Ajax 可以向桌面应用程序一样，只同服务器进行数据层面的交换，而不同每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成。这样既减轻了服务器的负担，又加快了响应速度，缩短了用户等待的时间

2.1初始化XMLHttp

在使用XMlHttpRequest 对象发送请求和处理响应之前，首先需初始化该对象，由于XMLHttpRequest 不使用一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。通常情况下，初始化XMLHttpRequest 对象只需要考虑两种情况：一种是IE浏览器、一种是非IE浏览器

IE浏览器

var http_request = new ActiveXObject("Msxml2.XMLHTTP");
//或者
var http_request = new ActiveXObject("Microsoft.XMLHTTP");

在上面的语法中，Msxml2.XMLHTTP 和 Microsoft.XMLHTTP 是针对IE 浏览器的不同版本而进行设置的，目前常用的是这两种

非IE浏览器

非 IE 浏览器 （如FireFox 、 Opear 、 Mozilla 、 Safari） 把XMLHttpRequest 对象实例化为一个本地JavaScript 对象。

var http_request = new XMLHttpRequest();

为了提高程序的兼容性，嗯可以创建一个跨浏览器的XMLHTppRequest 对象。创建一个跨浏览器的XMlHttpRequest 独享其实很简单，只需要判断一下浏览器的实现方式，如果浏览器提供了XMLHttprequest 类，则直接创建一个实例，否则实例化一个ActiveX 对象：

if(window.XMLHttpRequest){
    http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
    try{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
    }
}

2.2 XMLHttpRequest对象常用方法

XMLHttpRequest 对象提供了一些常用的方法，通过这些方法可以对请求进行操作：

open() 方法

open方法用于设置进行异步请求目标的URL、请求方法及其他参数信息

open("method","URL"[,asyncFlag[,"username"[,"password"]]])

参数说明

• method : 用于指定请求的类型，一般为 GET  | POST
• URL : 用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串
• asyncFlag : 为可选参数，用于指定请求方式，异步请求为true，同步请求为false ，默认情况下为 true
• username : 可选参数，用于指定请求用户名，没有时可省略
• password : 可选参数，用于指定请求密码，没有时可省略

示例：设置异步请求目标为register.jsp ，请求方法为GET，请求方式为一部：

http_request.open("GET","register.jsp",true)

 

send() 方法

send 方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接受到相应位置

send(countent)​

参数说明

• content : 用于指定发送的数据，可以是DOM 对象的实例、输入流或字符串。如果没有参数需要传递，可以设置为null

 

setRequestHeader() 方法

用于为请求的HTTP 头设置值

setRequestheader("header","value")

参数说明：

• header : 用于指定HTTP头
• value 用于指定的HTTP头设置值

【注】setRequestHeader() 方法必须在调用 open() 方法之后才能调用

示例：在发送POSt 请求时，需要设置 COntent-Type 请求头的值为 application/x-www-form-urlencoded ，这时就可以通过setRequest() 方法进行设置

http_request.setRequestHeader("Content--Type","application/x-www-form-urlencoded");

 

abort() 方法

用于停止或放弃当前异步请求

 

getResponseHeader() 方法

用于以字符串形式返沪i制定的HTTP 头信息

getResponseHeader("headerLabel")

参数说明：

• headerLabel : 用于指定HTTP 头，包括Server 、 Ocntent-Type 和 Date 等

示例：获取HTTP 头 COntent-Type 的值，可以使用以下代码

http_request.getrequestHeader("Content-Type")

面的代码将获取到以下内容text/html;charset=GB18030

 

getAllResponseHeader() 方法

用于以字符串形式返回完整的HTTP头信息，其中包括 Server 、 Date 、 Content-Type 和 Content-Length。

getAllResponseHeaders()

示例 ; 应用下面的代码调用getAllResponseHeaders() 方法，将会弹出对话框的信息

alert(http_request.getAllResponseHeaders());

 

三 XMLHttpRequest 对象的常用属性

XMLHttpRequest 对象提供了一些常用属性，通过这些属性可以获取服务器的相应状态及响应内容。

 

onreadystatechange 属性

用于指定状态改变时所出发的时间处理器。在Ajax 中，每个状态改变时都会出发一个时间处理器，通常会调用一个JavaScript 函数

示例：指定状态改变时触发 JavaScript 赋值 getResult 

http_request.onreadystatechange = getResult;

【注】在指定所出发的时间处理器时，所调用的 JavaScript 函数不能停驾小括号及指定参数名。不过这里可以使用匿名函数。

http_request.onreadystatechange = function(){
getResult("添加的参数");
}​

readyState 属性

用于获取请求的状态：

responseText 属性

用于获取服务器的响应，表示为字符串

responseXML 属性

用于获取服务器的响应，表示为XML。这个对象可以转化为一个DOM 对象

status 属性

用于返回服务器的HTTP 状态吗：

statusText 属性

用于返回HTTP 状态吗对应的文本，如 OK 或 Not Fount （未找到）等。

 

四 与服务器通信--发送请求与处理响应

 

五 Ajax 重构