ajax请求学习之<XMLHttpRequest> ->xml格式传输数据

基础请求以xml格式传输数据

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Demo</title><style>body, input, select, button, h1 { font-size: 28px; line-height:1.7;}</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>

 

 

相关文章