- 什么是XMLHttpRequest?
-
XMLHttpRequest对象用于在后台与服务器交换数据
-
- XMLHttpRequst的作用
-
在不重新加载页面的情况下更新网页
-
在页面已加载后从服务器请求数据
-
在页面已加载后从服务器接收数据
-
在后台向服务器发送数据
-
- 若出现Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
- 设置请求头必须在open打开之后,send之前
- JS实现异步提交
<!--
onchange触发事件必须满足两个条件:
(1)当前对象属性发生改变
(2)当前对象失去焦点
-->
<input type="text" name="username" id="username" placeholder="请输入用户名" >var username = document.getElementById("username");
/**
* 获取XMLHttpRequestObject对象
*/
function getXMLHttpRequestObject(url, param) {
//创建XMLHttpRequest对象
var xmlhttp;
//为了应对所有现代浏览器,检查是否支持XMLHttpRequst,若支持则创建XMLHttpRequest对象,若不支持,则创建ActiveXObject对象
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//规定请求的类型、URL、是否异步请求
xmlhttp.open('get', url + '?' + param, true);
//添加请求头必须在open打开之后,send之前
//想请求添加Http请求头
xmlhttp.setRequestHeader("Context-type", "application/x-www-form-urlencoded");
//将请求发送到服务器
xmlhttp.send();
return xmlhttp;
}/**
* 验证用户名
*/
username.onchange = function () {
var usernameValue = username.value;
var param = "username=" + usernameValue
var url = "/register";
var xmlhttp = getXMLHttpRequestObject(url, param);
//设置监听函数,若为true时,在事件中的就绪状态时执行函数
xmlhttp.onreadystatechange = function () {
//判断请求是否成功,每当readyState属性改变时,就会调用该函数
//readyState的状态:0(请求未初始化)、1(服务器连接已建立)、2(请求已接收)、3(请求处理中)、4(请求已完成,且响应已就绪)
//status的状态:200(ok),404(未找到页面)
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应,通过
//responseText:获取字符串形式的响应数据
//responseXML:获取XML形式的响应数据
console.log(xmlhttp.responseText);
}
}
}@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.println("我已经收到你的来信了");
}