关于AJAX的一些基础以及封装

最新推荐文章于 2022-11-05 13:35:32 发布

1983丶

最新推荐文章于 2022-11-05 13:35:32 发布

阅读量171

点赞数 2

分类专栏： AJAX 文章标签： AJAX

本文链接：https://blog.csdn.net/qq_44958875/article/details/97642508

版权

AJAX 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近在学习AJAX 就顺便拿出来说说！只是比较浅的理解！

特点

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
举个例子：我们在淘宝的搜索栏中分别输入哇哈哈然后删去输入nike 搜索栏下面展开的选择栏中的内容在发生变化但是整个页面没有刷新在这里插入图片描述

AJAX的基本结构

在AJAX的基本结构中，我将它分为了5步

步骤	名称
1	创建一个异步对象
2	设置请求方式和请求地址
3	发送请求
4	监听状态的变化
5	处理返回的结果

1.在JS文件中我们定义一个对象

 var xmlhttp;
 
 if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

在上面代码中

    xmlhttp=new XMLHttpRequest();

IE7+以及现在的主流的浏览器都可以使用但低版本的IE就不行所以用了

window.XMLHttpRequest

如果是IE 7-就会执行

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

可以说是为了IE操碎了心ε＝ε＝ε＝(#>д<)ﾉ

2.设置请求方式和请求地址

这里要用到open 例如 xmlhttp.open;

xmlhttp.open("A" , "B" , C);

①这里的A代表的method即方法，我们有POST与GET方法我们大多数用的是GET方法，GTE相对POST而言更简单也更快，POST适合发送大量数据的是时候（GET会将用户的部分参数例如账号密码放在url后，而POST不会，所以POST 比 GET 更稳定也更可靠）。
②这里的B代表url即路劲，也就是服务器上文件的地址。
③这里的C指的是async即异步，这里填true（异步）或 false（同步），但是ajax 存在的意义就是刷异步请求所以一般都是true。

3.发送请求

这里要用到send 例如xmlhttp.send();

xmlhttp.send();

这样就会将数据传入后台

4.监听状态的变化

这里我们要明确几个数值，即每个数值代表的状态

数值	状态
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

这里我们就需要onreadystatechange事件来判断

xmlhttp.onreadystatechange=function()
{
}

当我们点击后触发了这个事件后就要用readyState来判断状态码，就是上面的0-4的数值以及状态，当等于4的时候表示请求以及完成执行下一步

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState === 4) 
  {
   
   }
}

当xmlhttp.readyState === 4后我们就要判断HTTP状态码是否符合，在HTTP状态码中 200~300之间为请求成功而304是特殊也算请求成功是留的缓存数据，所以

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState === 4) 
  {
        if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304)
         {
          A
         }
        else 
         {
          B
          }
   }
}

5.处理返回的结果

在上诉当xmlhttp.readyState === 4以及xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304后我们就会产生判断

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState === 4) 
  {
        if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304)
         {
          A
         }
        else 
         {
          B
          }
   }
}

A与B就是请求成功与失败后返回的结果

下面是一个示例

<!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>
  <script>
    window.onload = function (ev) {
      var oBtn = document.querySelector("button");
      oBtn.onclick = function (ev1) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET" , "AA.txt" , true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function (ev2) {
          if (xmlhttp.readyState === 4) {
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
              alert(xmlhttp.responseText);
            }
            else {
              console.log("没有接受到了服务器的数据");
            }
          }
        }
      }
    }  
  </script>
</head>

<body>
  <button>发送请求</button>
</body>

</html>

AJAX的封装

我们不想每次都用到AJAX的时候都去写一遍上诉的代码会很麻烦，那我们就用一个JS文件来封装AJAX，以我们每次想用的时候直调用就可以了

1.我们首先在一个JS文件中写上AJAX的基本格式

function ajax(url, success, error) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "url", true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function (ev2) {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
                success(xmlhttp);
            }
            else {
                error(xmlhttp);
            }
        }
    }
}

2.html方面

<!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>
  <script src="./myAjax.js"></script>
  <script>
    window.onload = function (ev) {
      var oBtn = document.querySelector("button");
      oBtn.onclick = function (ev1) {
          ajax("AA.txt",
          function(xmlhttp){
              alert(xmlhttp.responseText);
          },
          function(xmlhttp){
              alert("请求失败")
          })
      }
    }  
  </script>
</head>
<body>
  <button>发送请求</button>
</body>
</html>

在HTML中我们点击按钮后直接掉调用JS文件中的AJAX函数（script src="./myAjax.js"></script 指的就是那上面的JS文件），AJAX传入URL，成功以及失败后的方法。
用了封装后就会很简单的使用每次。

当然除了用原生JS来写AJAX以外，用jquery也能更方便的写，这里就介绍jquery的AJAX封装。

首先我们要引入jquery.js，（小插曲，其实jquery有很多版本现在的jquery官网上也看得到，1.x,2.x,3.x，至于选择，其实我们打开很多大公司的网页发现都是用的1.x其实也是兼容性好吧），这里我写了一个示例

  <script>
    window.onload = function (ev) {
      var oBtn = document.querySelector("button");
      oBtn.onclick = function (ev1) {
        $.ajax({
          type: "GET",
          url: "jquery.txt",
          data: "userName=dmj&userPassword=120140733",
          success: function (mes) {
            alert(mes);
          },
          error:function(xhr){
            alert(xhr.status);
          }
        });
      }
    }  
  </script>
</head>

<body>
  <button>点击发送</button>
</body>

主要的是

$.ajax({

   type: "",

   url: "",

   data: "",

   success: function(msg){

     alert( "Data Saved: " + msg );

   }

});

①data是发送到服务器的数据例如data: “userName=dmj&userPassword=120140733”,就是你发送了userName为dmj和userPassword=120140733这个两个数据到服务器具体就想表单传送账号和密码
②type就是GET以及POST 默认为GET

jquery和原生的一些比较

原生其实对大小写很敏感，你GET是不能用get的而jquery是可以的，当然你在原生里面写上大小写转换的代码也是可以的。
在jquery中你type url或者data等顺序发生改变都是可以的。

值得注意的是在jquery封装中，每一段结束必须要用逗号，隔开不然会报错。

最后

在学ajax的时候如果你将你的电脑自身弄成服务器的话可能很难理解到，因为send这个地方会报错。之前搜索过一些如果你测试PHP的话可以用wampsever，如果直接用的话可以试试WebStorm。

后续继续学习后会进行补充。

to be continue… …

1983丶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于AJAX的一些基础以及封装

最近在学习AJAX 就顺便拿出来说说！只是比较浅的理解！特点AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。举个例子：我们在淘宝的搜索栏中分别输入哇哈哈然后删去输入nike 搜索栏下面展开的选择栏中的内容在发生变化但是整个页面没有刷新 AJAX的基本结构在AJAX的基本结构中，我将它分为了5步步骤名称1创建一个异步...
复制链接

扫一扫