<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
用戶名:<input type='text' id='text1' />
<input type='button' id='btn' value='點擊注冊' />
<script>
/*
數(shù)據(jù)請求的過程
1. 瀏覽器的AJAX引擎(XMLHttpRequest) 向服務(wù)器發(fā)起請求
2. 服務(wù)器查詢數(shù)據(jù)庫
3. 數(shù)據(jù)庫對數(shù)據(jù)進行處理,響應(yīng)給瀏覽器的AJAX 引擎
4. AJAX 引擎觸發(fā)回調(diào)函數(shù),更新web界面
數(shù)據(jù)交互:從瀏覽器到服務(wù)器 ,再從服務(wù)器到瀏覽器
ajax 的交互模型
1. XMLHttpRequest 電話 創(chuàng)建ajxa對象
2. open 輸入電話號碼 填寫地址
3個參數(shù)
A. 請求的方式(get,post)
B. url user是一個字段,就是后端給你的請求的字段,接口
$username = $_GET['user'] -----php
一般拿到數(shù)據(jù)需要想的三件事
1. 數(shù)據(jù)長得什么樣
2. 字段都什么意思
3. 返回的結(jié)果是什么樣的
C. 是否異步
3. send() 呼叫按鈕的按下 發(fā)送請求
4. onload 通話成功 等待
5. ajax.responseText 收到 請求
喂?
*/
let btn = document.getElementById("btn");
let text = document.getElementById("text1");
btn.onclick = function () {
let ajax = new XMLHttpRequest () ; //
ajax.open('get','php/get.php?user='+text.value,true);
ajax.send();
ajax.onload = function () {
console.log(ajax.responseText)
}
}
</script>
</body>
</html>
sad
