前端的第二十七天
一、预定义变量
1.$_GET get请求
参数在url中，以?进行连接，多个参数以&符号进行连接。
所有的参数都是key value 键值对的形式出现。一个key对应一个值
2.$_POST post请求
请求参数在请求体中
二、使用AJAX来实现局部刷新
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
兼容处理
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE6
}
2.准备发送
请求方式
请求地址
同步或者异步
3.执行发送动作
xhr.send(null);
4.指定回调函数
三、同步和异步的理解
1.js是单线程的
2.浏览器不是单线程的
Http请求线程
3.事件队列
四、get和post完整代码演示
1.get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>点击的时候发送请求报文 --不刷新页面</h2>
<input type="button" value="get请求" name="" id="">
<h3></h3>
</body>
</html>
<script>
//点击事件
document.querySelector('input').onclick = function(){
var xhrt = new XMLHttpRequest();
xhrt.open('get','getData.php?name=rose&skill=swim');
xhrt.onload = function(){
console.log(xhrt.responseText);
// 修改页面的dom元素
document.querySelector('h3').innerHTML =
xhrt.responseText
}
xhrt.send(null);
}
</script>
2.post方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>ajax发送post请求</h2>
<input type="button" value="post发送请求">
</body>
</html>
<script>
document.querySelector('input').onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('post','postData.php')
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onload = function(){
console.log(xhr.responseText);
}
// post请求发送数据 写在send中
// key=value&key2=value2
xhr.send('name=西兰花&friend=鸡蛋');
}
</script>
3.思路
1. 浏览器端
input type = test
失去焦点事件
不刷新页面的情况下发送请求 ---ajax
xxx.php?name=inputDom.value
.onload
.send()
2. 服务器端
接受提交的数据 $_GET
模拟数据 =》 数组
判断是否在数组中存在
返回不同的内容给用户即可
恭喜你可以用
很遗憾用不了
3. 渲染到页面上
找到一个标签 修改内容即可