AJAX异步请求——练习

利用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协议规定：请求消息传递给服务器的数据中不能包含中文、特殊标点符号