前端项目积累和总结——AJAX异步更新网页技术

继前篇《前端项目积累和总结——表单验证》，今篇介绍前后端交互的常用技术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！