原生js，jquery通过ajax获得后台json数据动态新增页面元素

一、原生js通过ajax获取json数据

原生js创建ajax对象比较复杂，因为IE浏览器对ajax对象的创建于其他浏览器不同，下面创建ajax对象的方法就兼容了不同的浏览器

function createXMLHttpRequest(){
        try{
            XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");    //在IE创建较高版本的ajax对象
        }
        catch(e){
            try{
                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//在IE中创建较低版本的ajax对象
            }
            catch (e){
                XMLHttpReq = new XMLHttpRequest(); //其他浏览器ajax对象的创建
            }
        }
    }

创建完ajax对象之后，下面就是发送ajax请求了

function sendAjaxRequest() {
        createXMLHttpRequest();
        XMLHttpReq.open('post', 'test.php', true);
        XMLHttpReq.onreadystatechange = response; 
        XMLHttpReq.send(null);

    }

//接收后台返回的数据

function response() {
        if(XMLHttpReq.readyState == 4){
            if(XMLHttpReq.status == 200){
                var user = XMLHttpReq.responseText;
                user = eval(user); //这里需注意，后台返回的是纯文本数据而不是json数据，要用eval方法转换成json格式的数据
		//利用后台返回的json数据自动创建节点，采用拼接字符串的方法
                for(var i = 0; i < user.length; i ++){
                    htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
                }
                $('#container').append(htmlNodes);
            }
        }
    }

<?php
echo '[

                      				{	"name" : "Herry",
                      					"caption" : "还没好好的感受，雪花绽放的气候",
                      					"images" : "images/1.jpg"
                      				},
                      				{
                      					"name" : "Dorry",
                      					"caption" : "我们一起颤抖,会更明白什么是温柔",
                      					"images" : "images/4.jpg"
                      				},
                      				{
                      					"name" : "Money",
                      					"caption" : "还没跟你牵着手,走过荒芜的沙丘",
                      					"images" : "images/5.png"
                      				},
                      				{
                      					"name" : "Herry",
                      					"caption" : "可能从此以后学会珍惜,天长和地久",
                      					"images" : "images/2.jpg"
                      				},
                      				{
                      					"name" : "Herry",
                      					"caption" : "有时候有时候,我会相信一切有尽头,相聚离开都有时候,没有什么会永垂不朽",
                      					"images" : "images/3.jpeg"
                      				}

]';

二、用jquery通过ajax获取json数据

$.ajax({
            url: 'test.php?' + Math.random(),  // 后面加个随机数是清除缓存
            type: 'get',
            dataType: 'json',
            success: function (user) {
                //字符串拼接
                var htmlNodes = '';
                for(var i = 0; i < user.length; i ++){
                    htmlNodes += '<figure><div class="img"><img width="120" height="120" src="' + user[i].images + '"></div><figcaption><strong>' + user[i].name + '</strong><p>' + user[i].caption + '</p></figcaption></figure>';
                }

                $('#container').append(htmlNodes);
            }
        });

后台文件与上面的php文件相同

效果图

总结：1.web开发越来越倾向于用ajax异步获取数据，从上面两个例子可以看到用jquery框架处理ajax异步远比用原生js要简单和有效率的多，而且jquery封装的很棒的$.ajax(),$.get(),$.post()等方法可以提高网页的性能，推荐使用jquery处理异步。

        2.本例中采用的是拼接字符串的方式动态创建页面节点，如果对性能要求更高的话，可以考虑用一些很MVC的前端框架，如backbone.js,可以大大提高网页的性能和运行速度。