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

一、原生js通过ajax获取json数据因为IE浏览器对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处理异步。 

相关内容推荐