AJAX学习小例子

初学JSON的一个小例子。

大意就是将读取JSON文件，将数据写入一个表格。
下面是实际效果图：

附：由于URL链接失效，所以就没有写成一个图片框。

• 部分JSON数据

{
  "ListContents" : [
    {
      "GroupCount" : "2",
      "GroupInfo" : [
        {
          "BrandID" : "1",
          "MainBrandName" : "奥迪",
          "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/1.png"
        },
        {
          "BrandID" : "57",
          "MainBrandName" : "阿斯顿·马丁",
          "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/57.png"
        }
      ],
      "PinYin" : "A"
    },

JSON数据

• HTML部分

很简单，就是一个DIV包裹着一个TABLE。

<div id="container" style="width: 700px;margin: auto;">
    <table border="1" >
        <tr>
            <td>BrandID</td><td>MainBrandName</td><td>imgURL</td>
        </tr>
    </table>
</div>

CSS部分只是做了一个简单的居中

-铺垫
为了之后代码的简介，这里提取了一些方法实现

    //通过ID获取标签元素
    function $(idValue){
        return document.getElementById(idValue);
    }
    //封装创建ELEMENT的方法
    function createElement(elementName){
        return document.createElement(elementName);
    }
    //封装创建TEXTNODE的方法
    function createTextNode(elementValue){
        return document.createTextNode(elementValue);
    }

• 重点

你可以这样写，一个方法就行。

     $.ajax({
     type : "get",
     async:false,
     url : "http://app.example.com/base/json.do?sid=1494&busiId=101",
     dataType : "jsonp",//jsonp数据类型
     jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数
     success : function(data){
     $("#myID").text("Result:"+data.result)
     },
     error:function(){
     alert('fail');
     }
     });

也可以像这样

创建一个函数返回AJAX对象

    function ajaxFn(method,url,data,successCallBackFn,failCallBackFn) {
        //创建AJAX对象
        var xhr;
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else if(window.ActiveXObject){
            //IE版本的创建方式
            var versions=["Msxml2.XMLhttp","Mircrosoft.XMLHTTP"];
            for(var version in versions){
                try{
                    xhr=new ActiveXObject(version);
                    break;
                }catch(e){
                    console.log(e);
                    alert("ERROR");
                }
            }
        }else{
            throw new Erro("浏览器不支持AJAX");
        }
        //打开连接发送请求
        if(method=="GET"||method=="get") {
            //利用AJAX GET请求会有缓存
            //为了避免每一次访问的路径不一样，可以在URL后添加随机数会有缓存
            xhr.open(method, url+"?" + data +"?rand=" + Math.random(), true);
            xhr.send(null);
        }else if(method=="POST"||method=="post"){
            xhr.open(method, url, true);
            //POST请求需要设置请求头
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencode");
            //发送请求
            xhr.send(data);
        }else {
            console.log("请求方式不正确");
        }
        //请求响应结果
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    //调用回调函数
                    successCallBackFn(xhr.responseText);
                }else{
                    //失败
                    failCallBackFn("FAIL失败！");
                }
            }
        };
        return xhr;
    }

下面是对应成功和失败的函数：

//AJAX返回函数成功
    function successCallBackFn(returnValue) {
        //把JSON字符串转换成JS对象
        var carsdata = JSON.parse(returnValue);
        //alert(carsdata.ListCount);
        //获取DIV元素
        var div = $("container");
        var NODES = carsdata.ListContents;
        for(var nodes in NODES){
            //创建一个TABLE
            var table=createElement("table");
            table.setAttribute("border","1");
            //创建THEAD
            var thead=createElement("thead");
            var theadNode=createTextNode(NODES[nodes].PinYin);
            //添加THEAD到TABLE
            thead.appendChild(theadNode);
            table.appendChild(thead);

            //添加节点
            var cars= NODES[nodes].GroupInfo;
            for( var car in cars){
                //创建一个TR
                var tr=createElement("tr");
                //创建三个TD
                var td1 = createElement("td");
                var textnode1 = createTextNode(cars[car].BrandID);
                td1.appendChild(textnode1);

                var td2 = createElement("td");
                var textnode2 = createTextNode(cars[car].MainBrandName);
                td2.appendChild(textnode2);

                var td3 = createElement("td");
                var textnode3 = createTextNode(cars[car].imgURL);
                td3.appendChild(textnode3);
                //将三个TD添加到TR
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                table.appendChild(tr);
            }
            //将TABLE添加到DIV中
            div.appendChild(table);
        }
    }


    //AJAX返回函数成功
    function failCallBackFn(returnValue){
        alert(returnValue);
    }

• 工具类

/*
     定义对象EventUtil
     element:给某个元素添加事件
     eventType:事件类型
     handler:具体实现的函数
     */
    var EventUtil={
        //添加事件监听
        addHandler:function(element,eventType,handler){
            //三种实现
            if(window.addEventListener){
                //IE9或以上
                element.addEventListener(eventType,handler,false);
            }else  if(window.attachEvent){
                //IE8或以下
                //注意这里的eventType加上了on
                element.attachEvent("on"+eventType,handler);
            }else{
                element["on"+eventType]=handler;
            }
        },
        //移除事件监听
        removeHandler:function(element,eventType,handler){
            if(window.removeEventListener){
                element.removeEventListener(eventType,handler,false);
            }else if(window.detachEvent){
                element.detachEvent("on"+eventType,handler);
            }else{
                element["on"+eventType]=null;
            }
        }
    };

• 调用

    EventUtil.addHandler(window, "load", function(){
        ajaxFn("GET", "../js/car.json",null, successCallBackFn, failCallBackFn);
    });

全部代码