对原生ajax的封装（仿jquery）

最新推荐文章于 2022-11-12 13:09:09 发布

灯光下的投影

最新推荐文章于 2022-11-12 13:09:09 发布

阅读量217

点赞数

分类专栏： ajax 文章标签：封装原生ajax

本文链接：https://blog.csdn.net/liuyuhua666/article/details/90314448

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何封装原生的ajax请求，通过示例展示了封装后的ajax.js在登录功能中的应用。虽然可以自定义封装，但推荐使用jQuery提供的$.ajax()方法。

摘要由CSDN通过智能技术生成

封装ajax：

ajax.js:

/* 
  参数1： type  请求的方式  get  post  默认为get
  参数2： url    请求的地址  没有默认值
  参数3： data  请求的数据 默认为 ''
  参数4： success  要求： success的是一个函数
  参数5： error    error表示调用结构失败了
  参数6： dataType  表示响应的数据格式  text/json/xml  默认 text
*/
function ajax(options) {
  // 如果options没有传，或者options传的不是对象类型 不发送请求
  if (!options || typeof options !== 'object') {
    return
  }

  // 处理url  如果url没有传递，不发送请求
  var url = options.url
  if (!url) {
    return
  }

  // 处理type, 默认type为get
  var type = options.type || 'get'
  // 处理data
  var data = options.data || null
  if (data && typeof data === 'object') {
    // {username: "111", password: "222"}
    // username=111&password=222
    // 把data对象变成字符串
    var arr = []
    for (var k in data) {
      arr.push(k + '=' + data[k])
    }
    data = arr.join('&')
  }

  var dataType = options.dataType || 'text'

  // 创建ajax对象
  var xhr = new XMLHttpRequest()

  // 设置请求行
  // 如果get请求，url需要拼接data
  if (type === 'get' && data) {
    // 对data进行处理
    url = url + '?' + data
    data = null
  }
  xhr.open(type, url)

  // 处理请求头
  if (type === 'post') {
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  }

  // 处理请求
  xhr.send(data)

  // 处理响应
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // 如果传递了success 就调用
        if (dataType === 'xml') {
          result = xhr.responseXML
        } else if (dataType === 'json') {
          result = JSON.parse(xhr.responseText)
        } else {
          result = xhr.responseText
        }
        options.success && options.success(result)
      } else {
        // 如果传递error,就调用
        options.error && options.error()
      }
    }
  }
}

使用封装的ajax.js文件

登录功能：

前端代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" class="username" />
    <input type="text" class="password" />
    <button>登录</button>

    // 引入自己封装的ajax.js文件
    <script src="ajax.js"></script>
    <script>
      var button = document.querySelector('button')
      var username = document.querySelector('.username')
      var password = document.querySelector('.password')

      button.onclick = function() {
        ajax({
          type: 'post',
          url: '11.php',
          // data  name=zs&age=18
          data: {
            username: username.value,
            password: password.value
          },
          success: function(info) {
            console.log(info)
          },
          error: function() {
            alert('服务器繁忙')
          }
        })
      }

      // jquery的ajax
    </script>
  </body>
</html>

后台php代码（11.php）:

<?php
  if ($_POST['username'] === 'admin' && $_POST['password'] === '123456') {
    echo 'success';
  } else {
    echo 'fail';
  }
?>

虽然可以使用自己封装的ajax，但是如果要使用ajax技术，还是建议直接使用jquery封装的ajax方法（$.ajax()）;

灯光下的投影

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
对原生ajax的封装（仿jquery）

封装ajax：ajax.js:/* 参数1： type 请求的方式 get post 默认为get 参数2： url 请求的地址没有默认值参数3： data 请求的数据默认为 '' 参数4： success 要求： success的是一个函数参数5： error error表示调用结构失败了参数6： dataType 表示响...
复制链接

扫一扫

专栏目录