文章目录
- Ajax
-
- 快速入门
- onreadystatechange属性
- [JQuery 的 Ajax 请求](#JQuery 的 Ajax 请求)
-
- [.ajax 方法](#.ajax 方法)
- [\.get 请求和\\.post 请求](#$.get 请求和$.post 请求)
- \$.getJSON
Ajax
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>