Ajax系列二-现代化的Ajax

核心–XMLHttpRequest对象，一个专门的HTTP请求工具

使用XMLHttpRequest做Ajax请求：

如何创建该对象

标准` new XMLHttpRequest()`
低版本`IE(678)`，`new ActiveXObject('Microsoft.XMLHTTP')`;新的`jQuery`已经抛弃IE6，**程序员不应该去迁就用户的坏习惯，有时候需要逼用户改变习惯。**

function createXHR(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else if(window.ActiveXObject){
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	} else{
		console.log('你的浏览器很奇怪。');
	}
	return xhr;
}

利用XHR发送请求来请求后台服务器资源

分析HTTP协议，请求需明确几个因素:
　　　1)请求方法：GET/POST/PUT/DELETE/HEAD
　　　2)请求哪个资源(URL)
　　　3)同步方式–同步/异步

如何得到请求返回结果

function vote(){
	//1. 制造xhr
	var xhr = createXHR();
	//2. 打开连接
	xhr.open('GET', './05-ajaxvote.php', true/false);
	//3. 发送请求
	xhr.send(null);
	//4. 测试同步异步的差异,改true/false
	//alert(xhr.responseText);
	//为避免误会用
	alert('123');

05-ajaxvote.php

sleep(3);//等待三秒
if(rand(1,10) < 4){
	echo "0";
}else{
	$votenum = file_get_contents("./vote.txt");
	if ($votenum == null) {
		$votenum = 0;
	}
	$votenum += 1;
	file_put_contents('./vote.txt', $votenum);	
	echo "1";
}

上面的测试结果显示，true即异步时，立即alert，”你等你的，我先走了”;false即同步时，等三秒才alert，”send返回后，才是下一步”。
综上，同步代码按顺序执行，异步代码可跳过等待的代码，先执行下面的代码，再返回执行。

XHR对象在请求与响应过程中，状态会不断变化，0-4逐步变化；可以绑定一个监听函数来监听状态的变化，只要状态变化就触发某函数。

xhr.onreadystatechange = function(){
	var pg = document.getElementById('progress');
	pg.innerHTML += pg.innerHTML + '现在的状态是 '+ this.readyState + '<br />';
}

只管readyState == 4的状态，其他不管。

xhr.onreadystatechange = function(){
	if(this.readyState == 4){
		if(this.responseText == '1'){
			document.getElementById('progress').innerHTML = '投票成功';
		}else if(this.responseText == '0'){
			document.getElementById('progress').innerHTML = '投票失败';
		}else{
			document.getElementById('progress').innerHTML = this.responseText;
		}
    }   
}

• 本文作者： Linking
• 本文链接： https://linking.fun/2016/02/27/Ajax系列二-现代化的Ajax/
• 版权声明： 版权所有，转载请注明出处！