Ajax快速入门

1、在正式介绍Ajax前，需要简短的介绍一下同步交互和异步交互

同步交互，客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端不能做任何其他事情。发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

异步交互，客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端可以做其他事情。发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

2、Ajax定义

Ajax被认为是(AsynchronousJavaScript and XML的缩写），允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

3、Ajax模型与传统web模型的区别

传统web模型：客户端浏览器向服务器端发送请求，所请求的是整个页面,服务器端处理完毕后，向客户端响应，所响应的是整个页面,在传统的web模型中，客户端与服务器端通信，交互的是整个页面；

优点：实现起来比较容易，逻辑比较清晰等等
缺点：体积比较庞大，如果项目过大导致逻辑复杂

Ajax模型：客户端浏览器向服务器端发送请求，所请求的是数据,服务器端处理完毕后，向客户端响应，所响应的是数据,在ajax模型中，客户端与服务器端通信，交互的是数据层面。

优点：体积比较小，比较灵活，对服务器端造成的压力比较小
缺点：在同一个页面使用ajax过多的话，导致页面的性能非常差

4、Ajax的优点与缺点

优点：

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

2、AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3、对流媒体的支持没有FLASH、Java Applet好。

4、对搜索引擎的支持比较弱。

5、一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

5、Ajax核心对象--XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准！由于非标准所以实现方法不统一，Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

6、创建XMLHttpRequest对象的几种方式

方式一、
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox,Opera 8.0+,Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }

	return xmlHttp;
 }

方式二、
function getXMLHttpRequest(){
	 var xmlHttpReq=null; 
	 if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象
	 	xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
	 }else if(window.XMLHttpRequest){
	 	 xmlHttpReq = new XMLHttpRequest();
	 }
     return xmlHttpReq;
}

方式三、

/**
 * 获取XmlHttpRequest对象
 */
function getXMLHttpRequest() {
	var xmlHttpReq=null;
	if (window.XMLHttpRequest) {//Mozilla 浏览器
		xmlHttpReq = new XMLHttpRequest();
	}else {
		if (window.ActiveXObject) {//IE 浏览器
			try {
				xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
				try {//IE 浏览器
					xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (e) {
				}
			}
		}
	}
	return xmlHttpReq;
}

8、Ajax的实现步骤

1、创建XMLHttpRequest对象
参看上面的示例！
2、服务器端向客户端响应（注册监听）
XMLHttpRequest对象的onreadystatechange属性，
   1、该事件处理函数由服务器触发，而不是用户。
   2、在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的 readyState来实现。改变readyState 属性是服务器对客户端连接操作的一种方式。
   3、每次 readyState 属性的改变都会触发 readystatechange事件。
XMLHttpRequest对象的readyState 属性
   1、readyState 属性表示Ajax请求的当前状态。
   2、它的值用数字代表。
	0 代表未初始化。 还没有调用 open 方法
	1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
	2 代表已加载完毕。send 已被调用。请求已经开始
	3 代表交互中。服务器正在发送响应
	4 代表完成。响应发送完毕
   3、每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
   4、readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4。
XMLHttpRequest对象的status属性
   1、服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
   2、常用状态码及其含义：
	404 没找到页面(notfound)
	403 禁止访问(forbidden)
	500 内部服务器出错(internalservice error)
	200 一切正常(ok)
	304 没有被修改(notmodified)(服务器返回304状态，表示源文件没有被修改 )
   3、在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应。
3、建立客户端与服务器端的通信连接
  XMLHttpRequest对象的open ( method,url,asynch ) 方法XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求
	method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
	url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
	asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
如果请求方式是”POST”方式的话，需要再open ( ) 方法后，调用setRequestHeader(header,value)方法，当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
	Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。
		参数header： 首部的名字;  
		参数value：首部的值。
	如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了，该方法必须在open()之后才能调用。
4、客户端向服务器端发送请求
XMLHttpRequest对象的send (data ) 方法
1、如果请求方式是”GET”方式的话，send ( ) 方法发送请求数据，服务器端接受不到参数。
2、 如果请求方式是”POST”方式的话，send ( ) 方法发送请求数据，服务器端可以接受参数。

9、测试代码

<%--
  Created by IntelliJ IDEA.
  User: lwuyang
  Date: 14-2-5
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script type="text/javascript" src="./ajax.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">
    <input type="button" name="ok" id="ok" value="测试服务器连接">
</form>
</body>
</html>

/**
 * Created by liwuyang on 14-2-5.
 */
window.onload = function(){
    document.getElementById("ok").onclick = function(){
        //1,创建XMLHttpRequest对象
        var xhr = new createXMLHttpRequest();
//        alert(xhr);

        /**
         *  4,接受服务器端的响应数据(注册监听)
         *      XMLHttpRequest对象的onreadystatechange属性
         *      XMLHttpRequest对象的readyState 属性
         *          readyState 属性表示Ajax请求的当前状态。
                     它的值用数字代表。
                     0 代表未初始化。 还没有调用 open 方法
                     1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
                     2 代表已加载完毕。send 已被调用。请求已经开始
                     3 代表交互中。服务器正在发送响应
                     4 代表完成。响应发送完毕

                     XMLHttpRequest对象的status属性
                     常用状态码及其含义：
                     404 没找到页面(not found)
                     403 禁止访问(forbidden)
                     500 内部服务器出错(internal service error)
                     200 一切正常(ok)
                     304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
         */
        xhr.onreadystatechange = function(){
            alert(xhr.readyState);
//            alert(xhr.status);
            if(xhr.readyState == 4){
                if(xhr.status == 200 || xhr.status == 304){
                    //获取服务器响应的数据
                    var data = xhr.responseText;
                    alert(data);
                }
            }
        }

        /**
         *  2,服务器和客户端建立通信
         *  XMLHttpRequest对象的open()方法的三个参数：method,asynch
         *      参数1：请求类型，即get和post方法
         *      参数2：请求路径
         *      参数3：是否是异步请求，默认为true，表示支持异步请求
         */
        xhr.open("get","../ajaxServlet?timeStacmp="+ new Date().getTime() + "&c=22",true);

        //如果是post请求方式，需要手动设置请求头信息
       // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        /**
         * 3，向服务器发送请求
         *
         * XMLHttpRequest对象的send()方法
         *      如果客户端的请求类型是get方式的话，利用send()方法发送的数据，服务器无法接受到请求数据，相当于发送了null值
         *
         *      如果客户端的请求类型是post方式的话，利用send()方法发送的数据，服务器可以接受到请求数据
         *
         *  虽然get方法发送请求，服务器端无法接受响应数据，但此步骤不能省略，此时可以直接发送xhr。sent(null)
         */
        xhr.send("a=9&b=10");
    }
    //创建一个XMLHttpRequest对象,利用此对象与服务器进行通信 是AJAX技术的核心
    function createXMLHttpRequest(){
        var xmlHttp;
        try{ // Firefox,Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
            try{// Internet Explorer
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){}
            }
        }
        return xmlHttp;
    }
}

/**
 * 小结：
 *  ajax模型中get和post发送请求的区别：
 *      1，以get方法发送的请求时，服务器无法接收到客户端的请求数据
 *      2，open()，方法的第一个参数不同
 *      3，如果是post方式发送请求时，需要在建立通信后，设置请求头信息，即XMLHttpRequest.setRequestHeader();
 */

10.1、HTML
	1、XMLHttpRequest对象的responseText属性
?	    a、responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
?	    b、当 readyState 属性值变成 4 时,responseText 属性才可用，表明 Ajax 请求已经结束。
?	2、优点：
?	    a、从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
?	    b、HTML 的可读性好。
?	    c、HTML 代码块与 innerHTML 属性搭配，效率高。
?	3、缺点：
?	   a、若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适(拆串)。
?	   b、innerHTML 并非 DOM 标准。
10.2、XML
?	1、XMLHttpRequest对象的responseXML属性
?	    a、只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml。
?	2、优点：
?	    a、XML 是一种通用的数据格式。
?	    b、不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
?	    c、利用 DOM 可以完全掌控文档。页面中解析xml不需要第三方任何的工具
?	3、缺点：
?	    a、如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
? 	    b、当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂。
10.3、JSON
?	JSON（JavaScript Object  Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 
?	JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
?	规则如下:
	   1、映射用冒号（“：”）表示。名称:值；
	   2、并列的数据之间用逗号（“，”）分隔；
	   3、映射的集合（对象）用大括号（“{}”）表示；
	   4、并列数据的集合（数组）用方括号(“[]”)表示；
	   5、元素值可具有的类型：string,number,object,array,true,false,null。 
?	解析JSON
?	   1、JSON 只是一种文本字符串。它被存储在 responseText 属性中；
?	   2、为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句；
?	   3、函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!