76 lines
2.2 KiB
HTML
76 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ajax</title>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
|
||
<ul></ul>
|
||
|
||
|
||
</body>
|
||
|
||
<script>
|
||
|
||
// ajax 一种无刷新的前后端数据交互的方式
|
||
// 传统的（以前）web开发：后端渲染
|
||
// 缺点：导致页面中的代码量十分的庞大，并且代码很乱，很杂（php，js，css，html，mysql）
|
||
// 前后端沟通成本很高
|
||
|
||
// 现在的前后端分离的开发方式（ajax + json）
|
||
// 后端：和数据库打交道，负责存储或者读取数据格式化成json格式，然后给前端
|
||
// 前端：使用ajax调用后端给的接口来获取数据，然后渲染到页面上给用户看。
|
||
|
||
// 创建一个ajax 拿出手机
|
||
var http = new XMLHttpRequest();
|
||
|
||
// 配置ajax请求方式 相当于设置拨号的号码
|
||
http.open("GET", 'http://127.0.0.1/index.php?username=lb122&pwd=1234567890')
|
||
|
||
// 发送请求
|
||
http.send()
|
||
|
||
// 监听ajax发送状态
|
||
http.onreadystatechange = function () {
|
||
if (http.readyState == 4 ) { // 浏览器自带的
|
||
if (http.status == 200) { // 浏览器自带的
|
||
|
||
var res = JSON.parse(http.responseText);
|
||
if (res.status == 200) {
|
||
alert(res.message)
|
||
} else {
|
||
alert(res.message)
|
||
|
||
}
|
||
// res.result.forEach((val) => {
|
||
// document.querySelector("ul").innerHTML += `<li>${val.title}</li>`
|
||
// });
|
||
} else {
|
||
alert("网络不好")
|
||
}
|
||
|
||
}
|
||
}
|
||
// var diver = new XMLHttpRequest();
|
||
// diver.open("GET","1566561651616")
|
||
// diver.send()
|
||
// diver.onreadystatechange = function () {
|
||
// if(diver.readyState == 4){
|
||
// var res = JSON.parse(diver.responseText);
|
||
// if (diver.status == 200) {
|
||
// alert(res.message)
|
||
|
||
// } else {
|
||
// alert(res.message)
|
||
// }
|
||
// } else {
|
||
// alert("网络不好")
|
||
// }
|
||
// }
|
||
|
||
</script>
|
||
</html> |