什么是客户端？
凡是能发送 url 请求的， 都是客户端。可以是软件、命令或一段代码。
什么是Ajax？
Asynchronous JavaScript And XML : 异步的JavaScript和XML
实现流程：
同步和异步请求的区别
同步：客户端发送一个请求，客户端处理这个请求，期间客户端什么都不做，等待服务器端响应返回，这叫同步。（客户端与服务器端处理同一个请求）
异步：客户端发送一个请求，不必等待服务器端响应返回，就可以发送下一个请求，期间有个监听脚本监听上一个请求是否响应成功，一旦响应成功，就处理成功的这个请求。这叫异步。（客户端与服务器端处理不一定是同一个请求）
XMLHttpRequest
open( 'GET/POST', 'HTTP/FTP/....', 'true/false') (true:异步， 默认值； false：同步）
onreadystatechange = function() { }
请求状态改变时调用
必须在send（）之前调用
function（）事件回调函数
回调是由执行条件的函数，由特定事件触发
send（‘请求数据’）
请求状态改变时调用
get请求时为null send(null);
post是为请求的键值对 post('name=peter&pass=123');
readyState //发送请求的状态
0：open() 未调用，未打开；
1：send() 未调用，未发送；
2：send() 已调用，获取到响应头；
3：正在下载响应数据
4：请求完成
status
status=200， 响应成功
setRequestHeader(‘请求头信息’)
必须是open（）与send（）之间调用
常用于POST调用
open('post', 'login.php', true);
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //表单提交
send(serialize(form));
responseText：存储返回的字符串，包括纯文本，JSON数据等；
responseXML：存储返回的XML/HTML对象，可以直接用DOM方法解析；
Ajax脚本的结构
1.创建Ajax对象
2. 设置onreadystatechange事件回调，处理响应返回的数据
3. 初始化一个请求：执行xhr的open（）方法
4. 设置请求头对象（可选）
5. 发送请求：send()
Ajax 完成 get 请求
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录（Ajax发送get请求）</title>
</head>
<body>
<div align="center">
<h3>用户登录</h3>
<form>
<p>账号：<input type="text" name="name" id="name"></p>
<p>密码：<input type="password" name="pwd" id="pwd"></p>
<p><input type="submit" id="submit" value="提交"></p>
</form>
<h3 id="tips"></h3>
</div>
</body>
<script>
var submit = document.getElementById('submit');
submit.onclick = function () {
//1.创建Ajax对象
var xhr = new XMLHttpRequest();
//2. 创建请求事件的监听
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
var json = JSON.parse(xhr.responseText);
var tips = document.getElementById('tips');
tips.innerHTML = '欢迎' + json.name + '来到wjh的梦想世界！';
}
}
//3. 初始化一个url请求
var name = document.getElementById('name').value;
var pwd = document.getElementById('pwd').value;
var url = 'check.php?name=' + name + '&pwd=' + pwd ;
xhr.open('get', url, true);
//4. 发送url请求
xhr.send(null);
return false; //禁止提交按钮的默认行为
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
Ajax 完成 post 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录（Ajax发送post请求）</title>
</head>
<body>
<div align="center">
<h3>用户登录</h3>
<form>
<p>账号：<input type="text" name="name" id="name"></p>
<p>密码：<input type="password" name="pwd" id="pwd"></p>
<p><input type="submit" id="submit" value="提交"></p>
</form>
<h3 id="tips"></h3>
</div>
</body>
<script>
var submit = document.getElementById('submit');
submit.onclick = function () {
//1.创建Ajax对象
var xhr = new XMLHttpRequest();
//2. 创建请求事件的监听
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
var json = JSON.parse(xhr.responseText);
var tips = document.getElementById('tips');
tips.innerHTML = '欢迎' + json.name + '来到wjh的梦想世界！';
}
}
//3. 初始化一个url请求
var name = document.getElementById('name').value;
var pwd = document.getElementById('pwd').value;
var data = 'name=' + name + '&pwd=' + pwd ;
var url = 'check.php' ;
xhr.open('post', url, true);
//4. 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//5. 发送url请求
xhr.send(data);
return false; //禁止提交按钮的默认行为
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
