AJAX笔记

什么是AJAX?

    ~ Asynchronous JavaScript and XML的缩写。

    ~ 如果一个页面中只有一小部分内容需要修改，服务器仍然发送整个页面，也就是需要完全页面刷新，这样就需要占用更多的网络资源，响应时间也较长（AJAX就是为了解决这个问题而产生的）。

    ~ 使用AJAX,如果只需要更新页面中一小部分内容时，只需部分刷新页面即可。

 

AJAX相关技术

    ~ XHTML与CSS

    ~ JavaScript

    ~ DOM

    ~ XML与XSL

        使用XSL可以从一个XML文档中提取信息，并使用该信息创建另一个XML文档

    ~XMLHttpRequest

        它是浏览器中定义的对象，是AJAX技术中的核心对象

        通过JavaScript脚本可以创建XMLHttpRequest对象

        该对象定义了若干属性和方法，可以向服务器发出异步请求和处理响应结果。

 

AJAX交互模式

    ~ 客户触发事件

        一个客户事件触发一个AJAX事件，客户事件如，onchange事件等等，某个特定的用户动作，都能触发AJAX事件

        例如：

<input type="button" value="开始异步请求" onclick="startRequest();"/>

 

    ~ 创建XMLHttpRequest对象

        代码如下：

function createXMLHttpRequest(){
    		if(window.ActiveXObject){
    			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}else if(window.XMLHttpRequest){
    			xmlHttp = new XMLHttpRequest();
    		}
    	}

 

    ~ 向服务器发出请求

function startRequest(){
    		createXMLHttpRequest(); //创建XMLHttpRequest对象
    		xmlHttp.onreadystatechange = handleStateChange;	//为异步请求设置事件处理程序
    		xmlHttp.open("GET", "simpleResponse.xml", true);
    		xmlHttp.send(null);
    	}

            1.在向服务器发出请求之前，应该通过XMLHttpRequest对象的onreadystatechange属性设置回调函数

当XMLHttpRequest对象的内部状态改变时，就会调用回调函数（故，回调函数是处理响应的地方）

          2.接下来通过调用XMLHttpRequest对象的open()方法打开一个HTTP请求，在该方法中需要指定请求的HTTP方法（GET/POST）以及请求的资源（请求的资源可以是静态的，也可以是动态的）。

          3.调用XMLHttpRequest对象的send()方法将请求发送到指定的目标资源。send()接受一个参数（通常是一个字符串或DOM对象），这个参数作为请求体的一部分发送到目标URL

            当向send()提供参数时，要确保open()中指定的HTTP方法为POST，如果使用POST方法，则需要设置XMLHttpRequest对象的Content-Type首部，如下所示：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            如果没有数据作为请求体的一部分发送，该参数应指定为null

 

    ~ 服务器处理请求并返回响应

        1.如果请求的是静态资源，服务器将返回该资源

        如果请求的是动态资源，服务器将执行动态资源，然后向用户返回响应

        2.XMLHttpRequest对象提供了两个访问服务器响应的属性：

            Ⅰ. responseText，它将响应提供为一个字符串

            Ⅱ. responseXML，它将响应提供为一个XML对象

           由于XMLHttpRequest对象只能处理text/html类型的结果，所以如果请求的是动态资源（如Servlet），需要将Content-Type响应头设置为text/xml

           为了避免浏览器在本地缓存结果，需要将Cache-Control响应头设置为no-cache,如下所示：

response.setHeader("Cache-Control","no-cache");

 

    ~ 通过回调函数处理结果

        在回调函数中首先应该检查XMLHttpRequest对象的readyState属性和status属性的值。

        当readyState属性值为4，status属性值为200时表示响应完成，这时才能使用XMLHttpRequest对象的responseText或responseXML检索请求结果。

    例如：

function handleStateChange(){
    if(xmlHttp.readyState == 4){
    	if(xmlHttp.status == 200){
    		alert("服务器返回：" + xmlHttp.responseText);
    	}
    }
}

 

    ~ 更新HTML DOM对象

    客户使用新的数据更新HTML DOM页面表示元素。

    一般使用document.getElementById("tagId");获取元素，然后修改元素内容。

    修改元素内容的一个常用方法是设置元素的innerHTML属性值。