ajax

ajax不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

XMLHttpRequest 是 AJAX 的基础。

使用ajax

​ 1、必须基于xhr对象，创建xhr对象

var xhr = null;
// xhr = new XMLHttpRequest();  //w3c规范以后
// xhr = new ActiveXObject("Microsoft.XMLHTTP"); //ie5及以前
if(window.XMLHttpRequest){    //做兼容性处理，看window底下是否含有XMLHttpRequest对象
	xhr = new XMLHttpRequest()
}else{
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

​ 2、绑定监听函数

xhr.onreadystatechange = function(){
	//console.log('XHR的状态码发生改变');
	//console.log(xhr.readyState);   状态码
	//console.log(xhr.status);    响应码
	//console.log(xhr.responseText)  服务端返回的内容
}

​ 3、建立连接

xhr.open(method,url,boolean)

​ 4、发送请求

xhr.send()

xhr.readyState 有五个步骤，分别对应的是01234
0 未建立连接（请求未初始化，在调用open()之前）
1 请求以提出（调用send()之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 ajax请求发送并且响应完成（可以访问服务器响应并使用它）

使用js实现ajax请求

get请求
1、准备好后台
2、添加html页面

<h3>注册新用户</h3>
用户名: <input type="text" id="username">
<span id="uname_msg"></span>
<br>
密码：<input type="text">
<br>
<button>提交</button>

3、添加js做ajax请求

document.getElementById("username").onblur = function(){
	// console.log('blur')
	var uname = this.value
	if(uname == ""){   //严谨的正则判断，如果正则都不能通过，肯定不能发送ajax请求
		return;
	}
	// 1.创建
	var xhr = null;
	if(window.XMLHttpRequest){    //做兼容性处理，看window底下是否含有XMLHttpRequest对象
		xhr = new XMLHttpRequest()
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.绑定监听函数
	xhr.onreadystatechange = function(){
		// console.log(xhr.responseText);  //会输出4次，因为状态码改变了4次
		if(xhr.readyState == 4){   //ajax请求已经完成
			if(xhr.status == 200){   //这是一个成功的请求
				console.log(xhr.responseText) //服务端的返回值
				responseText(xhr.responseText)
			}
		}
	}
	// 3.建立连接
	xhr.open("GET","04.php?username=" + uname,true);
	// 4.发送请求
	xhr.send(null) //get请求的参数都已经到地址栏中，所以这里可以发送空

}


function responseText(txt){
	var span = document.getElementById("uname_msg");
	if(txt == "0"){
		span.innerHTML = "该用户名可以使用";
		span.style.color = "green";
	}else if(txt == "1"){
		span.innerHTML = "该用户名已经被占用";
		span.style.color = "red";
	}else{
		span.innerHTML = "未知错误";
		span.style.color = "red";
	}
}

post请求

与get请求的第3,4步不同

// 3.建立连接
	xhr.open("POST","05.php",true);

	// 3.5post请求发送之前，必须设定发送的格式
	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

	// 4.发送请求
	xhr.send("stuName=" + username.value + "&score=" + userscore.value)  //post参数放在send中
 }