继前篇《前端项目积累和总结——表单验证》,今篇介绍前后端交互的常用技术AJAX。
积累:(二)AJAX技术
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),用于和服务器端交互数据并动态局部更新网页(不需要重新加载整个网页,以减少页面重写带来的服务器端负荷)。
AJAX基础知识:https://www.w3cschool.cn/ajax/nr583fns.html
1. 原理
2. 实例
(1)HTML
一个添加用户的表单如下:
<div class="useredit-box center">
<div class="useredit-left">
<div class="useredit-tit-container center">
<i class="fa fa-user-plus fa-2x"></i>
<span class="useredit-tit">添加用户</span>
</div>
</div><!-- useredit-left end -->
<div class="useredit-right">
<form class="useredit-form" id="useredit-form">
<div class="useradd-right-top" id="add-form-top">
<div class="control-group">
<label class="control-label" for="name">账 号:</label>
<input type="text" class="control-name" name="name" id="add-name"/>
</div>
<span class="add-msg"></span>
<div class="control-group">
<label class="control-label"for="passwd">密 码:</label>
<input type="password" class="control-pwd" name="passwd" id="add-pwd"/>
</div>
<span class="add-msg"></span>
<div class="control-group">
<label class="control-label"for="secondPasswd">确认密码:</label>
<input type="password" class="control-pwd" name="secondPasswd" id="add-repwd"/>
</div>
<span class="add-msg"></span>
</div><!-- useredit-right-top end -->
<div class="useradd-right-mid" id="add-form-mid">
</div><!-- useredit-right-mid end -->
<div class="useradd-right-bottom">
<div class="control-group">
<label class="control-label" for="adminPasswd">管理员账号密码:</label>
<input type="password" class="control-pwd" name="adminPasswd" id="add-adminpwd"/><br>
</div>
<div class="control-group">
<input class="control-confirm" type="button" value='确认' οnclick="user_create()" id="add-btn">
<input class="control-cancel" type="button" value='取消' οnclick="close_user_add_win()">
</div>
</div><!-- useredit-right-bottom end -->
</form>
</div><!-- useredit-right end -->
</div><!-- useredit-box end -->
(2)JavaScript
封装一个函数loadXMLDoc(url, sendStr, cfunc),向服务器端发送http请求,其中XMLHttpRequest对象用于数据交换,open()方法规定请求的类型、URL 以及是否异步处理请求;send()方法发送请求。
var xmlhttp;
//发送post请求
function loadXMLDoc(url, sendStr, cfunc) {
if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp = new XMLHttpRequest();
}
else {// IE6, IE5 代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("post", url, true);
xmlhttp.send(sendStr);
}
发送表单上的数据,调用函数loadXMLDoc(url, sendStr, cfunc),接收后端返回的数据进行相应处理。
//添加用户
function user_create() {
//用户名
var str = "";
str += "name=";
str += document.getElementById("add-name").value;
str += '&';
//密码
str += "passwd=";
str += document.getElementById("add-pwd").value;
str += '&';
//确认密码
str += "secondPasswd=";
str += document.getElementById("add-repwd").value;
str += '&';
//管理员密码
str += "adminPasswd=";
str += document.getElementById("add-adminpwd").value;
loadXMLDoc("/user/create", str, function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
if (xmlhttp.responseText == '创建成功!'){
alert(xmlhttp.responseText);
user_enum();
close_user_add_win();
}
else
{
alert(xmlhttp.responseText);
}
}
})
}
(3)实际效果
后记:
This is the second time , feel so better than first time!