<body> ???<form method="post" action="login"> ???????用户名：<input id="user" type="text" name="username"> ???????密码：<input id="pwd" type="password" name="password"> ???????<input type="checkbox" id="auto" name="auto" value="1"/>七天免登录 ???????<input type="button" onclick="SubmitForm();" value="登录"> ???????<span class="err"></span> ???</form></body></html><script> ???var xhr=null; ???function SubmitForm(){ ???????var username=document.getElementById("user").value; ???????var pwd=document.getElementById(‘pwd‘).value; ???????var chkEle=document.getElementById(‘auto‘); ???????var chk=null; ???????if(chkEle.checked==true) ???????????chk=1; ???????else ???????????chk=0; ???????xhr=new XMLHttpRequest(); ???????/*参数 ???发送方式 ?发送地址 是否异步*/ ???????//xhr.open(‘GET‘,"/login",true); ???????xhr.open("POST","/login",true); ???????//当readystate值改变时会自动去触发对应函数，先对这个值进行判断，在决定对应的函数 ???????//0.未初始化，尚未调用open ???????//1.启动，调用了open未调用send ???????//2.发送，调用了send,未收到响应 ???????//3.接收，已经接收到了部分响应消息 ???????//4.完成，已经接收到所有的数据 ???????xhr.onreadystatechange =func; ???????//setRequestHeader(String header,String value)设置请求头 ???????//getAllResponseHeaders()获取所有响应头 ???????//getResponseHeader(String header)获取响应头中指定的header的值 ???????//void abort()终止请求 ???????//post发送数据需要设置请求头 ???????xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘) ???????//用于发送数据 ???????xhr.send(‘username=‘+username+‘;password=‘+pwd+‘;auto=‘+chk); ???????//String responseText ??服务器返回的数据字符串类型 ???????//XmlDocument responseXML 服务器返回的数据（xml对象） ???????//Number states 状态码 ???????//String statesText 状态码对应文本 ???} ???function func(){ ???????if(xhr.readyState == 4){ ???????????console.log(xhr.responseText); ???????????var data=xhr.responseText; ???????????var ret_dict = JSON.parse(data); ???????????if(ret_dict.status){ ???????????????//登录成功 ???????????}else{ ???????????????//登录失败 ???????????????var ele=document.getElementsByClassName(‘err‘)[0]; ???????????????ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>" ???????????} ???????} ???}</script>原生ajax使用（1）
原文地址：https://www.cnblogs.com/ssyfj/p/8521766.html