ajax
2018-07-23 本文已影响0人
兔子___
Ajax 1 - 请求纯文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 1 - 请求纯文本</title>
</head>
<body>
<button id="button">请求纯文本</button>
<br><br>
<div id="text"></div>
<script>
document.getElementById('button').addEventListener("click",loadText);
function loadText(){
// console.log("Hello World!");
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// console.log(xhr);
// open(type,url/file,async)
xhr.open('GET','sample.txt',true);
// console.log("READYSTATE: ",xhr.readyState);
// onprogress
xhr.onprogress = function(){
// console.log("测试READYSTATE: ",xhr.readyState);
}
// 两种方式请求 onload / onreadystattechange
// xhr.onload = function(){
// // console.log("READYSTATE: ",xhr.readyState);
// // console.log(this.responseText);
// document.getElementById('text').innerHTML = this.responseText;
// }
xhr.onreadystatechange = function(){
// console.log("READYSTATE: ",xhr.readyState);
if (this.status == 200 && this.readyState == 4) {
// console.log(this.responseText);
document.getElementById('text').innerHTML = this.responseText;
}else if(this.status == 404){
// console.log("请求的网页不存在");
document.getElementById('text').innerHTML = "NOT Found";
}
}
// 发送请求
xhr.send();
}
// readyState 状态码
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// HTTP 状态码
// 200 - 服务器成功返回网页
// 404 - 请求的网页不存在
// 503 - 服务器暂时不可用
</script>
</body>
</html>
Ajax 2 - 请求JSON数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 2 - 请求JSON数据</title>
</head>
<body>
<button id="button1">请求单个用户</button>
<button id="button2">请求所有用户</button>
<br><br>
<h1>单个用户</h1>
<div id="user"></div>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('button1').addEventListener('click',loadUser);
document.getElementById('button2').addEventListener('click',loadUsers);
function loadUser(){
var xhr = new XMLHttpRequest();
xhr.open("GET","user.json",true);
xhr.onload = function(){
if (this.status == 200) {
// console.log(this.responseText);
var user = JSON.parse(this.responseText);
// console.log(user.name);
var output = '';
output +=
'<ul>'+
'<li>'+user.id+'</li>'+
'<li>'+user.name+'</li>'+
'<li>'+user.email+'</li>'+
'</ul>';
;
document.getElementById('user').innerHTML = output;
}
}
xhr.send();
}
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","users.json",true);
xhr.onload = function(){
if (this.status == 200) {
var users = JSON.parse(this.responseText);
var output = '';
// 遍历数组
for(var i in users){
output +=
'<ul>'+
'<li>'+users[i].id+'</li>'+
'<li>'+users[i].name+'</li>'+
'<li>'+users[i].email+'</li>'+
'</ul>';
;
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>
</body>
</html>
Ajax 3 - 请求Github接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.请求Github接口</title>
<style>
.user{
display: flex;
background: #f4f4f4;
padding: 10px;
margin-bottom: 10px;
}
.user ul{
list-style: none;
}
</style>
</head>
<body>
<button id="button">请求Github接口</button>
<br><br>
<h1>所有Github的用户信息</h1>
<div id="users"></div>
<script>
document.getElementById('button').addEventListener('click',loadUsers);
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","https://api.github.com/users",true);
xhr.onload = function(){
var users = JSON.parse(this.responseText);
// console.log(users);
var output = '';
for(var i in users){
output += `
<div class="user">
<img src="${users[i].avatar_url}" width="70" height="70" />
<ul>
<li>ID: ${users[i].id}</li>
<li>Login: ${users[i].login}</li>
</ul>
</div>
`;
}
document.getElementById('users').innerHTML = output;
}
xhr.send();
}
</script>
</body>
</html>
Ajax 4 - 请求PHP接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 4 - 请求PHP接口</title>
</head>
<body>
<button id="button">获取PHP数据</button>
<br><br>
<h1>正常表单GET提交数据到PHP</h1>
<form action="process.php" method="GET">
<input type="text" name="name">
<input type="submit" value="提交">
</form>
<h1>Ajax请求数据GET</h1>
<form id="getForm">
<input type="text" name="name" id="name1">
<input type="submit" value="提交">
</form>
<h1>正常表单POST提交数据到PHP</h1>
<form action="process.php" method="POST">
<input type="text" name="name">
<input type="submit" value="提交">
</form>
<h1>Ajax请求数据POST</h1>
<form id="postForm">
<input type="text" name="name" id="name2">
<input type="submit" value="提交">
</form>
<script>
document.getElementById('button').addEventListener('click',getData);
document.getElementById('getForm').addEventListener('submit',getForm);
document.getElementById('postForm').addEventListener('submit',postForm);
function getData(){
var xhr = new XMLHttpRequest();
xhr.open('GET',"process.php?name=Henry",true);
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send();
}
function getForm(e){
e.preventDefault();
var name = document.getElementById('name1').value;
var xhr = new XMLHttpRequest();
xhr.open('GET',"process.php?name="+name,true);
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send();
}
function postForm(e){
e.preventDefault();
var name = document.getElementById('name2').value;
var params = "name="+name;
var xhr = new XMLHttpRequest();
xhr.open('POST',"process.php",true);
// 设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send(params);
}
</script>
</body>
</html>
Ajax 5 - 请求PHP数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 5 - 请求PHP数据</title>
</head>
<body>
<button id="button2">请求所有用户</button>
<br><br>
<h1>所有用户</h1>
<div id="users"></div>
<script>
document.getElementById('button2').addEventListener('click',loadUsers);
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open("GET","users.php",true);
xhr.onload = function(){
if (this.status == 200) {
var users = JSON.parse(this.responseText);
var output = '';
// 遍历数组
for(var i in users){
output +=
'<ul>'+
'<li>'+users[i].id+'</li>'+
'<li>'+users[i].name+'</li>'+
'</ul>';
;
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>
</body>
</html>
php文件-user.php
<?php
$conn = mysqli_connect("localhost","root","","ajaxtest");
$query = 'SELECT * FROM users';
$result = mysqli_query($conn,$query);
$users = mysqli_fetch_all($result,MYSQLI_ASSOC);
echo json_encode($users);
?>
php文件-process.php
<?php
# echo "Hello World!";
if (isset($_GET['name'])) {
echo "GET: 你的名字是". $_GET['name'];
}
# 连接数据库
$conn = mysqli_connect("localhost","root",'','ajaxtest');
if (isset($_POST['name'])) {
// echo "POST: 你的名字是". $_POST['name'];
# 将拿到的数据转化一下
$name = mysqli_real_escape_string($conn,$_POST['name']);
$query = "INSERT INTO users(name) VALUES('$name')";
mysqli_query($conn,"set name utf8");
if(mysqli_query($conn,$query)){
echo '用户添加成功!';
}else{
echo "用户添加失败!".mysqli_error($conn);
}
}
?>
json文件-user.json
{
"id":1,
"name":"henry",
"email":"henry@gmail.com"
}
json文件-users.json
[
{
"id":1,
"name":"Henry",
"email":"henry@gmail.com"
},
{
"id":2,
"name":"Bucky",
"email":"bucky@gmail.com"
},
{
"id":3,
"name":"Hemiah",
"email":"27732357@qq.com"
}
]
