通过Jquery中Ajax获取json文件数据,Canvas实战之刮奖效果

在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象。

通过Jquery中Ajax获取json文件数据,jqueryajax获取json

  1. JSON(JavaScript Object Notation): javaScript对象表示法;

     是存储和交换文本信息的语法,比xml更小,更快,更易解析。

  1. JSON基本书写格式 : 名称/值对。 例如: “Student”:”Tom”

    Json值可以是:

   例如(对象):{“name”:”tom”,”age”:23} 

         (数组):

1 {
2     "张三":[
3        {"姓":"张"},
4        {"名","三"},
5        {"age",23}     
6      ]
7 }    

 

注意:  ①
写JSON数组其实和java中String数组形式差不多,值得注意的是,JSON是名称/值对的。
    

          ②
其中出现的字符串形式都是用双引号,不能像js中双引号单、引号都能用。

     ③
 无论数组还是对象,最后一个数值后面都不能有逗号,不然会出现问题。

   
经过我的在谷歌浏览器控制台测试JSON数据,对于②和③他都不会报什么错误,都能读取出来,但是我通过jquery中ajax获取JSON文件中数据时,会出现错误,具体原因,暂时无法解答。

 

下面是在谷歌浏览器控制台调试结果(注意都不符合上面的②和③)。

 

 
      图片 1

  

  json数据的基本调用就如图中所写的,就是对数组和对象的调用。  

 

  1. 通过具体例子对Json文件的获取。

    创建一个.json文件。

  {    "list":[
                { "name":"c" , "url":"demo2.html"},
                { "name":"list22" , "url":"demo2.html"},
                { "name":"list33" , "url":"demo2.html"},
                { "name":"list44" , "url":"demo2.html"},
                { "name":"list55" , "url":"demo2.html"},
                { "name":"list66" , "url":"demo2.html"}
              ],

     "list1":[
                { "name":"我是第二个ul的1" , "url":"demo2.html"},
                { "name":"我是第二个ul的2" , "url":"demo2.html" },
                { "name":"我是第二个ul的3" , "url":"demo2.html" },
                { "name":"我是第二个ul的4" , "url":"demo2.html" },
                { "name":"我是第二个ul的5" , "url":"demo2.html"},
                { "name":"我是第二个ul的6" , "url":"demo2.html"} 
             ]

   }

 

  在html中写: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>  //引入jquery库
    </head>
    <body>
        <div class="div">
            <ul id="nav1" class="nav">   // 用于存放第一个ul数据的,里面的li标签即数据都是js生成的。
                                        alert(d);    //这里会弹出json文件中所有的字符串数据,如图3-1
                        var d = eval("(" + d + ")");  // 将json字符串数据解析成对象
                        alert(d)     //弹出: 如图3-2
                        var str = "this is nav1";
                        var str1 = "this is nav2";
                        var arr1 = d.list1;
                        var arr2 = d.list;
                        if (arr1 != null) {
                            for (var i = 0; i < arr1.length; i++) {  //这里面都是创建li并赋值
                                str = str + "<li><a href='http://www.baidu.com'>" + arr1[i].name + "</a></li>";
                            }
                            $("#nav1").html(str);
                        }
                        if (arr2 != null) {
                            for (var j = 0; j < arr2.length; j++) {
                                str1 += "<li><a href='" + arr2[j].url + "'>" + arr2[j].name + "</a></li>";
                            }
                            $("#nav2").html(str1);
                        }
                    }
                });
            });
        </script>
    </body>
</html>

 

视图:  

        图片 2 
   

              图3-1  

   

     图片 3

                               图3-2

 

最后的效果如下图:

       图片 4

  气质ul列表也可以根据Css其他样式去设置,达到更美观的效果。

 

 

 

 

 

 

 

 

 

 

 

        

 

  1. JSON(JavaScript Object Notation): javaScript对象表示法;
    是存储和交换文本信息的语法,比xml更…

近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流。

下面是我最近写的一个简单的类:
* XMLHttpRequest Object Pool
 *
 * @author    legend <[email protected]>
 * @link      
 * @Copyright www.ugia.cn
 */ 

 

var XMLHttp = {
    _objPool: [],

1、效果

    _getInstance: function ()
    {
        for (var i = 0; i < this._objPool.length; i ++)
        {
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
            {
                return this._objPool[i];
            }
        }

 

        // IE5中不支持push方法
        this._objPool[this._objPool.length] = this._createObj();

 

        return this._objPool[this._objPool.length – 1];
    },

2、原理

    _createObj: function ()
    {
        if (window.XMLHttpRequest)
        {
            var objXMLHttp = new XMLHttpRequest();

原理很简单,就是在刮奖区添加两个canvas,第一个canvas用于显示刮开后显示的内容,可以是一张图片或一个字符串,第二个canvas用于显示涂层,可以用一张图片或用纯色填充,第二个canvas覆盖在第一个canvas上面。

        }
        else
        {
            var MSXML = [‘MSXML2.XMLHTTP.5.0’, ‘MSXML2.XMLHTTP.4.0’, ‘MSXML2.XMLHTTP.3.0’, ‘MSXML2.XMLHTTP’, ‘Microsoft.XMLHTTP’];
            for(var n = 0; n < MSXML.length; n ++)
            {
                try
                {
                    var objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                catch(e)
                {
                }
            }
         }          

 

        // mozilla某些版本没有readyState属性
        if (objXMLHttp.readyState == null)
        {
            objXMLHttp.readyState = 0;

当在第二个canvas上点击或涂抹(点击然后拖动鼠标)时,把点击区域变为透明,这样就可以看到第一个canvas上的内容,即实现了刮奖效果。

            objXMLHttp.addEventListener(“load”, function ()
                {
                    objXMLHttp.readyState = 4;

 

                    if (typeof objXMLHttp.onreadystatechange == “function”)
                    {
                        objXMLHttp.onreadystatechange();
                    }
                },  false);
        }

3、实现

        return objXMLHttp;
    },

(1)定义Lottery类

    // 发送请求(方法[post,get], 地址, 数据, 回调函数)
    sendReq: function (method, url, data, callback)
    {
        var objXMLHttp = this._getInstance();

function Lottery(id, cover, coverType, width, height,
drawPercentCallback) {

        with(objXMLHttp)
        {
            try
            {
                // 加随机数防止缓存
                if (url.indexOf(“?”) > 0)
                {
                    url += “&randnum=” + Math.random();
                }
                else
                {
                    url += “?randnum=” + Math.random();
                }

    this.conId = id;

                open(method, url, true);

    this.conNode = document.getElementById(this.conId);

                // 设定请求编码方式
                setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8’);
                send(data);
                onreadystatechange = function ()
                {
                    if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        callback(objXMLHttp);
                    }
                }
            }
            catch(e)
            {
                alert(e);
            }
        }
    }
}; 

    this.cover = cover || ‘#CCC’;

示例:

    this.coverType = coverType || ‘color’;

<script type=”text/javascript” src=”xmlhttp.js”></script>
<script type=”text/javascript”>
function test(obj)
{
    alert(obj.statusText);
}

    this.background = null;

XMLHttp.sendReq(‘GET’, ”, ”, test);
XMLHttp.sendReq(‘GET’, ”, ”, test);
XMLHttp.sendReq(‘GET’, ”, ”, test);
XMLHttp.sendReq(‘GET’, ”, ”, test);

    this.backCtx = null;

alert(‘Pool length:’ + XMLHttp._objPool.length);
</script> 

    this.mask = null;

demo 下载xmlhttp.js

    this.maskCtx = null;

    this.lottery = null;

    this.lotteryType = ‘image’;

    this.width = width || 300;

    this.height = height || 100;

    this.clientRect = null;

    this.drawPercentCallback = drawPercentCallback;

}

对参数解释一下:

 

id:刮奖容器的id

cover:涂层内容,可以为图片地址或颜色值,可空,默认为 #ccc

coverType:涂层类型,值为 image 或 color,可空,默认为 color

width:刮奖区域宽度,默认为300px,可空

height:刮奖区域高度,默认为100px,可空

drawPercentCallback:刮开的区域百分比回调,可空

然后还定义了几个需要用到的变量:

 

background:第一个canvas元素

backCtx:background元素的2d上下文(context)

mask:第二个canvas元素

maskCtx:mask元素的2d上下文(context)

lottery:刮开后显示的内容,可以为图片地址或字符串

lotteryType:刮开后显示的内容类型,值为 image 或 text,要跟lottery匹配

clientRect:用于记录mask元素的 getBoundingClientRect() 值

(2)添加二个canvas到刮奖容器,并获取2d上下文

this.background = this.background || this.createElement(‘canvas’, {

    style: ‘position:absolute;left:0;top:0;’

});

this.mask = this.mask || this.createElement(‘canvas’, {

    style: ‘position:absolute;left:0;top:0;’

});

 

if (!this.conNode.innerHTML.replace(/[\w\W]| /g, ”)) {

    this.conNode.appendChild(this.background);

    this.conNode.appendChild(this.mask);

    this.clientRect = this.conNode ?
this.conNode.getBoundingClientRect() : null;

    this.bindEvent();

}

 

this.backCtx = this.backCtx || this.background.getContext(‘2d’);

this.maskCtx = this.maskCtx || this.mask.getContext(‘2d’);

这里用于了createElement工具方法,另外还绑定了事件,后面介绍。

 

(3)绘制第一个canvas

第一个canvas分两种类型,image 和
string,如果是图片直接用canvas的drawImage就可以了,如果是string,要先用白色填充,然后在上下左右居中的地方绘制字符串,代码如下:

 

if (this.lotteryType == ‘image’) {

    var image = new Image(),

发表评论

电子邮件地址不会被公开。 必填项已用*标注