函数封装

ajax_tool.js：

  1. // 方法：ajax get 五部曲
  2. function ajax_get(url,data) {
  3.     // 异步对象
  4.     var ajax = new XMLHttpRequest();
  6.     // url 方法
  7.     // 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
  8.     // 所以 这里 需要拼接 url
  9.     if (data) {
  10.         // 如果有值 需要拼接字符串
  11.         // 拼接为xxx.php?name=jack&age=18
  12.         url+='?';
  13.         url+=data;
  14.     }else{
  15.     }
  17.     ajax.open('get',url);
  18.     // 发送
  19.     ajax.send();
  21.     // 注册事件
  22.     ajax.onreadystatechange = function () {
  23.         // 在事件中 获取数据 并修改界面显示
  24.         if (ajax.readyState==4&& ajax.status==200) {
  25.             console.log(ajax.responseText);
  26.         }
  27.     }
  28. }
  31. // 方法：ajax_post五部曲
  32. function ajax_post(url,data) {
  33.     // 异步对象
  34.     var ajax = new XMLHttpRequest();
  36.     // url 方法
  37.     ajax.open('post',url);
  39.     // 设置 请求报文
  40.     ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  42.     // 发送
  43.     if (data) {
  44.         // 如果 有值 post请求 是在 send中 发送给服务器
  45.         ajax.send(data);
  46.     }else{
  47.         ajax.send();
  48.     }
  51.     // 注册事件
  52.     ajax.onreadystatechange = function () {
  53.         // 在事件中 获取数据 并修改界面显示
  54.         if (ajax.readyState==4&&ajax.status==200) {
  55.             console.log(ajax.responseText);
  56.         }
  57.     }
  59. }
  62. // 方法：将 get 跟post 封装到一起
  63. /*
  64.     参数1:url
  65.     参数2:数据
  66.     参数3:请求的方法
  67.     参数4:数据成功获取以后，调用的方法
  68. */
  69. function ajax_tool(url,data,method,success) {
  70.     // 异步对象
  71.     var ajax = new XMLHttpRequest();
  73.     // get 跟post  需要分别写不同的代码
  74.     if (method=='get') {
  75.         // get请求
  76.         if (data) {
  77.             // 如果有值
  78.             url+='?';
  79.             url+=data;
  80.         }else{
  82.         }
  83.         // 设置 方法 以及 url
  84.         ajax.open(method,url);
  86.         // send即可
  87.         ajax.send();
  88.     }else{
  89.         // post请求
  90.         // post请求 url 是不需要改变
  91.         ajax.open(method,url);
  93.         // 需要设置请求报文
  94.         ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  96.         // 判断data send发送数据
  97.         if (data) {
  98.             // 如果有值 从send发送
  99.             ajax.send(data);
  100.         }else{
  101.             // 木有值 直接发送即可
  102.             ajax.send();
  103.         }
  104.     }
  106.     // 注册事件
  107.     ajax.onreadystatechange = function () {
  108.         // 在事件中 获取数据 并修改界面显示
  109.         if (ajax.readyState==4&&ajax.status==200) {
  110.             // console.log(ajax.responseText);
  112.             // 将 数据 让 外面可以使用
  113.             // return ajax.responseText;
  115.             // 当 onreadystatechange 调用时 说明 数据回来了
  116.             // ajax.responseText;
  118.             // 数据成功获取以后，执行方法success()。
  119.             //我们把获取的数据作为 success()的参数，意思是：
  120.             //success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】
  121.             success(ajax.responseText);
  122.         }
  123.     }
  125. }

函数调用（get方法）

test_get.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <input type="button"  value="测试get" id='ajax_get'>
  9. </body>
  10. </html>
  11. <!-- 导入 封装的js -->
  12. <script type="text/javascript" src='ajax_tool.js'></script>
  13. <script type="text/javascript">
  14.     document.querySelector('#ajax_get').onclick = function () {
  15.         // 直接使用 封装的 工具函数即可
  16.         /*
  17.             参数1:url
  18.             参数2:数据
  19.             参数3:请求的方法
  20.             参数4：请求成功后，调用的方法
  21.         */
  22.         var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){
  23.             console.log(data);
  24.         });
  25.         // 测试
  26.         console.log(backData);
  27.     }
  28. </script>

test_get.php：

  1. <?php
  2.     // 获取get提交的数据
  3.     echo $_GET['skill'];
  4.  ?>

函数调用（post方法）

test_post.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <input type="button"  value="测试post" id='ajax_post'>
  9. </body>
  10. </html>
  11. <!-- 导入 封装的js -->
  12. <script type="text/javascript" src='ajax_tool.js'></script>
  13. <script type="text/javascript">
  14.     document.querySelector('#ajax_post').onclick = function () {
  15.         // 直接使用 封装的 工具函数即可
  16.         /*
  17.             参数1:url
  18.             参数2:数据
  19.             参数3:请求的方法
  20.             参数4:数据获取成功调用的方法
  21.         */
  22.         var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
  23.             console.log(data);
  24.         });
  25.         // 测试
  26.         console.log(backData);
  29.         // 怎么样 处理数据 全部写在 匿名函数中
  30.         ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
  31.             console.log(data);
  32.             // 修改页面的显示呢?
  33.         });
  35.     }
  36. </script>

test_post.php：

  1. <?php
  3.     echo $_POST['friend'];
  4.  ?>

工程文件：

  • 2018-02-28-Ajax请求封装.rar