【AJAX 总结】

前言：

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;
                }

四、宏观概览

 

总结：

脚踏实地，总结+反馈，前进的道路，加油！