Ajax基本知识

发表于 | 分类于

Ajax本质：

在页面不刷新的情况下，利用XMLHttpRequest发送HTTP请求，可以看做JS的网络化

1
2
3
4
5
6
7
8
9
10
function vote(){
	//1、创建XMLHttpRequest对象
	var xhr = new XMLHttpRequest();	
	//2、打开连接，第一个参数表弟传值方式，第二个表示请求哪个页面进行处理，true表示异步，false表示同步	
	xhr = open('GET','./test.php',true);
	//3、发送请求	
	xhr.send(null);
	//4、输出返回值	
	alert(xhr.responseText);
}

  • Ajax同步表示发送完请求之后，要等到xhr.responseText拿到返回值才执行第四步，而异步是执行完发送请求后，直接执行第四步，并不需要等待，也不关心xhr.responseText是否拿到返回值

  • 如果使用异步方式，如何知道请求发送完成这个状态呢？这就需要使用onreadystatechange这个属性进行绑定回调函数了

1
2
3
xhr.onreadystatechange = function (){
    alert('请求成功');
}
  • Ajax不能实现文件上传，因为其调用的XMLHttpRequest对象是属于JS的，但是出于安全考虑JS的对象不能访问本地文件

使用POST方式进行传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function vote(){
	//1、创建XMLHttpRequest对象
	var xhr = new XMLHttpRequest();	
	//2、打开连接		
	xhr = open('POST','./test.php',true);
	//3、收集表单数据
	var uname = document.getElementById('uname').value;
	var email = document.getElementById('email').value;
	//4、发送请求	
	xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
	xhr.send('username='+uname+'&email='=email);
	//5、输出返回值	
	alert(xhr.responseText);
}