AJAX同步/异步实现GET/POST请求

学习AJAX之前,首先要了解前端和后台交互的方式为get/post,AJAX请求就是为了实现get请求/post请求.

AJAX: 全称 Asynchronous Javascript And XML,是指一种创建交互式网页应用的网页开发技术。

AJAX有两种请求方式:

  (1)异步请求方式:客户端向服务器请求数据,不需要等待服务器给我们返回数据,在这个过程中主线程可以继续处理其他操作,当后台将数据返回之后,在重新处理对应的数据

 (2)同步请求方式(很少使用,几乎不用):客户端向服务器请求数据,必须等待服务器返回数据,然后再做其他页面处理.

AJAX 异步实现get请求

(1)创建请求对象     兼容性写法

        //1,创建 请求对象
		if (window.XMLHttpRequest) {
			//IE7+,及主流浏览器 
			var xhr = new XMLHttpRequest();
		} else{
			//IE 5, 6
			var xhr = ActiveXObject("Microsoft.XMLHTTP");
		}

(2)设置监听      监听 xhr对象的请求状态,并对获取到的后台数据进行处理

readyState: 请求对象的四种请求状态

 1:请求简历,但是没有发出去(没有执行send()方法)

 2:请求已经发送,正在处理

3:请求正在处理,并且应返回了部分数据

4:请求完成,获取到全部数据

    //onreadystatechange,每当 readyState 改变时，就会触发 onreadystatechange 事件。
    xhr.onreadystatechange = function(){
			console.log(xhr.readyState);	
			if(xhr.readyState == 4){
				//判断请求是否成功
				if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
			    //请求成功  			
		        } else{
			    //请求失败
		        }				
		    }
	}

(3)启动请求   

open(参数1,参数2,参数3)

参数1:请求方式是get/post

参数2:请求的地址,可以是相对地址,也可以是绝对地址

参数3:是否异步(默认为异步)

xhr.open("GET","http://127.0.0.1/PHP0706/AJAX/AJAX.php?userName=" + userN.value + "&userPass=" + userP.value);

(4)发送请求

send():发送请求,该方法接收一个参数,参数为要传递给后台的数据,如果没有数据要传递,则传入 null 即可 建议不要省略 null, 因为在某些浏览器中省略null的话, 会报错.

xhr.send(null);

AJAX 同步实现get请求

(1)创建请求对象

//1,创建 请求对象
		if (window.XMLHttpRequest) {
			//IE7+,及主流浏览器 
			var xhr = new XMLHttpRequest();
		} else{
			//IE 5, 6
			var xhr = ActiveXObject("Microsoft.XMLHTTP");
		}

(2)启动请求  GET请求需要将值拼接到url后面

xhr.open("GET","http://127.0.0.1/PHP0706/AJAX/AJAX.php?userName=" + userN.value + "&userPass=" + userP.value,false);

(3)发送请求

xhr.send(null);

(4)请求成功之后

status :         http 的状态码

1XX:信息类,收到请求正在处理

2XX:成功类,成功处理完成

3XX:重定向类,请求地址发生变化等(304:读取缓存文件)

4XX:客户端错误

5XX:服务器端错误,服务器识别不出,不能做出处理

responseText:作为响应主体被返回的文本

responseXML:如果响应的内容类型为 text/xml 或 application/xml 格式,这个responseXML 属性中存储的是对应的 XML DOM文档

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
			//请求成功
		} else{
			//请求失败
		}

AJAX异步实现POST请求

(1)创建请求对象

        if (window.XMLHttpRequest) {
			//IE7+,及主流浏览器 
			var xhr = new XMLHttpRequest();
		} else{
			//IE 5, 6
			var xhr = ActiveXObject("Microsoft.XMLHTTP");
		}	

(2)添加监听

xhr.onreadystatechange = function(){
	console.log(xhr.readyState);
	if(xhr.readyState == 4){
		//判断请求是否成功
		if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
		//请求成功			
		} else{
			//请求失败
		}	
				
	}
}

(3)启动请求  POST请求在url后面不需要拼接值

xhr.open("POST","http://127.0.0.1/PHP0706/AJAX/AJAX.php");

(4)设置请求头(GET方法不需要),后台不同的数据类型用不同的请求头,以下是发送表单数据的请求头

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

(5)发送请求,   POST请求方式,值要以send参数的形式传递

xhr.send("userName=" + userN.value + "&userPass=" + userP.value);