实现ajax的异步调用代码

html的部分:

请输入序号:<input type="text" id="keyword">

<button type="button" id="refer">查询</button>

<p id="content"></p>

<p style="font-weight: bold;">新建员工</p><br/>

员工姓名:<input id="newname"/><br/>

员工编号:<input id="newnumber"/><br/>

员工性别:<select id="newsex">

<option value="男">男</option>

<option value="女">女</option>

</select><br/>

员工职位:<input id="newjob"><br/>

<button type="button" id="save">保存</button><br/>

<p id="contents"></p>

js的部分:

<script>

 document.getElementById("refer").onclick=function(){

 var request =new XMLHttpRequest();

 request.open("GET","serverData.php?number="+document.getElementById("keyword").value);

 request.send();

 request.onreadystatechange=function(){

 if(request.readyState===4){

 if(request.status===200){

 document.getElementById("content").innerHTML=request.responseText;

 }else{

 alert("出现"+request.status+"错误");

 }

 }

 }

 }

 document.getElementById("save").onclick=function(){

var request=new XMLHttpRequest();

 request.open("POST","serverData.php");

 var data="name="+document.getElementById("newname").value+

 "&number="+document.getElementById("newnumber").value+

 "&sex="+document.getElementById("newsex").value+

 "&job="+document.getElementById("newjob").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("contents").innerHTML=request.responseText;

 }else {

 alert("出现"+request.status+"错误");

 }

 }

 }

 }

<script>