原生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);
    }

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

5. responseText：获得字符串形式的响应数据。

接收后台返回的数据

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);
            }
        }
    } 

eval()：与 JOSN.parse() :

两种解析字符串的方法：

eval() :

　　  eval函数用于将字符串中的JS代码解析出来并执行！！     
   　  当使用eval函数解析JSON字符串时，需 要在函数内部将JSON字符串用()拼接
   　　   例如：  eval("("+json1+")")
  　　　　  表示eval函数中的字符串不是用于执行，而是要进行字符串解析
  　　   即：
   　　　　 eval("("+json1+")") = JSON.parse(json1)；

JOSN.parse() :

　　纯粹的将JSON字符串解析为数组或对象；

<?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处理异步。