原生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,可以大大提高网页的性能和运行速度。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值