一、Ajax请求——GET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var xmlhttp = new XMLHttpRequest();
// （2）设置请求的参数。包括：请求的方法、请求的url。
xmlhttp.open('GET', '001.php');
// （3）发送请求
xmlhttp.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(xmlhttp.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
}
}
</script>
</body>
</html>
001.php
<?php echo 'helloworld'; ?>
二、Ajax请求——POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="loading"></div>
<table>
<tr>
<td>用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td></td>
<td><button id="btn">登录</button></td>
</tr>
</table>
<script type="text/javascript">
var btn = document.getElementById('btn')
var textUsername = document.getElementById('username')
var textPassword = document.getElementById('password')
btn.onclick = function(){
var username = textUsername.value
var password = textPassword.value
var xhr = new XMLHttpRequest()
xhr.open('POST','03.php')
// 以POST请求方式请求03.php
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 通过post方式发送urlencoded格式请求体，必须设置相应的请求头
xhr.send(`username=${username}&password=${password}`)
// es6新语法，模板字符串，通过esc键下面一个键的反引号，括起来的。注意这里面有固定格式，千万别有空格
xhr.onreadystatechange = function(){
if(this.readyState == 4){
console.log(this.responseText);
}
}
}
</script>
</body>
</html>
03.php
<?php
if(empty($_POST['username']) || empty($_POST['password'])){
exit('请输入完整信息');
}
$username = $_POST['username'];
$password = $_POST['password'];
if($username === 'wzx' && $password === '123456'){
exit('登录成功');
}
exit('输入信息有误');
?>
三 Ajax 请求解析JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id='btnJson'>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector("#btnJson").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str+='<ul>';
str+='<li>'+jsObj.name+'</li>';
str+='<li>'+jsObj.skill+'</li>';
str+='<li>'+jsObj.job+'</li>';
str+='</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
}
}
</script>
</body>
</html>
Person.json
{
"name"： "漩涡鸣人" ，
"skill"： "影分身" ，
"job"： "忍着" ，
}
myJson.php
<?php
// 读取json文件 并返回即可
echo file_get_contents('Person.json');
?>