核心对象

概念

核心对象是XMLHttpRequest，它可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。

属性

readyState 表示一种状态
Onreadystatechange每次状态改变所触发事件的事件处理程序
ResponseText从服务器进程返回的数据的字符串形式
ResponseXML从服务器进程返回的XML文档数据对象
Status从服务器返回的数字代码 404或200
StatusText 伴随状态码的字符串信息

ReadyState

01234 取值
未初始化，发送，发送，正在接受，已加载

Onreadystatechange 通常只需在readystate等于4时做数据的获取和处理工作

ResponseText

属性：
当readystate值为012，responseText包含一个空字符串
当readyState值为3，正接收，响应中包含客户端还未完成的响应信息
当readystate值为4，已加载，包含完整的响应信息，

ResponseXML

属性：用于当接收到完整的HTTP响应时，readystate 为4
描述XML响应。
此时content-type头部指定MIME类型为text/xml，application/xml或以xml结尾
如果不包含这些媒体类型之一 值为null
如果readystate不为4 值为null，是只是一个文档接口类型的对象
如果文档不是良构，或不支持文档相应的字符编码，ResponseXML的值为将为null

Status

属性
描述了HTTP状态码
类型为short
仅当readystate为3或者4时，属性才可用
当readystate小于3时，试图存取status的值将发生一个异常
常用的HTTP状态码
200请求成功
202请求被接受但处理未完成
400错误请求
404请求资源未找到
500内部服务器错误
可根据status获取的状态码对响应结果进行有针对性的处理

Statustext

属性
描述了HTTP状态码文本
并且仅当readystate为3或4时，才可以使用，当readystate为其他值时，试图存取将引发一个异常

案例

window.onload = function() {
			var btn = document.getElementById('btn');
			btn.onclick = function() {
				var uname = document.getElementById('username').value;
				var pass = document.getElementById('pass').value;
				//使用ajax发送请求
				// 1.创建XMLHttpRequest对象
					/*
					XMLHttpRequest 建立客户端和服务器端的通信
					
					var xhr = new XMLHttpRequest(); //标准浏览器 ie7-11 chrome firefox
					var xhr=new ActiveXObject("Microsoft.XMLHTTP"); //IE6
										
				*/
				//var xhr=new ActiveXObject("Microsoft.XMLHTTP");
				//console.log(xhr);
				//var xhr = new XMLHttpRequest();
				//console.log(xhr);


				//创建核心对象的标准写法
				var xhr=null;
				if(window.XMLHttpRequest){
					xhr=new XMLHttpRequest();//标准浏览器的写法
				}else{
					xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6
				}

				//非标准写法 异常捕获机制
				try{
					xhr=new XMLHttpRequest();
				}catch{
					xhr=new ActiveXObject("Microsoft.XMLHTTP");
				}


				// 2.准备发送
					/*
					参数一：请求方式(get获取数据  post提交数据)
					参数二：请求地址
					参数三：同步或者异步的标识符 默认true 表示异步 false 表示同步

					post 请求参数放在send中传递 不需要进行encodeURI编码
					必须设置请求头信息
				*/
				xhr.open('get','check.php?username=' + uname + '&password=' + pass, true);
				// 3.执行发送
				xhr.send(null);
				// 4.指定回调函数
				/*
					readyState
						0  对象创建成功
						1  表示已经发送了请求
						2  浏览器已经收到了服务器响应的数据
						3  正在解析数据
						4  数据解析完成  可以使用了
				*/
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						if (xhr.status =200) {
							var data = xhr.responseText;
							var info = document.getElementById('info');
							if (data == '1') {
								info.innerHTML = '登陆成功'
							}else {
								info.innerHTML = '用户名或密码错误';
							}
						}
					}
				}
			}
		}

<form>
		用户名：<input type="text" name="username" id="username">
		<span id="info"></span>
		<br>
		密码：<input type="password" name="pass" id="pass">
		<input type="button" value="登录" id="btn">
	</form>