2、ajax四个步骤

1.使用场景：网页异步刷新。需要在不加载整个页面的情况下获取到后端数据。

2.案例准备

1.准备后端php文件与服务环境，使用get/post获取到html文件数据
2.准备html文件,创建一个输入框和一个按钮，给按钮添加点击事件函数，使点击按钮时通过ajax获取到后端文件

			<input type="text" name="username" id="username" value="" />
	 		<input type="button" name="btn" id="btn" value="校验" />

首先获取到input输入框数据

var username_value = document.getElementById('username').value;

3.四个步骤

1.创建XMLHttpRequest实例化对象,注意IE6的兼容处理

					var xhr = null;
					if (window.XMLHttpRequest) { //如果电脑中有XMLHttpRequest对象
						xhr = new XMLHttpRequest();
					} else {
						// 电脑处于ie6浏览器状态
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}

2.open 准备发送

如果是get方法发送

注意：a.php?username=" + username_value中,username指输入框id名称，username_value指输入框的值

 xhr.open("get", "a.php?username=" + username_value, true);

如果是post方法发送

xhr.open("post","a.php",true);
var param="username="+username_value;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求体信息,仅适用于post

3.send 执行发送

如果是get方法发送

xhr.send(null);

如果是post方法发送

xhr.send(param);//post请求参数在请求体中

4.回调函数

					xhr.onreadystatechange = function() {
						// xhr.status服务器访问状态,xhr.readyState 数据解析
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								wrong[0].innerHTML = result;
							}

						}
					}

4.代码

					var username_value = document.getElementById('username').value;//username_value 按情况而定
					// 1.创建XMLHttpRequest实例化对象,注意IE6的兼容处理
					var xhr = null;
					if (window.XMLHttpRequest) { //如果电脑中有XMLHttpRequest对象
						xhr = new XMLHttpRequest();
					} else {
						// 电脑处于ie6浏览器状态
						xhr = ActiveXObject("Microsoft.XMLHTTP");
					}
					// 2.open  准备发送// 3.send 执行发送
					// (1)get方法得到数据时
					// xhr.open("get", "a.php?username=" + username_value, true);
					// xhr.send(null);
					//(2) post方法得到数据时
					xhr.open("post","a.php",true);
					var param="username="+username_value;
					xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求体信息,仅适用于post
					xhr.send(param);//post请求参数在请求体中
					// 4.回调函数
					xhr.onreadystatechange = function() {
						// xhr.status服务器访问状态,xhr.readyState 数据解析
						if (xhr.readyState == 4) {
							if (xhr.status == 200) {
								var result = xhr.responseText;
								console.log(result);
							}

						}
					}