AJAX异步请求接收的三种实现方式

方式一：JS实现AJAX范例

window.onload = function () {
          document.getElementById("un").onblur = function () {
              var xmlhttp;
              if (window.XMLHttpRequest != null) {
                  xmlhttp = new XMLHttpRequest();
              }else {
                  xmlhttp = new ActiveXObject();
              }
              xmlhttp.open("GET","${pageContext.servletContext.contextPath}/ajax?sName="+document.getElementById("un").value,true);
              xmlhttp.send();

              xmlhttp.onreadystatechange = function () {
                  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      var div = document.getElementById("div");
                      var v = xmlhttp.responseText;
                      var vp = JSON.parse(v);
                      if (vp.userExist){
                          div.style.color="#ff0000";
                          div.innerText = vp.msg;
                      }else {
                          div.style.color="#00ff00";
                          div.innerText = vp.msg;
                      }

                  }
              }
          }
      }

方式二：JQ标准实现AJAX范例

$(function () {
          $("#un").blur(function () {
              $.ajax({
                  url:"${pageContext.servletContext.contextPath}/ajax",
                  type:"POST",
                  data:{"sName":$("#un").val()},
                  success:function (data) {
                      if (data.userExist) {
                          $("#div").css("color","red").text(data.msg);
                      } else {
                          $("#div").css("color","green").text(data.msg);
                      }
                  },
                  dataType:"json"
              });
          });
      });

方式三：JQ精简实现AJAX范例

$(function () {
          $("#un").blur(function () {
              $.post("${pageContext.servletContext.contextPath}/ajax",{"sName":$("#un").val()},function (data) {
                  if (data.userExist) {
                      $("#div").css("color","red").text(data.msg);
                  } else {
                      $("#div").css("color","green").text(data.msg);
                  }
              },"json");
          });
      });