Ajax

文章目录

Ajax
- 快速入门
- onreadystatechange属性
- [JQuery 的 Ajax 请求](#JQuery 的 Ajax 请求)
- - [ $.ajax 方法](#$ .ajax 方法)
  - [\ $.get 请求和\\$ .post 请求](#$.get 请求和$.post 请求)
  - \$.getJSON

AJAX，全称是"异步JavaScript和XML"（Asynchronous JavaScript and XML），是一种使用JavaScript和XML（标准通用标记语言的子集）的开发技术。Ajax通过使用JavaScript，HTML，CSS和XMLHttpRequest对象，可以在不刷新整个页面的情况下，创建与服务器的异步交互。

Ajax技术可以发送和检索与服务器的数据，而无需改变现在显示的页面。这使用户可以同时处理其他事情，不会受到数据传输延迟的影响。

Ajax播放的关键角色是XMLHttpRequest对象。这个对象是浏览器的一部分，它允许JavaScript以一种异步的方式向服务器发送或接收数据。这使得Web应用程序能够以不影响或中断用户操作的方式处理数据。

快速入门

使用js发送ajax请求：

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax demo</title>
    </head>
    <body>
        <form action="/yyy" method="post">
            用户名字:<input id="uname" name="username" type="text">
            <input onclick="checkUser();" type="button" value="验证用户名">
            <input id="myres" style="border-width: 0;color: red" type="text"><br/><br/>
            用户密码:<input name="password" type="password"><br/><br/>
            电子邮件:<input name="email" type="text"><br/><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
        <script>
            checkUser = function () {
                // 新建一个 XMLHttpRequest 对象，该对象用于与服务器交换数据
                var xhr = new XMLHttpRequest();

                // 获得 id 为 "uname" 的 HTML 元素（可能是输入框）的值
                var uname = document.getElementById("uname").value;

                // 初始化一个请求。"GET" 是HTTP方法，"/yyy?username=" + uname是URL
                // "true" 表示异步（不等待服务器的响应，即发送请求后继续执行其他代码）。
                xhr.open("GET", "/yyy?username=" + uname, true);

                // 发送请求。因为这是一个GET请求，所以这里没有发送任何数据（send参数为空）。
                xhr.send();
            }
        </script>
    </body>
</html>

onreadystatechange属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

html 复制代码

<script>
    checkUser = function () {
        var xhr = new XMLHttpRequest();
        var uname = document.getElementById("uname").value;
        xhr.open("GET", "/yyy?username=" + uname, true);
        
        // 当xhr对象readState改变时触发
        xhr.onreadystatechange = function (){
            console.log(xhr)
		}
        
        xhr.send();
    }
</script>

JQuery 的 Ajax 请求

$.ajax 方法

参数：

url：请求的地址
type : 请求的方式 get 或 post
data : 发送到服务器的数据。将自动转换为请求字符串格式
success: 成功的回调函数
error: 失败后的回调函数
dataType: 返回的数据类型常用 json 或 text

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax demo</title>
        <script src="jquery-3.7.1.js"></script>
    </head>
    <body>
        <form action="/yyy" method="post">
            用户名字:<input id="uname" name="username" type="text">
            <input onclick="checkUser();" type="button" value="验证用户名">
            <input id="myres" style="border-width: 0;color: red" type="text"><br/><br/>
            用户密码:<input name="password" type="password"><br/><br/>
            电子邮件:<input name="email" type="text"><br/><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
        <script>
            checkUser = function () {
                var $uname = $("#uname").val()
                $.ajax({
                    url: "/yyy?" + $uname,
                    type: "get",
                    success: function (data) {
                        console.log(data)
                    }
                })
            }
        </script>
    </body>
</html>

$.get 请求和$ .post 请求

$.get 和$ .post 底层还是使用$.ajax()方法来实现异步请求

参数：

url: 请求的 URL 地址
data: 请求发送到服务器的数据
success: 成功时回调函数
type: 返回内容格式，xml, html, script, json, text

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax demo</title>
        <script src="jquery-3.7.1.js"></script>
    </head>
    <body>
        <form action="/yyy" method="post">
            用户名字:<input id="uname" name="username" type="text">
            <input onclick="checkUser();" type="button" value="验证用户名">
            <input id="myres" style="border-width: 0;color: red" type="text"><br/><br/>
            用户密码:<input name="password" type="password"><br/><br/>
            电子邮件:<input name="email" type="text"><br/><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
        <script>
            checkUser = function () {
                var $uname = $("#uname").val()
                $.get({
                    url: "/yyy?" + $uname,
                    success: function (data) {
                        console.log(data)
                    }
                })
            }
        </script>
    </body>
</html>

$.getJSON

$.getJSON 底层使用$ .ajax()方法来实现异步请求

参数：

url: 请求发送的哪个 URL
data: 请求发送到服务器的数据
success: 请求成功时运行的函数

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax demo</title>
        <script src="jquery-3.7.1.js"></script>
    </head>
    <body>
        <form action="/yyy" method="post">
            用户名字:<input id="uname" name="username" type="text">
            <input onclick="checkUser();" type="button" value="验证用户名">
            <input id="myres" style="border-width: 0;color: red" type="text"><br/><br/>
            用户密码:<input name="password" type="password"><br/><br/>
            电子邮件:<input name="email" type="text"><br/><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
        <script>
            checkUser = function () {
                var $uname = $("#uname").val()
                $.getJSON({
                    url: "/yyy",
                    data: {"username": $uname},
                    success: function (data) {
                        console.log(data)
                    }
                })
            }
        </script>
    </body>
</html>

Ajax

文章目录

Ajax

快速入门

onreadystatechange属性

JQuery 的 Ajax 请求

$.ajax 方法

.get 请求和.post 请求

$.getJSON

$.get 请求和$ .post 请求