关于js的异步 JavaScript 和 XML（ajax）与data:image/png;base64

喜欢原生的js，用到ajax的时候觉得原生的不太好用，于是引入了JQ库；

<input type="submit" id="sub" value="生成二维码">
    <div id="qrcode" style="display: none;"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


$("#sub").click(function(){
    alert(urlcode+"00000"+qrcodename);
    var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
        // 构建画布
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        // 构造url
        url = canvas.toDataURL('image/png');
				$.ajax({
					type:"get",
					url:"/wx/qrcode.jsp",
					dataType:"json",
					data:{
						url:url,
                                                qrcodename:qrcodename
					},
					success:function(obj){
						console.log(obj)
                            
					}
				});
                                
                         test();
			});

做的是一个把前端JS插件生成的二维码的数据传到后台生成图片，当form表单提交时，页面会进行跳转，于是就想到ajax，以前做go彩票爬虫开发的时候用过，照着模板写没有太多的研究，这次大概了解了一下。

在开头引入了http://code.jquery.com/jquery-latest.js的JQ库

JQ的ajax简洁明了。url后台处理的地址，data声明成json的格式传值

后台的jsp页面只需要request.getParameter("url");就能够获取到对应的值

用的开源的js插件生成了data:image/png;base64的二维码数据，canvas.toDataURL可以把数据取出来传给后台，

JAVA有解码这种数据并生成图片的方法，需要注意的是后台取得的数据要去掉头部

byte[] b = decoder.decodeBuffer(imgStr.replace("data:image/png;base64,",""));

String imgFilePath = "/home/web/web/"+qrcodename+".jpg";//新生成的图片
            OutputStream out = new FileOutputStream(imgFilePath);    
            out.write(b);
            out.flush();
            out.close();