ajax-get
<body>
<h1>这是第一个ajax网页</h1>
<script>
//1.创建对象
var xhr = new XMLHttpRequest();
//2.绑定接收状态改变事件
xhr.onreadystatechange = function () {
//5.接收返回的数据
alert(xhr.responseText);
};
//3.打开连接
xhr.open('GET', 'http://127.0.0.1:8080/ajax/test', true);
//4.发送请示
xhr.send();
</script>
</body>
ajax-post
<body>
<h1>post版的ajax</h1>
<script>
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.绑定接收状态改变事件
xhr.onreadystatechange = () => {
//5.接收返回的数据
alert(xhr.responseText);
};
//3.打开连接
xhr.open('POST', 'http://127.0.0.1:8080/ajax/ttt', true);
//3.1修改请求类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
xhr.send();
</script>
</body>
ajax-get-query
<body>
<h1>ajax_query</h1>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
alert(xhr.responseText);
};
xhr.open('GET', 'http://127.0.0.1:8080/ajax/ttt2?pid=5', true);
xhr.send();
</script>
</body>
ajax-post-body
<body>
<h1>post传递和body接收</h1>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
alert(xhr.responseText);
};
xhr.open('POST', 'http://127.0.0.1:8080/ajax/ttt3', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('pid=3&age=19');
</script>
</body>
ajax-post-用户注册
<body>
<h1 id="msg" style="color: red"></h1>
<form action="#" method="post">
<ul>
<li>
用户名：<input type="text" id="uname">
<span></span>
</li>
<li>
密码：<input type="password" id="upwd" name="upwd">
<span></span>
</li>
<!-- <li>
确认密码：<input type="password" id="upwdres" name="upwdres">
</li> -->
<li>
<input type="button" id="btn" value="注册" onclick="reg()">
</li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- <input type="text">
<input type="text">
<input type="text"> -->
</form>
<script>
function reg() {
//创建ajax对象
let xhr = new XMLHttpRequest();
let name = document.getElementById('uname').value;
let pwd = document.getElementById('upwd').value;
let reg = /^[0-9a-zA-Z]{4,16}$/;
let span = document.getElementsByTagName('span');
if (!reg.test(name)) {
span[0].innerHTML = '请输入4-16位用户名';
return;
} else {
span[0].innerHTML = '';
};
if (!reg.test(pwd)) {
span[1].innerHTML = '请输入4-16位密码';
return;
} else {
span[1].innerHTML = '';
};
xhr.onreadystatechange = function () {
//接收服务器返回数据
if (xhr.readyState === 4 && xhr.status === 200) {
let msg = document.getElementById('msg');
let obj = JSON.parse(xhr.responseText);
msg.innerHTML = obj.msg;
}
};
//绑定状态修改事件
xhr.open('POST', 'http://127.0.0.1:8080/v1/users/reg', true);
//修改请求主体类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var formdata = `uid=null&uname=${name}&upwd=${pwd}&email=a@qq.com&phone=100&avatar=1.jpg&user_name=yaya&gender=1`;
xhr.send(formdata);
}
</script>
</body>
ajax-post-用户登陆
<body>
<form action="#" method="post">
<h1 id="msg"></h1>
<ul>
<li>
用户名：<input type="text" id="uname" name="uname">
</li>
<li>
密码：<input type="password" id="upwd" name="upwd">
</li>
<li>
<input type="button" id="btn" onclick="login()" value="登陆">
</li>
</ul>
</form>
<script>
function login() {
let name = document.getElementById('uname').value;
let pwd = document.getElementById('upwd').value;
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let msg = document.getElementById('msg');
let obj = JSON.parse(xhr.responseText);
msg.innerHTML = obj.msg;
}
};
xhr.open('POST', 'http://127.0.0.1:8080/v1/users/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
let formdata = `uname=${name}&upwd=${pwd}`;
console.log(formdata);
xhr.send(formdata);
};
</script>
</body>
