ajax详解

最新推荐文章于 2024-07-17 19:21:45 发布

梦回1

最新推荐文章于 2024-07-17 19:21:45 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/tanghuaicong/article/details/104460973

版权

这是一篇逆战学员的博客
一，什么是AJAX?
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二，AJAX概念
Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：
1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；
3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。
三，AJAX的优缺点
优点：
1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2.用户体验极佳（不刷新页面即可获取可更新的数据）；
3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；
4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
缺点：
1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
四，完成一个AJAX过程需要以下四步：
1.准备页面请求，创建XMLHttpRequest对象。
2.使用 XMLHttpRequest对象的open（）和send（）方法发送资源请求给服务器.
3. 后台计算.
4.onreadystatechange函数，状态改变时发送数据回客户端，使用 XMLHttpRequest对象的responseText或responseXML属性获得服务器的响应.
五，AJAX的get请求封装：

  /** ajax get请求
 * @param {string} url 请求路径
 * @param {object} query  请求要携带的参数
 * @param {function} fn 请求成功之后的回调函数
 * @param {boolean} [isJson] 请求数据是否为json，默认值为true
 */
  get(url, query, fn, isJson = true) {
    //如果有query,在url后边拼接query
    if (query) {
      url += '?'
    }
    for (var key in query) {
      url += `${key}= ${query[key]}&`
    }
    url = url.slice(0, -1)
    //构建一个核心函数
    var xhr = new XMLHttpRequest()
    //连接函数
    xhr.open('get', url)
    //发送请求
    xhr.send()
    //监听状态改变
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
          fn && fn(xhr.responseText)
        }
      }
    }
  }

六，AJAX的post请求封装：

  /** ajax post请求
 * @param {string} url 请求路径
 * @param {object} query  请求要携带的参数
 * @param {function} fn 请求成功之后的回调函数
 * @param {boolean} [isJson] 请求数据是否为json，默认值为true
 */
  //ajax post请求
  post(url, query, fn, isJson = true) {
    if (query) {
      var str = ""
      for (var key in query) {
        str += `${key}= ${query[key]}&`
      }
      str = str.slice(0, -1)
      //构造一个核心函数
      var xhr = new XMLHttpRequest()
      //连接函数
      xhr.open('post', url)
      //把发送数据格式设置为urlencoded
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //发送请求
      xhr.send(str)
      //监听动态改变
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
          }
          fn && fn(res)
        }
      }
    }
  }

调用封装的方法发送请求

<body>
    <button onclick="sendMask()">发送请求</button>
    <script>
        function sendMask() {
            const id = prompt()
            utils.get/post('./02.php', { id }, function (resp) {
                console.log(resp);
            })
        }
    </script>
</body>

php代码

<?php
$id = $_GET['id'];
$shop = array(
'id' => $id,
'price'=> 1999,
'title'=>'键盘'
);
//把php的数据用json的格式转化为字符串传给前端
echo json_encode($shop);
?>

七，AJAX应用案例
该技术在 1998 年前后得到了应用。允许客户端脚本发送（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软 Exchange Server，并且迅速地成为了 Internet Explorer 4.0 的一部分。部分观察家认为，Outlook Web Access 是第一个应用了 Ajax 技术的成功的商业应用程序，并成为包括Oddpost 的网络邮件产品在内的许多产品的领头羊。但是，2005 年初，许多事件使得 Ajax 被大众所接受。Google 在它著名的交互应用程序中使用了异步通讯，如Google、Google 地图、Google 搜索，建议、Gmail等。Ajax 这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速传播加强了人们使用该项技术的意识。另外，对Mozilla/Gecko 的支持使得该技术走向成熟，变得更为易用。
Ajax 前景非常乐观，可以提高系统性能，优化用户界面。Ajax 现有直接框架 AjaxPro，可以引入 AjaxPro.2.dll 文件，可以直接在前台页面 JavaScript 调用后台页面的方法。但此框架与表单验证有冲突。另外微软也引入了 Ajax 组件，需要添加 AjaxControlToolkit.dll 文件，可以在控件列表中出现相关控件。
在这里插入图片描述

梦回1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax详解

一，什么是AJAX?Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。二，AJA...
复制链接

扫一扫