Ajax全接触

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工的查询和添加</title>
<style type="text/css">
body,input,button,select,h1{
    font-size:30px;
    line-height:1.8;
    }
</style>
</head>

<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工创建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="staffName" /><br />
<label>请输入员工编号:</label>
<input type="text" id="staffNumber" /><br />
<label>请输入员工性别:</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br />
<label>请输入员工职位:</label>
<input type="text" id="staffJob" /><br />
<button id="save">保存</button>
<p id="createResult"></p>

<script>
    document.getElementById("search").onclick = function(){
    var request = new XMLHttpRequest();
    request.open("GET","server.php?number="+document.getElementById("keyword").value);
    request.send();    
    request.onreadystatechange = function(){
        if(request.readyState===4){
            if(request.status===200){
                document.getElementById("searchResult").innerHTML = request.responseText;
            }else{
                alert("发生错误"+request.status);
            }
        }    
    }    
}

    document.getElementById("save").onclick = function(){
    var request = new XMLHttpRequest();
    request.open("POST","server.php");
    var data = "name="+document.getElementById("staffName").value
                +"&number="+document.getElementById("staffNumber").value
                +"&sex="+document.getElementById("staffSex").value
                +"&job="+document.getElementById("staffJob").value;
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send(data);    
    request.onreadystatechange = function(){
        if(request.readyState===4){
            if(request.status===200){
                document.getElementById("createResult").innerHTML = request.responseText;
            }else{
                alert("发生错误"+request.status);
            }
        }    
    }    
}
</script>
</body>
</html>

相关阅读:
常用SEO优化工具
OA系统中常用信息提示窗体
VB.NET 操作注册表
js截取字符串处理
JavaScript中常用的对象和属性
优化ASP.NET性能
jquery线上引用无需本地包 Jim
css 超出盒子滚动，不显示滚动条 Jim
常用判断js数据类型 Jim
amonthpicker 禁止当前完后月份，禁止当前往前推2月份 Jim

原文地址：https://www.cnblogs.com/Arther-J/p/5442140.html