动态网站开发知识【第7期】-- Ajax

vlambda
2022-03-28

动态网站开发知识【第7期】-- Ajax

导读:

大家好，我是老田。本篇是动态网站开发系列的第7篇，今天我们梳理WEB2.0时代的变革性技术--Ajax。

1.Ajax概述

AJAX是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）的缩写。

AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

2.Ajax优缺点

优点：

减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等，进一步促进页面和数据的分离

缺点：

AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

3.创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

 var xmlhttp = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

创建代码示例:

 var xmlhttp;
 if (window.XMLHttpRequest){
     // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
     xmlhttp=new XMLHttpRequest();
 }
 else{
     // IE6, IE5 浏览器执行代码
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }

4.Ajax请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

 xmlhttp.open("提交方式","URL",true);
 xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

POST 请求时需要注意请求头的设置。get不用。

 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。（readyState 属性存有 XMLHttpRequest 的状态信息）

XMLHttpRequest 对象的重要的属性：

onreadystatechange 回调函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: 成功
404: 未找到页面

6.readyState状态说明

0：请求未初始化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化做好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。
1：服务器连接已建立
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（*method*,*url*,*true*）完成对象状态的设置。并调用send()方法开始向服务端发送请求。
值为1表示正在向服务端发送请求。
2：请求已接收
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。
值为2表示已经接收完全部响应数据，并为下一阶段对数据解析做好准备。
3：请求处理中
此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用做好准备。
状态3表示正在解析数据。
4：请求已完成，且响应已就绪
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

创建
初始化请求
发送请求
接收数据
解析数据
完成

7.响应属性

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

8.示例

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <script>
             function ajaxDemo(){
                 var xmlhttp;
                 if (window.XMLHttpRequest){
                     // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                     xmlhttp=new XMLHttpRequest();
                 }
                 else{
                     // IE6, IE5 浏览器执行代码
                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 xmlhttp.onreadystatechange=function(){
                     if (xmlhttp.readyState==4 && xmlhttp.status==200){
                         document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                     }
                 }
                 xmlhttp.open("GET","localhost:8080/demo/getInfo.do",true);
                 xmlhttp.send();
             }
         </script>
     </head>
     <body>
         <div id="myDiv"></div>
         <button type="button" onclick="ajaxDemo()">修改内容</button>
 
     </body>
 </html>

博观而约取，厚积而薄发！

--END--

vlambda博客
学习文章列表