Ajax快速入门
2015-1-28????早 8:00
1.如何创建XHR对象
答：按标准 new XMLHttpRequest()即可以得到
????考虑低版本IE 可以使用new window.ActiveXObject((‘Microsoft.XMLHTTP‘));
????兼容性创建：
????function createXHR(){
????????var xhr = null;
????????if(window.XMLHttpRequest){
????????????xhr = new XMLHttpRequest();
????????}else if(window.ActiveXObject){
????????????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
????????}
????????return xhr;
}
?
2.如何利用XHR来发送请求
答：分析HTTP协议，要请求需要明确一下几个因素：
????(1).用什么方法请求
????????GET, POST, PUT, DELETE, HEAD
????(2).请求哪个资源？（url）
????(3).同步方式：同步/异步？
????????true：异步 false：同步
????????同步：程序顺序执行，返回值存储到xhr.responseText中
????????异步：html不用等待php返回，直接向下执行
?
?
单向投票代码：
????script代码：
function vote(){
????????//1.制造XHR
????????var xhr = createXHR();
????????//2.打开连接
????????xhr.open(‘GET‘,‘./vote.php‘,true); //true：异步 false：同步
????????//3.发送请求
????????xhr.send(null);
????????//alert("ok");
????????//绑定状态变化的回调函数
????????xhr.onreadystatechange = function(){
????????????var pg = document.getElementById(‘progress‘);
if(this.readyState == 4 && this.responseText == 1)
????????????????alert("投票成功了")????????
pg.innerHTML = pg.innerHTML +‘状态现在变成‘ +this.readyState;
????????}
?
}????
html代码：
<div>
????<p><img src="a.png"/></p>
????<p><input type="button" value="投票方法1" onclick="vote();"/></p>
????<div id="progress"></div>
?
</div>
vote.php中代码：
????<?php
????????//此处 sleep(2); //观察同步和异步的效果
$cnt = file_get_contents(‘./vote.txt‘);
$cnt += 1;
file_put_contents(‘./vote.txt‘,$cnt);
?>
?
3.如何获取请求的返回数据
答：XHR对象本身有一个属性：responseText 代表返回值
????xhr.open(‘GET‘,‘./02-vote.php‘,false);
alert(xhr.responseText);
?
4．如果使用异步，程序不等待响应而继续向下执行，如何知道之前的请求已经完成
答:XHR对象在请求与响应过程中，状态会不断发生变化（0-4）逐步变化
????我们可以绑定一个函数，监听状态的变化，只要状态变化就触发某个函数
????//绑定状态变化的回调函数
????xhr.onreadystatechange = function(){
????????var pg = document.getElementById(‘progress‘);
if(this.readyState == 4 && this.responseText == 1)
????????????alert("投票成功了")????????
pg.innerHTML = pg.innerHTML +‘状态现在变成‘ +this.readyState;
????}
????
????XHR 的readyState当变到4时，就意味着请求完毕。
?
?
