ajax基础

1、AJAX理解：

异步的javascript 与xml

包含的主要技术点：异步；javascript;xml

2、AJAX的技术组成：

AJAX不是一种技术，而是多种传统技术的组合

HTML 和 CSS

JavaScript 

XML和XSLT

DOM

XMLHttpRequest对象 

3、AJAX的工作原理：

传统的b/s操作，客户端执行的是与服务器端的同步操作，必须等待服务器有返回信息后才能在客户端显示出来，而是客户端有明确的刷新过程。

在AJAX的工作中，在传统的浏览器端，服务器端的基础上，添加了一个称为AJAX引擎的中间层，来实现异步的数据传输。

AJAX引擎，主要是通过一个XMLHttpRequest对象实现的。

4、XMLHttpRequest对象

通过XMLHttpRequest，AJAX可以像桌面应用程序一样，只同服务器进行数据层面的交互，而不用每次都刷新页面。这样，即减轻了服务器的负担，又加快了响应速度，缩短了用户等待的时间。

XMLHttpRequest是AJAX中最重要的一个对象。

XMLHttpRequest在IE5中，就已经实现了，而且在不同浏览器中是兼容的。所以，在开发中可以通过固定的方法来获得

5、AJAX的核心工作机制

（1）初始化XMLHttpRequest对象

（2）客户端发送请求

（3）服务器接收请求并进行处理

（4）服务器返回响应数据

（5）客户端接受响应数据

（6）根据响应数据在客户端进行显示

根据以上流程，可形成初步的AJAX的开发框架

<script language="javascript">

	var XMLHttpReq;

 	//创建XMLHttpRequest对象       

    function createXMLHttpRequest() {

		if(window.XMLHttpRequest) { //Mozilla 浏览器

			XMLHttpReq = new XMLHttpRequest();

		}

		else if (window.ActiveXObject) { // IE浏览器

			try {

				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

			} catch (e) {

				try {

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

				} catch (e) {}

			}

		}

	}

或者是函数如下：

var XMLHttpReq;

	function createXMLHttpRequest() {

		if(window.ActiveXObject){

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

	}else{

		XMLHttpReq = new XMLHttpRequest();

	}

	}

//发送请求函数

	function sendRequest(url) {

		createXMLHttpRequest();

		XMLHttpReq.open("GET", url, true);

		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

		XMLHttpReq.send(null);  // 发送请求

	}

	// 处理返回信息函数

    function processResponse() {

    	if (XMLHttpReq.readyState == 4) { // 判断对象状态

        	if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

            	var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;

                window.alert(res);                

            } else { //页面不正常

                window.alert("您所请求的页面有异常。");

            }

        }

    }

//实现自己功能的函数，在此函数中根据需要调用请求发送的函数sendRequest