AJAX异步请求——练习

最新推荐文章于 2021-08-05 16:19:54 发布

原创最新推荐文章于 2021-08-05 16:19:54 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

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