Ajax异步请求

为什么要使用Ajax

在没有使用ajax技术时，前端要和服务器做交互是一个一来一回的过程。在前端通过HTTP协议向服务器发送请求时，要等待服务器的回应才能做下一步的操作，这给与了用户很不好的体验感。

什么Ajax

ajax是前端异步请求后台数据的技术，能做到在前端不刷新网页的情况下，获取后台数据在前端做显示，能给与用户很好的体验感。

Ajax应用案例

1.百度搜索响应栏

2.部分网页登录页面的即时验证功能

Ajax工作原理

传统的前端请求

传统的请求是直接的一来一回的过程：
浏览器 ----服务器

ajax请求

现在所有的浏览器中都会内置ajax引擎，在浏览器发送请求时，会先把请求交给ajax引擎，再由ajax引擎与服务器进行交互。服务器响应回来的数据也会通过ajax引擎再发送给浏览器。ajax发送请求和反馈数据给浏览器都是一个异步的过程。就像之前要想写信给某一个人，需要自己亲手去送。现在邮局出现了，我们只要把信件交给邮局处理就可以了。交给邮局以后，我们就可以做自己的活动了。这里的邮局就是ajax引擎。

实现步骤

1. 创建XMLHttpRequest对象
   不同的浏览器内核有着不同的XMLHttpRequest对象
   对于XMLHttpRequest对象专门创建一个js函数来获取

function createRequest(){
			var request;
			var reqs = [
				//火狐或者Google
				function(){return new XMLHttpRequest();},
				//IE浏览器有下面这三种类型
				function(){return new ActiveXObject("Msmxl12.XMLHTTP");},
				function(){return new ActiveXObject("Msxml13.XMLHTTP");},
				function(){return new ActiveXObject("MicroSoft.XMLHTTP")}
			];
			for(var i = 0;i < reqs.length;i++){
				try{
					request = reqs[i]();//判断是那种浏览器
				}catch(e){
				
				}
			}
			return request;
		}

2. 使用XMLHttpRequest对象创建请求

request.open(“get”,“ajaxDemo?pid=0”);
第一个参数为请求方式，第二参数为请求路径

3. 监听response对象，编写回调函数处理服务器返回的数据
4. 使用XMLHttpRequest对象发送请求

request.send(null);
send()函数用户传递参数，如果没有参数就写null也可以不写，注意如果是火狐浏览器必须写null,不然报错。

代码实现

function ajaxDemo() {
			var request;
			if(window.XMLHttpRequest){
				request = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				request = new ActiveXObject();
			}
			//使用XMLHttpRequest对象创建请求
			request.open("get","ajaxDemo?pid=0");
			//回调函数，
			request.onreadystatechange = function() {
			//判断请求状态
				if(request.readyState == 4){
				//获得后台传来的文本数据
					var date = request.responseText;
					eval("var j "+date);
					var country = "<select name='country'>";
					for(var i = 0;i<j.length;i++){
						country += "<option value='"+j[i].c_id+"'>'"+j[i].c+"'</optio>"
					}
					country += "</select>";
					document.getElementById("msg").innerHTML = "<h1>"+date+"</h1>";
				}
			}
			//使用XMLHttpRequest对象发送请求,send()函数用户传递参数，如果没有参数就写null也可以不写，注意如果是火狐浏览器必须写null,不然报错。
			request.send(null);
		}

状态码