Ajax入门笔记+服务器配置

 

 

认识Ajax：
              AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
              页面局部刷新
              在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

使用Ajax：
             可以单独封装，方便多个文件调用。
               ----------------------------------------------------------------------------------------------------
                function ajax(url, fnSucc, fnFaild){    //文件地址，成功调取文件返回的内容，失败时执行的程序
                          //1.创建Ajax对象，判断兼容性
                          var oAjax=null;
        
                         if(window.XMLHttpRequest){
                                      oAjax=new XMLHttpRequest();
                         }else{
                                      oAjax=new ActiveXObject("Microsoft.XMLHTTP");
                         }
        
                         //2.连接服务器
                         oAjax.open('GET', url, true);

                                          “      关于Ajax缓存问题，已经成功调用过Ajax文件后，服务器端源文件更再次改，客户端不会实时刷新，而是再次调用
                                            先前缓存的文件。解决办法，就是在文件名上动脑筋了：
                                                   oAjax.open('GET','text.txt?t='+new date() .getTime() ,true);    <注意问号>
                                                          根据实际需求来确定多久更新，  毫秒、秒、分...”
                                                    
                         //3.发送请求
                         oAjax.send();
        
                         //4.接收服务器的返回
                        oAjax.onreadystatechange=function (){
                                     if(oAjax.readyState==4){
                                                 if(oAjax.status==200){
                                                         if(oAjax.responseXML && oAjax.responseXML.childNodes.length>0){             //判断是纯文本文件还是XML文件
                                                                    var outMsg = getText(oAjax.responseXML.getElementByTagName('p')[0]);  
                                                                                         /* 可以使用js中的getElementByTagName() 来获取XML里的元素 */
                                                         }else{
                                                                    var outMsg = oAjax.responseText;
                                                 }
                                                 fnSucc(outMsg);

                                                 function getText(inval){      //判断获取的节点里面，是否有文本内容
                                                          if(inval.textContent){
                                                                    return inval.textContent;
                                                          }
                                                          return inval.text;
                                                 }
                                     }else{                                                 //发生错误时
                                             if(fnFaild){
                                               fnFaild(oAjax.status);
                                             }
                                     }
                                     };
                }
               ------------------------------------------------------------------------------------------------------------

               调用：
                       <script src="ajax.js"></script>  //引入文件
                       <script>
                                  window.onload=function (){                                     
                                              var oBtn=document.getElementById('btn1');         
        
                                              oBtn.onclick=function (){
                                                              //ajax能且仅能 从服务器读取文件
                                                              //参数可以略写 文件名，成功调取文件返回的内容，失败时执行的程序
                                                             ajax('abc.txt?t='+new Date().getTime(), function (str){
                                                                                           alert(str);
                                                                                            /* 成功获取文件内容后，执行代码写在这里 */
                                                              })，;
                                               };
                                    };
                        </script>
                 ---------------------------------------------------------------------------------------------------------