利用AJAX异步请求,实现点击不同按钮,客户端向服务器端请求该按钮对应大洲的国家名,并响应到客户端页面。
使用AJAX的步骤:
(1)创建XHR对象——XMLDOM对象
(2)绑定onreadystatechange事件监听函数
(3)创建请求消息
(4)发送请求消息
通过这四步实现点击 加载服务器端内容到客户端,先构建html内容: <div id="continents">
<button data-bar="bar1">亚洲</button>
<button data-bar="bar3">美洲</button>
<button data-bar="bar2">欧洲</button>
</div>
<br><br>
<fieldset>
<legend>
国家列表
</legend>
<div id="countryList"></div>
</fieldset>
当用户点击各大洲时,需要向服务器端发送请求消息,获得数据,反馈到客户端页面,下面是服务器端PHP内容:
<?php
header('Content-Type: text/plain');
$barList = [
'bar1'=>'中国,韩国,日本,新加坡',
'bar2'=>'美国,加拿大,墨西哥',
'bar3'=>'英国,德国,法国,希腊'
];
$barName = $_REQUEST['barName'];
$output = '';
foreach($barList as $k=>$v){
if($k===$barName){
$output = $v;
break;
}
}
if($output){
echo $output;
}else{
echo '查询的名称不存在';
}
?>
利用事件的冒泡机制,为html页面按钮的公共父元素绑定监听函数,利用AJAX四步实现异步请求,JavaScript代码:
<script>
document.querySelector('#continents').onclick = function(event){
var src = event.target || event.srcElement;
var barName = src.dataset.bar;
if(!barName){
return;
}
//1
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//2
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
console.log('XHR接收到了服务器返回的成功响应:');
console.log(xhr.responseText);
console.log(typeof(xhr.responseText));
document.querySelector('#countryList').innerHTML = xhr.responseText;
}else{
alert('不成功的响应');
}
}
}
//3
xhr.open('GET','1.php?barName='+barName, true);
//4
xhr.send( null );
}
</script>
当然,以上只是GET请求方式,POST请求方式与GET只有第三四步有差异,且增加了3.5步:
//3
xhr.open('POST', '1.php', true)
//3.5
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//4
xhr.send( '<span style="font-family: Arial, Helvetica, sans-serif;">barName='+barName</span><span style="font-family: Arial, Helvetica, sans-serif;">)</span>
如果没有设置请求头,POST请求会出现乱码,所以这一步非常重要。
请求消息的Content-Type头常用值:
text/plain : 客户端向服务器提交的请求主体是一些普通文本数据(未经编码)——很多Web服务器会直接拒绝接收这样的请求数据
application/x-www-form-urlencoded : 客户端向服务器提交的请求主体是经过了编码的文本数据——默认情况下,HTMLForm标签会把所有的表单数据编码之后再提交给服务器
multipart/form-data : 客户端向服务器提交的请求主体中包含上传的文件
注意:HTTP协议规定:请求消息传递给服务器的数据中不能包含中文、特殊标点符号