Post Jobs

Ajax_04之jQuery中封装的Ajax函数,Canvas实现文本对齐的方法总结

tomcat+java的web程序持续占cpu问题调试

现象:

在tomcat中部署Java的web应用程序,过一段时间后出现tomcat的java进程持续占用cpu高达100%,导致web程序访问受阻。

可能原因分析:

可能程序确实在进行数据计算;或程序进入死循环;

解决方法:

1、先用top查看占用cpu的进程id

2、再用ps -ef |grep PID定位具体的进程主体;如是否是tomcat启动的java程序

3、用ps -mp pid -o THREAD,tid,time打印出该进程下的线程占用cpu情况

图片 1

找到了耗时最高的线程28802,占用CPU时间快两个小时了!

4、其次将需要的线程ID转换为16进制格式:

printf “%x\n” tid

图片 2

5、最后打印线程的堆栈信息:

jstack pid |grep tid -A 30

图片 3

找到出现问题的代码,并分析具体函数中是否有可能出现死循环的代码段。

通常问题出现在while, for之类的循环代码片段。

现象:
在tomcat中部署Java的web应用程序,过一段时间后出现tomcat的java进程持续占用cpu高达100%,导致we…

Ajax_04之jQuery中封装的Ajax函数,ajax_04jquery

1、PHP中json_encode编码规则:
 PHP索引数组编码为JSON:[…]
 PHP关联数组编码为JSON:{…}
2、jQuery中AJAX封装函数之load:

 ①使用:$(‘选择器’).load(url,[data],[fn]);
  $(‘选择器’).load(url);

 ②含义作用:创建XHR对象,向指定的URL发起异步请求,请求参数为data,如果响应成功,自动调用指定回调函数fn,将响应主体数据(必须是HTML片段),替换为当前选定元素的innerHTML,已有内容会被覆盖;

3、jQuery中AJAX封装函数之$.get:

 ①使用:$.get(url,[data],[fn]);

 ②含义作用:创建XHR对象,向指定的URL发起异步GET请求,请求参数为data(形如k=v&k=v或{k:v,k:v}),如果响应成功,自动调用指定回调函数fn(必须在此回调函数中对响应数据进行处理——doResponse);

4、jQuery中AJAX封装函数之$.post:

 ①使用:$.post(url,data,[fn]);

 ②含义作用:创建XHR对象,向指定URL发起异步POST请求,请求参数为data(形如k=v&k=v或{k:v,k:v}),追加在请求主体中,如果响应成功,自动调用指定回调函数fn(必须在此回调函数中对响应数据进行处理——doResponse(txt,msg,xhr););

 ③表单序列化:Serialize,把表单中所有具备name属性的输入域及值拼接为“k1=v1&k2=v2”形式的字符串,可直接用于HTTP请求消息(var
data=$(“#formId”).serialize(););

5、jQuery中AJAX封装函数之$.getJSON:

   ①使用:$.getJSON(url,[data],[fn]);

   ②含义作用:创建XHR对象,向指定URL发起异步GET请求,请求参数为data(形如k=v&k=v或{k:v,k:v}),追加在URL后,如果响应成功,自动调用指定回调函数fn(必须在此回调函数中对响应数据进行处理——doResponse(txt,msg,xhr););

  *(该函数要求响应数据必须是application/json类型,会自动调用JSON.parse(xhr.responseText)加以解析);
6、jQuery中AJAX封装函数之$.getScript:

   ①使用:$.getScript(url,[data],[fn]);
      $.getScript(url);

   ②含义作用:创建XHR对象,向指定URL发起异步GET请求,请求参数为data(形如k=v&k=v或{k:v,k:v}),追加在URL后,如果响应成功,自动调用指定回调函数fn;

  *(该函数要求响应数据必须是application/javascript类型,会自动调用eval(xhr.responseText)加以执行);
7、jQuery中AJAX封装函数之$.ajax:

   ①使用:
  $.ajax({
   type:’GET’,//POST/PUT/DELETE/HEAD
   url:’x.php’,
   data:’k=v&k=v’, //{k:v}请求数据
   beforeSend:function(){}, //请求发送前的回调
   success:function(){}, //成功响应的回调
   error:function(){}, //失败响应的回调
   complete:function(){} //响应完成的回调
  });

 ②对应原生AJAX代码:
  var xhr=new XMLHttpRequest();
  xhr.onreadystatechange=function(){
   if(xhr.readyState===4){
    if(xhr.status===200){success();}
    else{error();}
    complete();
   }
  }
  xhr.open();
  beforeSend();
  xhr.send();
8、总结:
 ①$(‘选择器’).load(url);——只接收html响应;

 ②$.get(url,data,fn);——取决于响应消息声明的内容类型,若声明为application/json,会自动调用JSON.parse();若声明为application/javascript,会自动调用eval();若声明为text/plain等,则不会自动执行;

 ③$.post(url,data,fn);

 ④$.getJSON(url,data,fn);——只接收json响应,不论响应消息是什么类型,都会自动调用JSON.parse()把xhr.responseText进行解析得到JS对象;

 ⑤$.getScript(url);——只接收script响应,不论响应消息什么类型,都会自动调用eval把xhr.responseText进行执行;

1、PHP中json_encode编码规则: PHP索引数组编码为JSON:[…]
PHP关联数组编码为JSON:{…} 2、jQuery中A…

HTML5 Canvas实现文本对齐的方法总结,

水平对齐textAlign

JavaScript Code复制内容到剪贴板

  1. context.textAlign=”center|end|left|right|start”;  

其中各值及意义如下表。

描述
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐,
right 文本右对齐。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html lang=”zh”>   
  3. <head>   
  4.     <meta charset=”UTF-8″>   
  5.     <title>textAlign</title>   
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
      
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=”canvas-warp”>   
  13.     <canvas id=”canvas”>   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         // 在位置 400 创建蓝线   
  28.         context.strokeStyle=”blue”;   
  29.         context.moveTo(400,100);   
  30.         context.lineTo(400,500);   
  31.         context.stroke();   
  32.   
  33.   
  34.         context.fillStyle = “#000”;   
  35.         context.font=”50px Arial”;   
  36.   
  37.         // 显示不同的 textAlign 值   
  38.         context.textAlign=”start”;   
  39.         context.fillText(“textAlign=start”, 400, 120);   
  40.         context.textAlign=”end”;   
  41.         context.fillText(“textAlign=end”, 400, 200);   
  42.         context.textAlign=”left”;   
  43.         context.fillText(“textAlign=left”, 400, 280);   
  44.         context.textAlign=”center”;   
  45.         context.fillText(“textAlign=center”, 400, 360);   
  46.         context.textAlign=”right”;   
  47.         context.fillText(“textAlign=right”, 400, 480);   
  48.     };   
  49. </script>   
  50. </body>   
  51. </html>  

运行结果:
图片 4

垂直对齐textBaseline

JavaScript Code复制内容到剪贴板

  1. context.textBaseline=”alphabetic|top|hanging|middle|ideographic|bottom”;  

其中各值及意义如下表。

描述
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是em方框的顶端。
hanging 文本基线是悬挂基线。
middle 文本基线是em方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是em方框的底端。

首先咱们通过一个图来看一下各个基线代表的位置。
图片 5

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html lang=”zh”>   
  3. <head>   
  4.     <meta charset=”UTF-8″>   
  5.     <title>textBaseline</title>   
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
      
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=”canvas-warp”>   
  13.     <canvas id=”canvas”>   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在位置 y=300 绘制蓝色线条   
  28.         context.strokeStyle=”blue”;   
  29.         context.moveTo(0,300);   
  30.         context.lineTo(800,300);   
  31.         context.stroke();   
  32.   
  33.         context.fillStyle = “#00AAAA”;
      
  34.         context.font=”20px Arial”;   
  35.   
  36.         //在 y=300 以不同的 textBaseline 值放置每个单词
      
  37.         context.textBaseline=”top”;   
  38.         context.fillText(“Top”,150,300);
      
  39.         context.textBaseline=”bottom”;
      
  40.         context.fillText(“Bottom”,250,300);   
  41.         context.textBaseline=”middle”;
      
  42.         context.fillText(“Middle”,350,300);   
  43.         context.textBaseline=”alphabetic”;   
  44.         context.fillText(“Alphabetic”,450,300);   
  45.         context.textBaseline=”hanging”;
      
  46.         context.fillText(“Hanging”,550,300);   
  47.     };   
  48. </script>   
  49. </body>   
  50. </html>  

运行结果:
图片 6

Canvas实现文本对齐的方法总结,
水平对齐textAlign JavaScript Code 复制内容到剪贴板 context.textAlign=
center|end|left|right|start ; 其中各值及意义…

发表评论

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

相关文章

网站地图xml地图