JavaScript学习笔记（三十一）——AJAX与封装AJAX

最新推荐文章于 2024-09-10 20:25:25 发布

粽子师兄

最新推荐文章于 2024-09-10 20:25:25 发布

阅读量172

点赞数

分类专栏： javaScript 文章标签： ajax js html php javascript

本文链接：https://blog.csdn.net/qq_45268602/article/details/108631345

版权

javaScript 专栏收录该内容

67 篇文章 3 订阅

订阅专栏

什么是AJAX

AJAX 全称： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

什么是XML

XML是一种与HTML一样的标记语言。

HTML叫做超文本标记语言，XML叫做可拓展标记语言。

在我们前端开发者看来，XML就是一种数据格式，用于前后端传递数据使用(现在已经被JSON所取代)。

    {
        "username": "王老五",
        "password": 1234567,
        "children": [{}, {}, {}]
    }

    <people username="王老五" password="1234567">
        <children>
            <child>
            </child>
            <child>
            </child>
            <child>
            </child>
        </children>
    </people>

AJAX发送步骤

获取对象

初始化一个对象

IE7之前

var xhr = new ActiveXObject("Microsoft.XMLHttp");

IE8及高级浏览器

var xhr = new XMLHttpRequest();

决定请求方式
```
xhr.open(method, url, boolean);
```
- method：请求方式
- url：请求的URL
- 是否异步，默认是true，异步
发送数据
```
xhr.send(data);
```
- data：要发送的数据key=value&key1=value1&...这样的键值对形式
- 注意： send方法发送的是请求正文中的数据。如果是get请求，需要将数据携带在URL的query部分；如果是post请求，需要将数据往send里传递。

获取返回内容

xhr.responseText

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

XHR的属性

xhr.readyState
- 该属性用于标记当前HTTP请求进行到哪个阶段了
- readyState === 0：表示未初始化完成，也就是 open 方法还没有执行
- readyState === 1：表示配置信息已经完成，也就是执行完 open 之后
- readyState === 2：表示 send 方法已经执行完成
- readyState === 3：表示正在解析响应内容
- readyState === 4：表示响应内容已经解析完毕，可以在客户端使用了

xhr.onreadystatechange

该属性是事件属性，该事件会在每一次readyState发生变化的时候触发

xhr.onreadystatechange = function() {
    // 因为这个事件会多次触发 但是我们只想在接受到全部数据之后触发 所以要判定状态值 和 状态码
    if (xhr.readyState === 4 && xhr.status === 200) {
        ...
    }
}

xhr.responseText
- 该属性用于接收返回的数据内容
- 注意： 只有在 xhr.readyState 为 4 时，才可以使用全部的返回数据
xhr.status
- 本次HTTP请求的状态码

发送一个带有参数的 get 请求

get 请求的参数就直接在 url 后面进行拼接就可以

const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?，然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')

xhr.send()

这样服务端就能接受到两个参数
一个是 a，值是 100
一个是 b，值是 200

发送一个带有参数的 post 请求

post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

const xhr = new XMLHttpRequest()
xhr.open('post', './data.php')

// 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
// 告诉一下服务端我给你的是一个什么样子的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

// 请求体直接再 send 的时候写在 () 里面就行
// 不需要问号，直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')

application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value

演示案例： 使用get和post实现用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            text-align: center;
        }
        form{
            width: 400px;
            height: auto;
            border: 1px solid #ccc;
            margin: 0 auto;
            text-align: center;
        }
        .items{
            display: flex;
            justify-content: center;
            height: 50px;
            align-items: center;
        }
        label{
            flex: 2;
        }
        input{
            flex: 4;
        }
        button{
            width: 100px;
        }
    </style>
</head>
<body>
    <h2>GET</h2>
    <form action="http://localhost/GET_POST/get.php" method="get">
        <div class="items">
            <label for="">用户名：</label>
            <input type="text" name="username">
        </div>
        <div class="items">
            <label for="">密码：</label>
            <input type="password" name="password">
        </div>
        <div class="items btn">
            <button>注册</button>
        </div>
    </form>

    <h2>POST</h2>
    <form action="http://localhost/GET_POST/post.php" method="post">
        <div class="items">
            <label for="">用户名：</label>
            <input type="text" name="username">
        </div>
        <div class="items">
            <label for="">密码：</label>
            <input type="password" name="password">
        </div>
        <div class="items btn">
            <button>注册</button>
        </div>
    </form>
</body>
</html>

在这里插入图片描述
get.php

<?php
    // 编码
    header("content-type:text/html;charset=utf-8");
    // 1、接收前端传递过来的数据
    $username = $_GET["username"];
    $password = $_GET["password"];
    // 2、连接数据库
    mysql_connect("localhost", "root", "123456");
    // 3、选择数据库
    mysql_select_db("gx2006");
    // 4、定义sql语句
    $sql = "INSERT INTO user VALUES ('$username', '$password')";
    // 5、执行sql语句
    $result = mysql_query("$sql");
    // 6、获取执行结果
    if($result){
        echo "注册成功！";
    }else{
        echo "注册失败！";
    }
    // 7、关闭连接
    mysql_close();
?>

post.php

<?php
    // 编码
    header("content-type:text/html;charset=utf-8");
    // 1、接收前端传递过来的数据
    $username = $_POST["username"];
    $password = $_POST["password"];
    // 2、连接数据库
    mysql_connect("localhost", "root", "123456");
    // 3、选择数据库
    mysql_select_db("gx2006");
    // 4、定义sql语句
    $sql = "INSERT INTO user VALUES ('$username', '$password')";
    // 5、执行sql语句
    $result = mysql_query("$sql");
    // 6、获取执行结果
    if($result){
        echo "注册成功！";
    }else{
        echo "注册失败！";
    }
    // 7、关闭连接
    mysql_close();
?>

通过get方式注册

在这里插入图片描述

通过post方式注册

在这里插入图片描述

封装AJAX

为了方便使用，我们将AJAX的发送步骤封装

var AJAX = {
    // 封装get，参数一表示一个url路径，参数二表示前端传递过来的数据，是一个对象，参数三表示一个回调函数
    get(url, data, callback){
        // 假如data是：{a: 1, b: 2, c: 3, d: 4}
        // 需要将它格式转化成：a=1&b=2&c=3&d=4，这种querystring字符串形式
        // 定义一个变量，用于存放转化后的字符串
        let querystring = "";
        for (let i in data){
            querystring += i + "=" + data[i] + "&";
            // 第一次循环结束以后  => a=1&
            // 第二次循环结束以后  => a=1&b=2& 
            // 第三次循环结束以后  => a=1&b=2&c=3&
            // 第四次循环结束以后  => a=1&b=2&c=3&d=4&
        }
        // 将最后面的&去掉，即只要前面部分
        querystring = querystring.slice(0, -1);
        // 1、初始化对象
        let xhr = new XMLHttpRequest();
        // 2、监听状态
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
                // JSON.parse：将符合JSON格式的字符串转为对象
                // 将返回内容转为对象
                let obj = JSON.parse(xhr.responseText);
                // 回调函数
                callback(obj);
            }
        }
        // 3、open
        xhr.open("get", url + "?" + querystring, true);
        // 4、send
        xhr.send();
    },
    // 封装post，参数一表示一个url路径，参数二表示前端传递过来的数据，是一个对象，参数三表示一个回调函数
    post(url, data, callback){
        // 假如data是：{a: 1, b: 2, c: 3, d: 4}
        // 需要将它格式转化成：a=1&b=2&c=3&d=4，这种querystring字符串形式
        // 定义一个变量，用于存放转化后的字符串
        let querystring = "";
        for (let i in data){
            querystring += i + "=" + data[i] + "&";
            // 第一次循环结束以后  => a=1&
            // 第二次循环结束以后  => a=1&b=2& 
            // 第三次循环结束以后  => a=1&b=2&c=3&
            // 第四次循环结束以后  => a=1&b=2&c=3&d=4&
        }
        // 将最后面的&去掉，即只要前面部分
        querystring = querystring.slice(0, -1);
        // 1、初始化对象
        let xhr = new XMLHttpRequest();
        // 2、监听状态
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
                // 回调函数
                callback(JSON.parse(xhr.responseText));
            }
        }
        // 3、open
        xhr.open("post", url, true);
        // 将请求头内容更改为表单的内容类型
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8");
        // 4、send
        xhr.send(querystring);
    }
}

案例演示： 使用封装的AJAX实现用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            text-align: center;
        }
        form{
            width: 400px;
            height: auto;
            border: 1px solid #ccc;
            margin: 0 auto;
            text-align: center;
        }
        .items{
            display: flex;
            justify-content: center;
            height: 50px;
            align-items: center;
        }
        label{
            flex: 2;
        }
        input{
            flex: 4;
        }
        button{
            width: 100px;
        }
    </style>
</head>
<body>
    <form action="" method="">
        <div class="items">
            <label for="">用户名：</label>
            <input type="text" name="username" id="username">
        </div>
        <div class="items">
            <label for="">密码：</label>
            <input type="password" name="password" id="password">
        </div>
        <div class="items btn">
            <button id="btn" type="button">注册</button>
        </div>
    </form>
    <!-- 引入封装好的AJAX.js -->
    <script src="AJAX.js"></script>
    <script>
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let btn = document.getElementById("btn");
        
        btn.onclick = function(){
            let un = username.value;
            let psw = password.value;

            AJAX.post("http://localhost/EN_AJAX/post.php", {username:`${un}`, password:`${psw}`}, function(data){
                console.log(data);
            }) 
        }
    </script>
</body>
</html>

在这里插入图片描述

粽子师兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（三十一）——AJAX与封装AJAX

什么是AJAXAJAX 全称： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。什么是XMLXML是一种与HTML一样的标记语言。HTML叫做超文本标记语言，XML叫做可拓展标记语言。在我们前端开发者看来，XML就是一种数据格式，用于前后端传递数据使用(现在已经被JSON所取代)。 {
复制链接

扫一扫

专栏目录