06_Ajax初步入門第一天

視頻來源：麥子學院　　講師：李毅

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