AJAX学习笔记

代码:
mainhtml

1. <script type="text/javascript" language="javascript">      
2.     function makeRequest(url) {      
3.         var httpRequest;      
4.      
5.         if (window.XMLHttpRequest) { // Mozilla, Safari, ...      
6.             httpRequest = new XMLHttpRequest();      
7.             if (httpRequest.overrideMimeType) {      
8.                 httpRequest.overrideMimeType('text/xml');      
9.                 // See note below about this line      
10.             }      
11.         } else if (window.ActiveXObject) { // IE      
12.             try {      
13.                 httpRequest = new ActiveXObject("Msxml2.XMLHTTP");      
14.             } catch (e) {      
15.                 try {      
16.                     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");      
17.                 } catch (e) {      
18.                 }      
19.             }      
20.         }      
21.      
22.         if (!httpRequest) {      
23.             alert('Giving up :( Cannot create an XMLHTTP instance');      
24.             return false;      
25.         }      
26.         httpRequest.onreadystatechange = function() { alertContents(httpRequest); };//当服务器将响应信息返      
27.         //回时要作的事情这个时一个回掉函数      
28.         httpRequest.open('GET',url,true);//      
29.         httpRequest.send(null);      
30.      
31.     }      
32.      
33.     function alertContents(httpRequest) {      
34.      
35.         if (httpRequest.readyState == 4) {//4表示 If the state has the value of 4,      
36.         //that means that the full server response is received and it's OK for you to continue processing it.      
37.         //大概意思是说如果状态是4的话服务器相应是被接受到同时服务器正常能够为您继续处理请求      
38.             if (httpRequest.status == 200) {//200表示http服务响应正常      
39.                var xmldoc = httpRequest.responseXML;      
40. var root_node = xmldoc.getElementsByTagName('root').item(0);      
41. alert(root_node.firstChild.data);      
42. document.write(root_node.firstChild.data);//输出xml文件的内容并且没有刷新和重定向      
43. //可见当点击连接的时候      
44.      
45.             } else {      
46.                 alert('There was a problem with the request.');      
47.             }      
48.         }      
49.      
50.     }      
51. script>      
52. <span      
53.     style="cursor: pointer; text-decoration: underline"     
54.     onclick="makeRequest('test.xml')">      
55.         Make a request      
56. span>      

   testxml

1. xml version="1.0" ?>  
2. <root>  
3.    I am a test xml file!!!!!!!!!   
4. root>  

1.       ajax的执行过程<o:p></o:p>

首先当用户触发一个事件的时候这个事件调用一个用于创建xmlhttprequest的函数,然后再由这个函数去访问服务器,,服务器再看是否需要访问数据库如果需要则访问完数据库后将结果传给xmlhttprequest,然后由它调用一个回掉函数来将结果显示给用户.

<o:p></o:p>

        1.1第一步创建xmlHttpRequest对象<o:p></o:p>

        var httpRequest;<o:p> </o:p>

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...

            httpRequest = new XMLHttpRequest();

            if (httpRequest.overrideMimeType) {

                httpRequest.overrideMimeType('text/xml');

                // See note below about this line

            }

        } else if (window.ActiveXObject) { // IE

            try {

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

            } catch (e) {

                try {

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

                } catch (e) {

                }

            }

        }

        if (!httpRequest) {

            alert('Giving up :( Cannot create an XMLHTTP instance');

            return false;

        }

<o:p> </o:p>

}

1.2然后由xmlhttprequest对象来访问服务器<o:p></o:p>

httpRequest.onreadystatechange = function() { alertContents(httpRequest); };//当服务器将响应信息返回时要作的事情这个时一个回掉函数

1.3还有就是当返回信息的时候要对服务器和http请求的状态进行判断,要是正常则执行回掉函数中的操作.<o:p></o:p>

  if (httpRequest.readyState == 4) {//4表示 If the state has the value of 4,

        //that means that the full server response is received and it's OK for you to continue processing it.

        //大概意思是说如果状态是4的话服务器相应是被接受到同时服务器正常能够为您继续处理请求

            if (httpRequest.status == 200) {//200表示http服务响应正常

               var xmldoc = httpRequest.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

alert(root_node.firstChild.data);

document.write(root_node.firstChild.data);//输出xml文件的内容并且没有刷新和重定向

//可见当点击连接的时候

<o:p> </o:p>

            } else {

                alert('There was a problem with the request.');

            }

        }

 1.4调用部分<o:p></o:p>

 由此事件进行触发<o:p></o:p>

    style="cursor: pointer; text-decoration: underline"

    οnclick="makeRequest('test.xml')">

        Make a request

此例子的功能是,当用户点击一个链接时,则在步刷新的前提吓将xml文件的相关内容显示在main.html文件上.实现了很好的交互性.<o:p> </o:p>