原生Ajax详解---Ajax初步封装及使用！！！

最新推荐文章于 2022-11-26 23:30:00 发布

帅帅邬同学

最新推荐文章于 2022-11-26 23:30:00 发布

阅读量168

点赞数 5

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

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

版权

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

111 篇文章 0 订阅

订阅专栏

服务器与AJAX

21 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

封装ajax

/**
 * ajax 初步封装
 * @param {string} url 
 * @param {string} type 
 * @param {string} param 
 * @param {string} dataType 
 * @param {function} callback 
 */
function ajax(url, type, param, dataType, callback) {
  var xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  if (type === 'get') {
    url += "?" + param;
  }
  xhr.open(type, url, true);

  var data = null;
  if (type === 'post') {
    data = param;
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  }
  xhr.send(data);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        if (dataType == 'json') {
          data = JSON.parse(data);
        }
        callback(data);
      }
    }
  }
}

使用测试

前端代码：

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="./ajax.js"></script>
  <script type="text/javascript">
    window.onload = function () {
      var btn1 = document.getElementById('btn1');
      btn1.onclick = function () {
        ajax('./10-1.php', 'get', 'username=李四&password=123', 'text', function (data) {
          var div1 = document.getElementById('info1');
          div1.innerHTML = data;
        });
      }

      var btn2 = document.getElementById('btn2');
      btn2.onclick = function () {
        ajax('./10-2.php', 'post', 'username=张三&password=123456', 'json', function (data) {
          var div2 = document.getElementById('info2');
          // div2.innerHTML = data;
          div2.innerHTML = data.username + "=====" + data.password;
        });
      }
    }
  </script>
</head>

<body>
  <div id="info1"></div>
  <input type="button" value="点击1" id="btn1">
  <div id="info2"></div>
  <input type="button" value="点击2" id="btn2">
</body>

</html>

PHP代码：
10-1.php：

<?php 
    $uname = $_GET['username'];
    $pw = $_GET['password'];
    echo $uname.'------'.$pw;
 ?>

10-2.php：

<?php 
    $uname = $_POST['username'];
    $pw = $_POST['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="./ajax.js"></script>
  <script type="text/javascript">
    /*
    功能需求：页面输入图书编号，查询服务器端的图书信息并且解析渲染
    */
    window.onload = function () {
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        var code = document.getElementById('code').value;
        ajax('./11.php', 'post', 'code=' + code, 'json', function (data) {
          // 解析数据并渲染页面
          var info = document.getElementById('info');
          var test = document.getElementById('test')
          if (data.flag == 0) {
            info.innerHTML = '没有这本书';
          } else {
            var tag = '<ul><li>书名：' + data.bookname + '</li><li>作者：' + data.author + '</li><li>描述：' + data
              .desc + '</li></ul>';
            info.innerHTML = tag;
          }

        });
      }
    }
  </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
// $code = $_GET['code'];
$code = $_POST['code'];

$books = array();
$books['sgyy'] = array('bookname' => '三国演义', 'author' => '罗贯中', 'desc' => '一个杀伐纷争的年代');
$books['shz'] = array('bookname' => '水浒传', 'author' => '施耐庵', 'desc' => '108条好汉的故事');
$books['xyj'] = array('bookname' => '西游记', 'author' => '吴承恩', 'desc' => '佛教与道教的斗争');
$books['hlm'] = array('bookname' => '红楼梦', 'author' => '曹雪芹', 'desc' => '一个封建王朝的缩影');
// 这里的array_key_exists用来判断数组中没有对应键
if (array_key_exists($code, $books)) {
  $book = $books[$code]; //这里根据参数获取一本书的信息
  echo json_encode($book);
} else {
  // 返回一个 json格式的字符串
  echo '{"flag":0}';
}

// echo $qq;

显示效果：

显示效果

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

帅帅邬同学

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax详解---Ajax初步封装及使用！！！

封装ajax/** * ajax 初步封装 * @param {string} url * @param {string} type * @param {string} param * @param {string} dataType * @param {function} callback */function ajax(url, type, param, dataType, callback) { var xhr = null; if (window.XMLHttpR
复制链接

扫一扫