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的服务定义详细说明了各层所提供的服务。某一层的服务就是该层及其下各层的一种能力，它通过接口提供给更高一层。各层所提供的服务与这些服务是怎么实现的无关。

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();

AJAX - 服务器响应

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

onreadystatechange 事件

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

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

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

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

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

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

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