Ajax--jQuery--模仿jQuery封装ajax方法！！！

最新推荐文章于 2022-04-26 20:01:39 发布

帅帅邬同学

最新推荐文章于 2022-04-26 20:01:39 发布

阅读量135

点赞数 3

分类专栏： jQuery 学习笔记服务器与AJAX 文章标签： js ajax jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_44586544/article/details/106033438

版权

学习笔记同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

模仿jQuery封装ajax方法

/**
 * 模拟实现 jQuery 中的 ajax方法
 * @param {object} obj 
 */
function ajax(obj) {
  // 默认参数
  var defaults = {
    type: 'get',
    data: {},
    url: '#',
    dataType: 'text',
    async: true,
    success: function (data) {
      console.log(data)
    }
  }
  // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
  for (var key in obj) {
    defaults[key] = obj[key];
  }
  // 1、创建XMLHttpRequest对象
  var xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  // 把对象形式的参数转化为字符串形式的参数
  /*
  {username:'zhangsan','password':123}
  转换为
  username=zhangsan&password=123
  */
  var param = '';
  for (var attr in obj.data) {
    param += attr + '=' + obj.data[attr] + '&';
  }
  if (param) {
    param = param.substring(0, param.length - 1);
  }
  // 处理get请求参数并且处理中文乱码问题，在浏览器上面没有出现乱码
  if (defaults.type == 'get') {
    // defaults.url += '?' + encodeURI(param);
    defaults.url += '?' + param
  }
  // 2、准备发送（设置发送的参数）
  xhr.open(defaults.type, defaults.url, defaults.async);
  // 处理post请求参数并且设置请求头信息（必须设置）
  var data = null;
  if (defaults.type == 'post') {
    data = param;
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  }
  // 3、执行发送动作
  xhr.send(data);
  // 处理同步请求，不会调用回调函数
  if (!defaults.async) {
    if (defaults.dataType == 'json') {
      return JSON.parse(xhr.responseText);
    } else {
      return xhr.responseText;
    }
  }
  // 4、指定回调函数（处理服务器响应数据）
  xhr.onreadystatechange = function () {
    console.log(123)
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        if (defaults.dataType == 'json') {
          // data = eval("("+ data +")");
          data = JSON.parse(data);
        }
        defaults.success(data);
      }
    }
  }

}

测试

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #container {
      width: 360px;
      min-height: 100px;
      background-color: lightgreen;
      position: absolute;
      left: 50%;
      top: 10px;
      margin-left: -180px;
    }
  </style>
  <script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript" src="./ajax1.js"></script>
  <script type="text/javascript">
    /*
    jQuery-ajax相关API基本使用
    */
    $(function () {
      $("#btn").click(function () {
           var code = $("#code").val();
            ajax({
              type: 'get',
              url: './14.php',
              dataType: 'json',
              async: false,
              data: {
                username: '张三',
                password: '123'
              },
              success: function (data) {
                var html = '<div><span>用户名：' + data.username + '</span><span>密码：' + data.password +
                  '</span></div>'
                $("#info").html(html);
              }
            });
      });
    });
  </script>
</head>

<body>
  <div id="container">
    <div>
      图书编码：
      <input type="text" name="code" id="code">
      <input type="button" value="查询" id="btn">
    </div>
    <div id="info"></div>
  </div>
</body>

</html>

PHP代码：

<?php
$uname = $_GET['username'];
$pw = $_GET['password'];

// echo $uname.'-----'.$pw;
echo '{"username":"' . $uname . '","password":"' . $pw . '"}';

下面来测试一下同步情况，看一下显示效果：

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #container {
      width: 360px;
      min-height: 100px;
      background-color: lightgreen;
      position: absolute;
      left: 50%;
      top: 10px;
      margin-left: -180px;
    }
  </style>
  <script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript" src="./ajax1.js"></script>
  <script type="text/javascript">
    /*
    jQuery-ajax相关API基本使用
    */
    $(function () {
      $("#btn").click(function () {
        //     var code = $("#code").val();
        //     ajax({
        //       type: 'get',
        //       url: './14.php',
        //       dataType: 'json',
        //       async: false,
        //       data: {
        //         username: '张三',
        //         password: '123'
        //       },
        //       success: function (data) {
        //         var html = '<div><span>用户名：' + data.username + '</span><span>密码：' + data.password +
        //           '</span></div>'
        //         $("#info").html(html);
        //       }
        //     });

        var data = ajax({
          type: 'post',
          url: './14.php',
          dataType: 'json',
          async: false,
          data: {
            username: '张三',
            password: '123'
          }
        });
        console.log(data);
        var html = '<div><span>用户名：' + data.username + '</span><span>密码：' + data.password + '</span></div>'
        $("#info").html(html);

      });
    });
  </script>
</head>

<body>
  <div id="container">
    <div>
      图书编码：
      <input type="text" name="code" id="code">
      <input type="button" value="查询" id="btn">
    </div>
    <div id="info"></div>
  </div>
</body>

</html>

PHP代码：

<?php
// $uname = $_GET['username'];
// $pw = $_GET['password'];

$uname = $_POST['username'];
$pw = $_POST['password'];

// echo $uname.'-----'.$pw;
echo '{"username":"' . $uname . '","password":"' . $pw . '"}';

测试结果如下所示：

测试结果

如果这篇文章能够帮助到你，希望您不要吝惜点赞，您的支持是我继续努力的动力！！！

帅帅邬同学

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax--jQuery--模仿jQuery封装ajax方法！！！

模仿jQuery封装ajax方法/** * 模拟实现 jQuery 中的 ajax方法 * @param {object} obj */function ajax(obj) { // 默认参数 var defaults = { type: 'get', data: {}, url: '#', dataType: 'text', async: true, success: function (data) { console.log
复制链接

扫一扫