简介

今天介绍一下ajax的使用.

内容

• AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• 使用ajax获取.txt文件

-html:
<h2>ajax获取的内容:</h2>
 <div id="myDiv"></div>
-js:
                var xmlhttp;
                if(window.XMLHttpRequest) {
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // IE6, IE5 浏览器执行代码
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 回调函数
                xmlhttp.onreadystatechange = function() {
                        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                            console.log(xmlhttp.responseText);
                        }
                    }
                    //设置请求格式
                xmlhttp.open("GET", "./text.txt", true);
                //发送请求
                xmlhttp.send();

txt.png

• 使用ajax解析json

      -js:
            var xhr;
            if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.onreadystatechange = function() {

                if(xhr.readyState == 4 && xhr.status == 200) {
                    var response = xhr.responseText;

                    var json = JSON.parse(response);
                    var data = json["data"];
                    for(var i = 0; i < data.length; i++) {
                        var book = data[i];
                        console.log("书名:" + book["name"] + "\n" + "类别:" + book['category'] + "\n" + "介绍:" + book["desc"]);
                    }

                }
            }

            xhr.open("GET", './data.json', true);
            xhr.send();

json.png

• ajax 解析xml数据

  -js:
            var xmlhttp ;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{                
                 xmlhttp = new  ActiveXObject("Microsoft.XMLHTTP");
            }
            //回调
            xmlhttp.onreadystatechange=function(){                   
                 if(xmlhttp.readyState==4&&xmlhttp.status==200){
                   var rootEle = xmlhttp.responseXML;                       
                   var catalogEle = rootEle.getElementsByTagName("CATALOG")[0];
                   var cdList = catalogEle.getElementsByTagName("CD");      
                   var table = document.createElement("table");                      
                    table.innerHTML="<tr><th>Artist</th> <th>Title</th></tr>";
                   for(var i =0;i<cdList.length;i++){
                     var  cd = cdList[i];
                      var td_title = document.createElement("td");
                      var  title = cd.getElementsByTagName("TITLE")[0].firstChild.nodeValue;
                      td_title.append(title);
                      
                      var td_artist = document.createElement("td");
                      var  artist = cd.getElementsByTagName("ARTIST")[0].firstChild.nodeValue;
                      td_artist.append(artist);
                      
                      var tr = document.createElement("tr");
                      tr.appendChild(td_artist);
                      tr.appendChild(td_title);
                      table.appendChild(tr);
                    
                   }
                   document.getElementById("content").appendChild(table);
                   
                  
                 }
                
            }
 //request
             xmlhttp.open("GET","./cd.xml",true);
            xmlhttp.send(null); 

xml.png

结束

这次只介绍ajax常用数据的解析和get请求,下次介绍ajax的提交数据和跨域问题的解决方案.