原生ajax解析

最新推荐文章于 2022-05-07 12:57:18 发布

灯光下的投影

最新推荐文章于 2022-05-07 12:57:18 发布

阅读量119

点赞数

分类专栏： ajax 文章标签：原生ajax请求

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

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了AJAX的基本概念，包括其异步性质和XMLHttpRequest对象的使用。通过实例展示了如何发送GET和POST请求，以及如何处理响应。强调了在实际应用中，如用户名验证、用户登录和聊天机器人的实现，需要将代码部署到服务器以运行AJAX请求。

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

什么是ajax？

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

同步与异步：

同步和异步概念：

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

网页异步应用：

验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。
百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。
新浪微博评论（异步加载）。

XMLHttpRequest可以以异步方式的处理程序。

XMLHttpRequest

浏览器内建对象，用于与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

发送get请求

XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。

//使用XMLHttpRequest发送get请求的步骤
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();//构造函数没有参数的情况,括号可以省略
//表示过了3000毫秒，就算请求超时
      xhr.timeout = 3000;
// 超时后会触发timeout事件
      xhr.ontimeout = function() {
        console.log("超时了，你换一个网络试试");
      }
//2. 设置请求行
//第一个参数:请求方式  get/post
//第二个参数:请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=abc");
//3. 设置请求头
//浏览器会给我们默认添加基本的请求头,get请求时无需设置
//4. 设置请求体
//get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);

get请求,设置请求行时,需要把参数列表拼接到url后面
get请求不用设置请求头
get请求的请求体为null

发送post请求

var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=abc&age=18");

post请求,设置请求行时,参数列表不能拼接到url后面
post必须设置请求头中的content-type为application/x-www-form-urlencoded
post请求需要将参数列表设置到请求体中.

获取响应

HTTP响应分为3个部分，状态行、响应头、响应体。

//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onreadystatechange = function () {
  if(xhr.readyState == 4){
    //1. 获取状态行
    console.log("状态行:"+xhr.status);
    //2. 获取响应头
    console.log("所有的相应头:"+xhr.getAllResponseHeaders());
    console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
    //3. 获取响应体
    console.log(xhr.responseText);
  }
}

readyState

readyState:记录了XMLHttpRequest对象的当前状态

//0：请求未初始化。
//1：请求已经建立，但是还没有开始发送。
//2：请求已发送，正在处理中
//3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
//4：响应已完成；您可以获取并使用服务器的响应了。(我们只需要关注状态4即可)

案例（代码要放到服务器上运行，本地不行）

1、判断用户名是否存在

前端代码:

<!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>
    <!-- name属性要和form一起用，form提交的时候，自动拼接成参数 -->
    <input type="text" /> <span></span>

    <script>
      var input = document.querySelector('input')
      var span = document.querySelector('span')
      /* 
        新单词:
        xml: 解释
        http: 协议
        request: 请求
      */
      // 给input注册失焦事件
      input.onblur = function() {
        // 发送ajax请求
        // 1. 创建对象
        var xhr = new XMLHttpRequest()
        // 2. 设置请求报文
        xhr.open('get', '08.php?username=' + this.value)
        xhr.send(null)

        // 3. 获取响应报文
        // ready: 准备
        // state: 状态
        // change: 改变
        // response : 响应
        // 当xhr状态发生改变的时候，会触发
        xhr.onreadystatechange = function() {
          // 表示完成了
          if (xhr.readyState === 4 && xhr.status === 200) {
            if (xhr.responseText === 'yes') {
              // 存在的
              span.innerText = '已经被注册了，换一个吧'
              span.style.color = 'red'
            } else {
              span.innerText = '✔'
              span.style.color = 'green'
            }
          }
        }
      }
    </script>
  </body>
</html>

后台php代码（08.php）：

<?php
  $username = $_GET['username'];
  // 后台根据用户名去数据库查询是否有这条记录
  $arr = ['hucc', 'hcc', 'hucongcong', 'cc', 'zzc'];
  // 判断$arr中是否包含$username
  if (in_array($username, $arr)) {
    // 说明有
    echo 'yes';
  } else {
    // 没有
    echo 'no';
  }
?>

2、用户登录案例

前端代码：

<!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>
    <style>
      /* [type='button'] {
        background-color: red;
      }
      [name='username'] {
        background-color: green;
      } */
    </style>
  </head>
  <body>
    <input type="text" name="username" autocomplete="off" /><br />
    <input type="password" name="password" /><br />
    <input type="button" value="登录" />

    <script>
      // 1. 给登录按钮注册点击事件
      // 2. 拿到用户名和密码的值
      // 3. 发送ajax请求（post请求）
      var button = document.querySelector('[type=button]')
      var username = document.querySelector('[name=username]')
      var password = document.querySelector('[name=password]')

      button.onclick = function() {
        var xhr = new XMLHttpRequest()

        // 发送post请求
        xhr.open('post', '11.php')
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send('username=' + username.value + '&password=' + password.value)

        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            if (xhr.responseText === 'success') {
              alert('恭喜你，登录成功了')
              location.href = 'index.html'    
            } else {
              alert('用户名或者密码错误')
            }
          }
        }
      }
    </script>
  </body>
</html>

后台php代码（11.php）：

<?php
  header('content-type:text/html;charset=utf-8');
  $username = $_POST['username'];
  $password = $_POST['password'];
  if ($username === 'admin' && $password === '123456') {
    echo 'success';
  } else {
    echo 'fail';
  }
?>

3、聊天机器人案例

前端代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ajax</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
      }

      h3 {
        text-align: center;
      }

      .chatbox {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid #ccc;
        background-color: #fff;
        border-radius: 5px;
      }

      .messages {
        height: 350px;
        padding: 20px 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        overflow: scroll;
      }

      .messages h5 {
        font-size: 20px;
        margin: 10px 0;
      }

      .messages p {
        font-size: 18px;
        margin: 0;
      }

      .self {
        text-align: left;
      }

      .other {
        text-align: right;
      }

      .form {
        height: 150px;
      }

      .form .input {
        height: 110px;
        padding: 10px;
        box-sizing: border-box;
      }

      .form .btn {
        height: 40px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
      }

      .form textarea {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        resize: none;
        outline: none;
        font-size: 20px;
      }

      .form input {
        display: block;
        width: 100px;
        height: 30px;
        margin-top: 5px;
        margin-right: 20px;
        float: right;
      }
    </style>
  </head>
  <body>
    <h3>简单的Ajax实例</h3>
    <div class="chatbox">
      <!-- 聊天内容 -->
      <div class="messages">
        <div class="self">
          <h5>我说</h5>
          <p>你好</p>
        </div>
        <div class="other">
          <h5>对方说</h5>
          <p>你好</p>
        </div>
      </div>
      <div class="form">
        <div class="input">
          <textarea></textarea>
        </div>
        <div class="btn">
          <input type="button" value="发送" />
        </div>
      </div>
    </div>

    <script>
      // 1. 给按钮注册点击事件
      // 2. 获取textarea的内容
      // 3. 动态创建一个div，设置类名为self. 添加到messages中
      // 4. 发送ajax请求， 根据响应的结果
      // 5. 动态创建一个div，设置类名为other,添加messages中
      var btn = document.querySelector('.btn input')
      var text = document.querySelector('.input textarea')
      var messages = document.querySelector('.messages')

      btn.onclick = function() {
        var value = text.value.trim()
        text.value = ''
        var div = document.createElement('div')
        div.className = 'self'
        messages.appendChild(div)
        div.innerHTML = '<h5>我说</h5><p>' + value + '</p>'
        div.scrollIntoView()
        // 发送一个ajax请求获取响应数据
        var xhr = new XMLHttpRequest()

        xhr.open('post', '12.php')
        xhr.setRequestHeader(
          'content-type',
          'application/x-www-form-urlencoded'
        )
        xhr.send('content=' + value)

        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var div = document.createElement('div')
            div.className = 'other'
            messages.appendChild(div)
            div.innerHTML = '<h5>对方说</h5><p>' + xhr.responseText + '</p>'
            div.scrollIntoView()
          }
        }
      }
      text.onkeydown = function(e) {
        if (e.keyCode === 13) {
          btn.onclick()
        }
      }
    </script>
  </body>
</html>

后台php代码（12.php）：

<?php
  header('content-type:text/html;charset=utf-8');
  $arr = ['鸡你太美', '爱过', '先救我妈', '我爸是李刚', '你好帅啊', '我们约么', '丑拒', 'ff你这么穿着品如的衣服'];
  sleep(1);
  echo $arr[array_rand($arr, 1)];

?>

灯光下的投影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生ajax解析

什么是ajax？即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。同步与异步：同步和异步概念：同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响，两件事情同时进行，做一件事情...
复制链接

扫一扫

专栏目录