06_Ajax初步入门第一天

Posted 2020-10-17 yolo_bean

视频来源：麦子学院　　讲师：李毅

1. ajax:异步javascript和XML,局部刷新
2. 原生ajax实例
   

   创建对象
   XMLHttpRequest对象
   request=new XMLHttpRequest();//firefox.opera,safari
   request=new ActiveXObject(‘Mmsxml2.XMLHTTP‘);//IE6+
   
   html部分：
       <input type="button" name="btn" id="btn" value="ajax" onclick="act();"/>
       <textarea rows="10" cols="20" id="m"></textarea>
   
   js部分：
       function act(){
           var request;
           if(window.XMLHttpRequest){
               request=new XMLHttpRequest();
           }else if(window.ActiveXObject){
               request=new ActiveXObject(‘Microsoft.XMLHTTP‘);
           }else{
               alert(‘浏览器不支持ajax‘);
               return false;
           }
           request.onreadystatechange = function() {
           if (request.readyState == 4 && request.status == 200) {
           document.getElementById("m").innerHTML = request.responseText;
           }
           };
           request.open("GET", "0.txt", true);
           request.send();
       }

    

3. eval（）的使用
   

   alert(‘request:‘+eval(prompt(‘请输入表达式：‘)));    
           //在弹出的交互框中输入：2+1，eval返回值为3，alert出：request:3
           
               //使用eval解析json字符串
       var user="{‘name‘:‘yolo‘,‘age‘:22}";
       var a=eval("("+user+")");
       console.log(a.name);//输出：yolo
       

    

4. dom添加删除元素
   

       //dom添加元素：创建元素，找一个已存在的元素，去追加新元素
       var e=document.createElement(‘p‘);
       var node=document.createTextNode(‘这是新文本‘);
       e.appendChild(node);
       var div1=document.getElementById(‘div1‘);
       div1.appendChild(e);
       //删除元素，找到父节点，通过removeChild删除
       var div1=document.getElementById(‘div1‘);
       var p1=document.getElementById(‘p1‘);
       div.removeChild(p1);