Ajax原生态

XMLHttpRequest五步使用注意事项

            

          1、不同浏览器中XMLHttpRequest对象建立的方式不同

          2、设置回调函数时，不要在函数名后面加 括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。

          3、open方法最多可以有五个参数，其中头三个参数是必须的。并注意GET方式和POST方式在设置send方式的参数不同。

          4、回调函数中，最好判断readyState和status的两个if条件，分开来写。readyState的判断条件位于外层，status位于内层。

          5、当服务器没有正确返回XML数据时，在js中使用responseXML的方式获取返回的xml数据对应得DOM对象时，FireFox和IE的结果是有差别的。

下面是本示例的完整代码：

    

[javascript]  view plain copy print ?

1. <script type="text/javascript">  
2.            var xmlhttp;  
3.            function submit(){  
4.                //1.创建XMLHttpRequest对象  
5.                if(window.XMLHttpRequest){  
6.                    //IE7,IE8,FireFox,Mozilllar,Safari,Opera  
7.                    //alert("IE7,IE8,FireFox,Mozilllar,Safari,Opera");  
8.                    xmlhttp=new XMLHttpRequest();  
9.                    if(xmlhttp.overrideMimeType){  
10.                          xmlhttp.overrideMimeType("text/xml");  
11.                    }  
12.                }else if(window.ActiveXObject){  
13.                    //IE6.IE5,IE5.5  
14.                    //alert("IE6.IE5,IE5.5");  
15.                   /* var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0", 
16.                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP", 
17.                        "Microsoft.XMLHTTP"];*/  
18.                    var activexName=["MSXML.2.XMLHTTP","Microsoft.XMLHTTP"];  
19.                    for (var i = 0; i < activexName.length; i++) {  
20.                        try {  
21.                            xmlhttp=new ActiveXObject(activexName[i]);  
22.                            break;  
23.                        } catch (e) {  
24.   
25.                        }  
26.                    }  
27.                }  
28.            if(xmlhttp == undefined || xmlhttp == null){  
29.                alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");  
30.                return;  
31.            }  
32.            //2.注册回调方法  
33.            xmlhttp.onreadystatechange=callBack;  
34.            //错误的写法，加括号说明将返回值给了onreadystatechange，从服务器端返回的数据  
35.            //不能执行数据解析和更新的操作  
36.            // xmlhttp.onreadystatechange=callback();  
37.            // 记忆一个固定用法，获取文本框中用户输入的内容  
38.            var userName=document.getElementById("UserName").value;  
39.            userName=encodeURI(encodeURI(userName));  
40.            }  
41.            //GET方式交互  
42.           //3.设置和服务器端交互的相互参数  
43.            xmlhttp.open("GET","AJAX?name=" + userName,true);  
44.            //4.设置向服务器端发送的数据，启动和服务器端的交互  
45.            xmlhttp.send(null);  
46.            //POST方式交互  
47.            //3.设置和服务器端交互的相互参数  
48.             xmlhttp.open("POST","AJAX",true);  
49.            //POST方式交互所需要增加的代码  
50.            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
51.              
52.            //4.设置向服务器端发送的数据，启动和服务器端的交互  
53.            xmlhttp.send("name=" + userName);  
54.        }  
55.        function callBack(){  
56.            //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据  
57.            if(xmlhttp.readyState == 4){  
58.                //表示和服务器端的交互已经完成  
59.                if(xmlhttp.status == 200){  
60.                    //表示服务器的响应代码是200，正确的返回了数据  
61.                    //纯文本数据的接受方法  
62.                    var message=xmlhttp.responseText;  
63.                    //xml数据对应的DOM对象的接受方法  
64.                    //使用的前提是，服务器端需要设置content-type为text/xml  
65.                    //var domXml=xmlhttp.responseXML;  
66.                      
67.                    //记忆向div标签中填充文本内容的方法  
68.                    var div =document.getElementById("message");  
69.                    div.innerHTML=message;  
70.                    //alert(xmlhttp.responseXML.documentElement);  
71.                    //判断返回的xml数据是否正确  
72.                      
73.                     var rootElement =xmlhttp.responseXML.documentElement;  
74.                     if(rootElement == null || rootElement.nodeName !=""){  
75.                     }else{  
76.                     //数据正确返回，可以进行相关处理  
77.                     }  
78.                       
79.                }  
80.            }  
81.        }  
82.         
83.        </script>