客户端和服务器端进行请求-响应的常用方法

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年4月22日

客户端和服务器端进行请求-响应的原生js写法:XMLHttpRequest,
正如W3School 所说 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

var xhr;
 if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     xhr = new XMLHttpRequest();
  } else {
     // code for IE6, IE5
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xhr.open("get", "/jQueryAjax/GetPersonInfor");
   xhr.send();
   xhr.onreadystatechange = function () {
   if (xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;//获取xhr的返回值
      var body = JSON.parse(data);//将字符串解析为js对象
      console.log(body);
      document.getElementById("TxtName").value = body.name;
      document.getElementById("CboSex").value = body.sex;
      document.getElementById("TxtAddress").value = body.address;
    }
}

首先一个隐性声明“xhr”，先不要马上new一个XMLHttpRequest对象，因为现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象，但是

老版本的 Internet Explorer （IE5 和 IE6）是没有XMLHttpRequest 对象。
所以针对老版本的 Internet Explorer （IE5 和 IE6）就可以使用 ActiveX 对象。
XMLHttpRequest. open属性有两个参数，第一个参数是“请求方式（‘post、get’）”如果值为
空，则默认为“post” ,还有上传文件一定要用POST方式提交；第二个参数就是路径。

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET是从指定的资源请求数据，POST是向指定的资源提交要处理的数据。

 $.get("/jQueryAjax/SelectInfor", function (data) {
       console.log(data);
       console.log(typeof (data));
       $.each(data, function (i) {
  str += "员工ID：" + data[i].EmployeeID + "  员工编码：" + data[i].EmployeeCode + "  员工姓名：" + data[i].EmployeeName + "<br/>";
       $("#result").html(str);
});
});

jQuery $.get() 方法通过 HTTP GET 请求从服务器上请求数据，第一个回调参数是我们希望请求的 URL，第二个回调参数存有请求的状态。就如例子中的“data”,控制器返回的函数的载体。

$.post("/jQueryAjax/SelectInfor", function (data) {
console.log(data);
   console.log(typeof (data));
   $.each(data, function (i) {
   str += "员工ID：" + data[i].EmployeeID + "  员工编码：" + data[i].EmployeeCode
+ "  员工姓名："+ data[i].EmployeeName + "<br/>";
    $("#result").html(str);
    });
});

jQuery $.post()方法通过 HTTP POST 请求从服务器上请求数据。其他和jQuery $.get()用法基本相同，但是POST 请求不会被缓存 ，POST 请求不会保留在浏览器历史记录中 ，POST 不能被收藏为书签 ，POST 请求对数据长度没有要求 。具体的下图（来自W3School）

总的来说：jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器
请求数据比XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问简单一点，但是有些特殊情况就只能用XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问。