【AJAX 总结】

原创

小太阳独一无二 2022-10-17 15:50:10 ©著作权

©著作权归作者所有：来自51CTO博客作者小太阳独一无二的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言：

AJAX的学习，是B/S学习的又一段美丽的风景，AJAX技术是多种思想和技术的融合体，今天，小编带大家一起走进AJAX。

核心：

一、ajax定义：
（1）.使用XHTML和CSS的基于标准的表示技术
（2）.使用DOM进行动态显示和交互
（3）.使用xml和xslt进行数据交换和处理
（4）.使用XMLHttpRequest进行异步数据检索
（5）.使用Javascript将以上技术融合在一起

二、传统web应用VSajax方式WEB应用

三、 XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest对象
2.注册回调函数
3.使用open方法设置和服务器端交互的基本信息
4.设置发送的数据，开始和服务器端交互
5.在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容
实例：

//1、创建XMLHttpEeauest对象
               if (window.XMLHttpRequest) {
                   //IE7  IE8 FireFox Mozillar Safari  Opera
                    xmlhttp = new XMLHttpRequest();
                   if(xmlhttp.overrideMineType){
                       xmlhttp.overrideMimeType("text/xml"); 
                   }else if(window.ActiveXObject){
                       //IE6 IE5 IE5
                       var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLTHTTP.4.0","MSXML2.XMLHTTP.3.0",
                       "MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                   for(var i=0;i< activexName.length;i++){
                       try{
                           xmlhttp=new ActiveXObject(activexName[i]);
                           break;
                       } catch(e){
                       
                       }
                   }
                   }
                   if (xmlhttp === underfined|| xmlhttp === null)  {
                          alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器"); 
                           return;
                       } //2.注册回调方法
               xmlhttp.onreadystatechange = callback;
               var userName = document.getElementById("UserName").value ;

//3.设置和服务器端交互的相应参数
               xmlhttp.open("GET","AJAX?name=" +userName,true); //POST方式交互所需要增加的相应代码
               xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //4.设置服务器发送的数据，启动和服务器端的交互
               xmlhttp.send("name =" +userName);   //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
                if(xmlhttp.readyState ===4){
                    //表示和服务器端的交互已经完成
                    if(xmlhttp.status === 200)
                        //表示服务器的响应代码是200，正确的返回了数据
                          //纯文本数据的接受方法
                         var message =xmlhttp.responseText;
                         //XML数据对应的DOM对象的接受方法
                         //使用前提，服务端需要设置content-type为text/xml
                         //var domXml =xmlhttp.resposeXML;
                         
                         //记忆向div标签中填充文本内容的方法
                         var div = document.getElementById("message");
                         div.innerHTML = message;
                }