html代码

   
   
   
   
    
    
    
    
    
  1. <html> 
    2. 
    
    
    
    
  2.     <head> 
    3. 
    
    
    
    
  3.         <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    4. 
    
    
    
    
  4.         <title>js局部刷新title> 
    5. 
    
    
    
    
  5.         <style type="text/css"> 
    6. 
    
    
    
    
  6.             #h1{ 
    7. 
    
    
    
    
  7.                 text-align:center; 
    8. 
    
    
    
    
  8.             } 
    9. 
    
    
    
    
  9.             #div{ 
    10. 
    
    
    
    
  10.                 margin:0 auto; 
    11. 
    
    
    
    
  11.                 width:300px; 
    12. 
    
    
    
    
  12.                 height:200px; 
    13. 
    
    
    
    
  13.                 background:#ccc;     
    14. 
    
    
    
    
  14.             } 
    15. 
    
    
    
    
  15.             button{ 
    16. 
    
    
    
    
  16.                 display:block; 
    17. 
    
    
    
    
  17.                 margin:0 auto; 
    18. 
    
    
    
    
  18.             } 
    19. 
    
    
    
    
  19.         style> 
    20. 
    
    
    
    
  20.     head> 
    21. 
    
    
    
    
  21.     <body> 
    22. 
    
    
    
    
  22.         <h1 id='h1'>js局部刷新h1> 
    23. 
    
    
    
    
  23.         <div id='div'> 
    24. 
    
    
    
    
  24.          
    25. 
    
    
    
    
  25.         div> 
    26. 
    
    
    
    
  26.         <h1 id='h1'><script>document.write(new Date())script>h1> 
    27. 
    
    
    
    
  27.         <button id="bid" name="button" onclick="fasong()">请求数据get方式button> 
    28. 
    
    
    
    
  28.         <button id="bid" name="button" onclick="fasong2()">请求数据post方式button> 
    29. 
    
    
    
    
  29.     body> 
    30. 
    
    
    
    
  30.     <script> 
    31. 
    
    
    
    
  31.         //js异步请求php数据  (get方式) 
    32. 
    
    
    
    
  32.         function fasong(){ 
    33. 
    
    
    
    
  33.                 var xhr=new XMLHttpRequest();//生成XMLHttpRequest对象 
    34. 
    
    
    
    
  34.                 xhr.onreadystatechange=function(){ 
    35. 
    
    
    
    
  35.                     //当readyState==4 status==200表示响应成功 
    36. 
    
    
    
    
  36.                 if(xhr.readyState==4 && xhr.status==200){ 
    37. 
    
    
    
    
  37.                     //alert(xhr.responseText); 
    38. 
    
    
    
    
  38.                 var data=xhr.responseText; 
    39. 
    
    
    
    
  39.                 var divobj=document.getElementById('div') 
    40. 
    
    
    
    
  40.                 divobj.innerHTML=data; 
    41. 
    
    
    
    
  41.                 //hid.innerHTML=data; 
    42. 
    
    
    
    
  42.                 }  
    43. 
    
    
    
    
  43.                 } 
    44. 
    
    
    
    
  44.                  
    45. 
    
    
    
    
  45.                 //false 为同步 
    46. 
    
    
    
    
  46.                 xhr.open("get","index.php?",true);//准备好发送数据之前的准备 
    47. 
    
    
    
    
  47.                 xhr.send();// 
    48. 
    
    
    
    
  48.         } 
    49. 
    
    
    
    
  49.          
    50. 
    
    
    
    
  50.         //js异步请求php数据  (post方式) 
    51. 
    
    
    
    
  51.         function fasong2(){ 
    52. 
    
    
    
    
  52.                 var xhr=new XMLHttpRequest();//生成XMLHttpRequest对象 
    53. 
    
    
    
    
  53.                 //alert(xhr); 
    54. 
    
    
    
    
  54.                 /**/ 
    55. 
    
    
    
    
  55.                 xhr.onreadystatechange=function(){ 
    56. 
    
    
    
    
  56.                     //当readyState==4 status==200表示响应成功 
    57. 
    
    
    
    
  57.                 if(xhr.readyState==4 && xhr.status==200){ 
    58. 
    
    
    
    
  58.                     //alert(xhr.responseText); 
    59. 
    
    
    
    
  59.                 var data=xhr.responseText; 
    60. 
    
    
    
    
  60.                 var divobj=document.getElementById('div') 
    61. 
    
    
    
    
  61.                 divobj.innerHTML=data; 
    62. 
    
    
    
    
  62.                 //hid.innerHTML=data; 
    63. 
    
    
    
    
  63.                 }  
    64. 
    
    
    
    
  64.                 } 
    65. 
    
    
    
    
  65.                  
    66. 
    
    
    
    
  66.                 //xhr.open("get","index.php?"+str,true); 
    67. 
    
    
    
    
  67.                 //false 为同步 
    68. 
    
    
    
    
  68.                 xhr.open("post","index.php?",true);//准备好发送数据之前的准备 
    69. 
    
    
    
    
  69.                 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//模拟表单 否则无法显示数据 
    70. 
    
    
    
    
  70.                 xhr.send("suername=nihao&age=30");// 
    71. 
    
    
    
    
  71.         } 
    72. 
    
    
    
    
  72.          
    73. 
    
    
    
    
  73.     script> 
    74. 
    
    
    
    
  74. html> 
    75.

php代码

 

   
   
   
   
    
    
    
    
    
    2. 
    
    
    
    
  2.     echo 'JavaScript局部刷新'; 
    3. 
    
    
    
    
  3.     echo 'JavaScript局部刷新'; 
    4. 
    
    
    
    
  4.     echo 'JavaScript局部刷新'; 
    5.