6-应用中get和post的区别处理 16:51
案例9.ajax.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','2.get.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>
2.get.php
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_GET['username'];
$age = $_GET['age'];
echo "你的名字：{$username}，年龄：{$age}";
知识点一，你用浏览器看到的php文件内容，就是你用ajax得到的内容
9-php文件内容和ajax获取到的一样.gif
前情回顾：
知识点二，Get和Post的区别：
-
传输方式的区别
Get通过url地址传输
Post通过浏览器内部传输 -
传输数据量
Get有数据量限制，每个浏览器都不同
Post理论上无限
知识点三，后端数据的接收：
- $_GET
- 通过URL传递给该脚本的变量的数组
- $_POST
- 通过HTTP POST方法（表单）传递给该脚本的变量的数组
- 前后台键名和传输方式必须一致
- 数据传输方式
- 数据获取方式
GET方式：
get方式通过URL地址传输：
把数据名称和数据值用=连接，如果有多个的话，会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面（见效果图）
举例说明：
xhr.open('get','2.get.php?username=leo&age=30',true);
具体根据后端给提供的接口，自己去
使用get方式要注意的问题：
- 1.IE缓存问题: IE浏览器下，数据无法随着后端数据的改变而动态更新？
解决方案：在url？后面连接一个随机数，时间戳
xhr.open('get','2.get.php?username=leo&age=30&' + new Date().getTime(),true);
如图：
10-get缓存IE问题.gif
- 2.乱码 编码encodeURI
// xhr.open('get','2.get.php?username=小刘&age=30&'
+ new Date().getTime(),true);
xhr.open('get','2.get.php?username='+encodeURI('小刘')+'&age=30&'
+ new Date().getTime(),true);
如图所示：
10-getIE乱码问题.gif
POST方式：
1.post没有缓存问题，也无编码问题，因为数据格式声明已经编码
2.post方式，数据放在send()里面作为参数传递
xhr.open('post','2.post.php',true);
// post方式，数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded');//声明后端发送数据的类型
xhr.send('username=小刘&age=30');
POST方式如下图：
11-ajax-post方式.gif
网友评论