web前端开发之JavaScript：AJAX的那些事

今天来介绍一下一个新的网页技术------AJAX，俗称“阿贾克斯”；那么什么是AJAX？它是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

在学AJAX之前我们应当具备的基础知识：

在继续学习之前，需要对下面的知识有基本的了解：

• HTML / XHTML

• CSS

• JavaScript / DOM

这些在web前端开发第一阶段、第二阶段我们已经系统学习了基础知识，现在来让我们介绍一下AJAX

AJAX定义

AJAX：Asynchronous Javascript And XML 异步的Javascript和XML

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、华为官网等等。

Google Suggest

    在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表

AJAX的优势

• 大幅提升用户体验

• 能够减轻服务器端的压力

• 异步加载

• 局部更新

• 通过AJAX技术从后端服务器中获取数据

那么Ajax如何进行网络通信呢？它同样通过网络互连的七层框架进行通信，这里我们介绍一下OSI七层模型

OSI七层模型

OSI参考模型	各层的解释
应用层	为应用程序提供服务
表示层	数据格式化、数据加密
会话层	建立、管理和维护会话
传输层	建立、管理和维护端到端的链接
网络层	IP选址及路由选择
数据链路层	提供介质访问和链路管理
物理层	物理层

        每一层实现各自的功能和协议，并完成与相邻层的接口通信。OSI的服务定义详细说明了各层所提供的服务。某一层的服务就是该层及其下各层的一种能力，它通过接口提供给更高一层。各层所提供的服务与这些服务是怎么实现的无关。

XMLHttpRequest 是 AJAX 的基础。下面详细介绍一下怎么用AJAX创建对象

 XMLHttpRequest

同步：synchronous 简称sync

异步：asynchronous 简称 async

XMLHttpRequest     简称：XHR

方法：    xhr.open()

             xhr.send()

             etRequestHeader Content-type

属性：

            onreadystatechange

             readyState

             Status

             Response Text

        

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

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

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

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

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 

XMLHttpRequest的使用

一般为四步走

1、创建XMLHttpRequest

2、使用open方法，初始化请求参数

3、使用send方法，发送请求

4、使用onreadystatechange属性，接受返回数据

四步走发送ajax请求

open(method,url,async)

setRequestHeader(“Content-type”)

send(param)

readyState:4

Status:200

Node.js（服务端）

接收请求

返回数据

判断出数据已经发送成功并且服务端已经响应并且成功返回

例子：

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

 

处理兼容性问题

var xhr;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
}else{
   xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

 

AJAX - 向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。

 

向服务器发送请求

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

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

AJAX - 服务器响应

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

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

onreadystatechange 事件

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

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

好了，关于AJAX的基础部分就了解到这了，想更深入的了解AJAX的魅力的，可以去官方文档学习。

书山有路勤为径，学海无涯苦作舟！