zoukankan      html  css  js  c++  java
  • 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>
                     ---------------------------------------------------------------------------------------------------------

  • 相关阅读:
    Jmeter学习笔记-初级
    python selenium利用 126.com id自动生成
    Python代码无法保存
    卸载python2.7出错
    python pip用法
    pycharm 连接数据库
    Python打包PyPI上传实践
    Python实现Api的Mock测试
    抓包工具使用
    Jenkins+Ant可持续集成Jmeter脚本
  • 原文地址:https://www.cnblogs.com/---cc/p/3714586.html
Copyright © 2011-2022 走看看