原生AJAX
2018-06-19 本文已影响0人
卖参
<!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>
/*
数据请求的过程
1. 浏览器的AJAX引擎(XMLHttpRequest) 向服务器发起请求
2. 服务器查询数据库
3. 数据库对数据进行处理,响应给浏览器的AJAX 引擎
4. AJAX 引擎触发回调函数,更新web界面
数据交互:从浏览器到服务器 ,再从服务器到浏览器
ajax 的交互模型
1. XMLHttpRequest 电话 创建ajxa对象
2. open 输入电话号码 填写地址
3个参数
A. 请求的方式(get,post)
B. url user是一个字段,就是后端给你的请求的字段,接口
$username = $_GET['user'] -----php
一般拿到数据需要想的三件事
1. 数据长得什么样
2. 字段都什么意思
3. 返回的结果是什么样的
C. 是否异步
3. send() 呼叫按钮的按下 发送请求
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
