Ajax

一、       Ajax简介                                                                                    

AJAX 指异步JavaScript 及 XML（Asynchronous JavaScript And XML/json）AJAX 是一种在 2005 年由Google 推广开来的编程模式。

AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。通过AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。AJAX 基于JavaScript 和 HTTP 请求（HTTP requests）。

二、       Ajax的处理流程                                                                           

Ajax允许用户异步的发起一次异步的后台请求然后对页面的某个元素进行修改而不需要重新刷新一次页面，就是说在发起ajax请求的时候用户可以操作页面的其它元素。

处理示意图如下：

三、       Ajax的优缺点：                                                                        

 

1.     Ajax的主要优点：

1)        它使用异步方式与服务器通信，页面无需刷新，用户的体验比较好。

2)        原则是”按需取数据”，可以最大程度地减少冗余请求和响应对服务器造成的负担。

3)        基于标准化、广泛支持的技术，不需要下载附加的插件等。

2.     Ajax的主要缺点：

1)        不支持浏览器的”后退”按钮来回退到前一个页面状态

2)        破坏了程序的异常机制。暴露了与服务器交互的细节，因此相对没有那么安全。

3)        对搜索引擎的支持比较弱

四、       使用ajax发起异步请求（javascript）                                          

发起ajax请求分为以下四个步骤：

1.     创建XMLHttpRequest对象

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

创建XMLHttpRequest 对象的语法：

       var xmlHttp = new XMLHttpRequest();

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

       variable=newActiveXObject("Microsoft.XMLHTTP");

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

//定义一个全局变量var xmlHttp = null;//创建XMLHttpRequest对象function getXmlHttp(){if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else {xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');}return xmlHttp;}}

2.     打开连接

打开连接通过调用XMLHttpRequest对象的open方法，该方法需要传入三个参数

Method：请求的方法 get/post;

url:访问后台服务器的url地址

issync:是否是异步的。一般都设置为true

//打开连接var url = "http://localhost:80/项目名称/servlet";        xmlHttp.open("GET", url, true);

注意：如果请求方法是post,那么在打开连接之后必须设置一个请求头：

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

3.     发送请求

发送请求通过调用xmlHttp.send方法。如果请求方式是post,可以在send方法中传递请求的参数，如：xmlHttp.send(“username=itjot&password=password”)也可以直接加到url后面;

//发送请求       xmlHttp.send(“username=itjot&password=password”);

4.     接受响应

如果async=true必须规定在响应处于 onreadystatechange事件中的就绪状态时执行的函数：

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

请注意xmlhttp.readyState和xmlhttp.status两个状态，下表显示了xmlhttp对象的三个重要的属性描述：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4发生变化。

•    0: 请求未初始化

•    1: 服务器连接已建立

•    2: 请求已接收

•    3: 请求处理中

•    4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为200 时，表示响应已就绪.

响应就绪之后就可以对结果进行处理，对响应的结果处理我们可以使用XMLHttpRequest 对象的 responseText或 responseXML 属性。

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得XML 形式的响应数据。