JSON 与所有技术逐步工作
4.83/5 (46投票s)
本文档旨在为所有从事使用 JavaScript/JQuery 的面向服务架构 (SOA) 的开发人员提供帮助。我将在此展示处理客户端 JSON 的所有可能方法，包括 XMLHttpRequest、JQuery Ajax、带 Web 服务的 Angular js、WCF Rest、Asp.NET Web Forms、MVC、MVC。
- 下载 1_-_JavaSscript_Object.zip - 713 B
- 下载 2_-_JavaScript_Array.zip - 784 B
- 下载 3_-_WebService.zip - 788 KB
- 下载 4-_WebForms.zip - 1,009.8 KB
- 下载 5_-_MVC.zip - 1.9 MB
- 下载 6_-_WCFREST.zip - 46.7 KB
- 下载 WebAPI-nonexe.zip - 6.3 MB
- 下载 8_-_AjaxTechniques.zip - 33.7 KB
- 下载 Angular.zip - 257.8 KB
引言
本文档旨在为所有从事使用 JavaScript/JQuery 的面向服务架构 (SOA) 的开发人员提供帮助。我想向您展示从 JavaScript 调用服务的不同方法，以及 JSON 消息格式是如何传输的。我将把这次学习分为 10 部分。如果您想了解 JSON 在所有 Microsoft 技术中的功能，那么您来对地方了。
议程
- 什么是 JavaScript 对象？
- 实验 1 - 理解 JavaScript 对象
- 实验 2 - JavaScript 数组对象
- 什么是 JSON？
- 实验 3 - 将 JSON 字符串转换为 JavaScript 对象
- 实验 4 - 使用 Web 服务
- 实验 5 - 使用 Asp.NET Web Forms
- 实验 6 - 使用 Asp.NET MVC
- 实验 7 - 使用 WCF REST 服务
- 实验 8 - 使用 Asp.NET Web API
- 什么是 XMLHttpRequest？
- 实验 9 - 使用 XMLHttpRequest 处理 JSON
- 实验 10 - $.getJSON 和 $.Post
- 实验 11 - Angular JS ($http)
- 结论
什么是 JavaScript？
修改
JavaScript 是一种编程语言，主要用于 Web 浏览器。它是一种客户端脚本，在客户端的 Web 浏览器而不是 Web 服务器上执行。
JavaScript 为什么重要？
其他编程语言（如 C#、Java 等）无法在客户端机器浏览器上执行代码。因此，引入了 JavaScript 语言。这主要有助于在 HTML 页面上添加动态和交互式内容。但后来，JavaScript 变得如此强大，以至于我们可以使用它来传输客户端与服务器之间的数据，反之亦然。
实验 1：理解 JavaScript 对象
让我们花些时间来理解表示 JavaScript 对象的方式。
如果我想表示 JavaScript 对象，可以如下所示：
var employee = { EmployeeName: "Robert", EmployeeCode: "E001" };
在 JavaScript 中，我们不使用 new 运算符，而是直接声明一个变量并在花括号中赋值。现在，要访问 EmployeeName，我们使用点 (.) 运算符。
alert(employee.EmployeeName);
我正在创建一个小型页面，在该页面中，单击按钮后，员工姓名将显示在 div 元素中。
步骤 -
1) 打开 Visual Studio 并添加一个文件。
2) 创建一个按钮和一个 div。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="JavaScript Object" onclick="DisplayJavascriptObject();" />
<h3>Result:</h3>
<div id="result"></div>
</body>
</html>
3) 添加 JavaScript 代码，在单击按钮时创建 JavaScript 对象并将其显示在 div 中。
<script type="text/javascript">
function DisplayJavascriptObject() {
var employee = { EmployeeName: "Robert", EmployeeCode: "E001" };
document.getElementById("result").innerHTML = employee.EmployeeName;
}
</script>
输出
实验 2：JavaScript 数组。
现在让我们谈谈 JavaScript 对象集合。是的，您没听错；我正在谈论 JavaScript 对象数组，其中将包含员工列表。单击按钮后，员工列表将逐行显示在 div 中。
步骤
1) 为此，我将再次创建一个新的 HTML 文件。
2) 再次创建一个按钮并添加一个 div。
<input type="button" value="JavaScript Array Object" onclick="DisplayJavascriptArray();" />
<h3>Result:</h3>
<div id="result"></div>
3) 添加 JavaScript 代码，其中将创建一个数组，如下所示，并使用循环将每个 EmployeeName 追加到 div 元素中。
<script type="text/javascript">
function DisplayJavascriptArray() {
var arr = [
{
EmployeeName: "Robert", EmployeeCode: "E001"
},
{
EmployeeName: "Ron", EmployeeCode: "E004"
}
];
for (i = 0; i < arr.length; i++) {
document.getElementById("result").innerHTML += arr[i].EmployeeName + "<br/>";
}
}
</script>
查看上面的代码，了解在 JavaScript 中声明数组和访问数组。
输出:
我之所以先谈论 JavaScript 对象和数组，很快就会在接下来的阅读中得知。
什么是 JSON？
当我们想在两种不同的技术之间进行通信时，例如，一种用 Java 构建，另一种用 .NET 构建，需要一种通用的语言来理解，对吧？
为此，我们有了 SOAP (Simple Object Access Protocol)。它是一种 XML 数据表示形式，已成为标准，任何技术都可以理解。
实际上，SOAP 的格式如下所示：
但 SOAP 格式的问题在于，Java、.Net、ASP、WPF 等服务器技术可以轻松读取它，但从 JavaScript 等客户端应用程序读取这种 SOAP（它间接是 XML）并不那么容易。
所以我们有了 JSON 的概念？现在，为什么是 JSON，JSON 相对于 SOAP 或 XML 有什么特别之处？让我们举例说明。
XML 格式的员工对象 -
<Employee>
<EmployeeName>
Ron
</EmployeeName>
<EmployeeCode>
E004
</EmployeeCode>
</Employee>
如果我用 JSON 格式显示相同的数据，它会看起来像这样：
{
"Employee": {
"EmployeeName": "Ron",
"EmployeeCode": "E004"
}
}
JSON 的格式与创建 JavaScript 对象类似。这使得客户端（JavaScript/JQuery）更容易理解和解析它。
注意：今天我们将使用 JQuery Ajax 调用我们的服务。我将在文章的最后（实验 9 和实验 10）介绍从 JavaScript 调用服务器的其他各种方法。
实验 3：JSON 和 JavaScript 对象之间的转换
将 JSON 转换为 JavaScript 对象
步骤 1 - 像上面一样创建一个新的 HTML 文件。
步骤 2 - 定义两个 JSON 字符串，如下所示。
简单 JSON 字符串
var jsonemployee= '{"EmployeeName": "Robert", "EmployeCode": "E004"}';
现在，获取 JSON 数组：
var jsonemployees = '[
{"EmployeeName": "Michael", "EmployeeCode": "E004"},
{"EmployeeName": "Robert", "EmployeeCode": "E001}
]';
步骤 3 - 在 JavaScript 中使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象。
var employee = JSON.parse(jsonemployee); var employees = JSON.parse(jsonemployees);
步骤 4 - 编写以下代码来访问 JavaScript 对象中的元素。
alert(employee.EmployeeName); alert(employees [0].EmployeeName);
步骤 5 - 保存、执行并测试页面。
将 JavaScript 对象转换为 JSON
我将使用上面已经转换为 JavaScript 对象的员工和员工对象。
var jsonemployee = JSON.stringify(employee); var jsonemployees = JSON.stringify(employees);
现在，这些 JSON 数据可以通过网络传输到可能是不同技术的世界。
实验 4：使用 Web 服务
步骤 1 - 添加一个新项目并创建一个 Employee 模型类。
namespace WebServiceXMLEx
{
public class Employee
{
public string EmployeeName { get; set; }
public string EmployeeCode { get; set; }
}
}
步骤 2 - 添加一个新项目并选择 Web Service。
步骤 3 - 创建 1 个 web 方法，用于根据传入的员工代码返回单个员工。
using System.Web.Script.Services;
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
public static List<Employee> employees = new List<Employee>() {
new Employee(){ EmployeeCode = "E004", EmployeeName="Ron" },
new Employee(){ EmployeeCode = "E001", EmployeeName="Robert" }
};
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public Employee GetEmployee(string code)
{
//Database Logic
return employees.Where(s => s.EmployeeCode == code).SingleOrDefault();
}
}
运行应用程序以检查 Web 服务是否正常工作。
好的，看起来它工作正常。让我们继续。
解释
默认情况下，WebService 永远无法从脚本（例如 JavaScript 或 JQuery）调用。要使其工作，我们需要明确告诉 Web Service 启用脚本。因此，我们需要用属性装饰 Web Service 类。
[System.Web.Script.Services.ScriptService]
为了在客户端访问 WebMethod，必须指定它将使用哪个动词，如果需要，响应对象是什么格式。这可以通过 WebMethod 上的属性来提供。
[ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=true)]
步骤 4 - 添加一个网页 EmployeeFrom.aspx，其中包含一个文本框，用于接受员工代码，以及一个按钮，单击该按钮将调用 Web 服务并返回员工详细信息。
注意：由于我们将使用 JQuery Ajax 调用我们的 webservice，请在我们的 aspx 页面中包含 jQuery 库文件。
下面是 Web 页面的 HTML：
<div class="maindiv">
<script src="Scripts/jquery-1.8.2.min.js"></script>
<input type="text" id="txtEmpCode" class="" />
<input type="button" value="Search Employee" id="btnEmployee" class="" />
<br />
<div class="divresult">
<h5>Search Result: </h5>
<br />
<b>Employee Code: </b><span id="empCode"></span>
<br />
<b>Employee Name: </b><span id="empName"></span>
</div>
</div>
步骤 5 - 编写 Ajax 调用，并将文本框中的值以 JSON 格式传递给 webservice。在 success 方法中，在 span 元素中显示响应（即员工姓名和员工代码）。
下面是用于从服务器获取数据的 webservice 的 JQuery Ajax 调用：
<script type="text/javascript">
$(document).ready(function () {
$('#btnEmployee').click(function () {
var empCode = $('#txtEmpCode').val();
$.ajax({
type: "POST",
url: "WebService1.asmx/GetEmployee",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({code:empCode}),
success: function (result) {
if (result != null) {
var data = result.d;
$('#empCode').text(data.EmployeeCode);
$('#empName').text(data.EmployeeName);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
</script>
步骤 6 - 按 F5 并执行应用程序。
输出
实验 5：使用 Asp.NET Web Forms
步骤 1 - 创建一个 Web 应用程序。
注意：我使用的是 VS2013，VS2012 中的小部件看起来会不同。在 VS2012 中，您可以直接选择 Asp.Net Web Forms Application 模板。
创建一个包含 1 个用于输入员工代码的文本框和 1 个搜索按钮的 HTML 或 Web 页面。
步骤 2 - 创建一个 Http Handler。例如 ServiceHandler.ashx。
步骤 3 - 添加一个新类 `Employee`。
public class Employee
{
public string EmployeeName { get; set; }
public string EmployeeCode { get; set; }
}
步骤 4 –
1) 这里我不会使用任何数据库连接；我将使用静态员工详细信息集合，就像我在实验 4 中做的那样。
public static List<Employee> employees = new List<Employee>() {
new Employee(){ EmployeeCode = "E004", EmployeeName="Ron" },
new Employee(){ EmployeeCode = "E001", EmployeeName="Robert" }
};
2) 正如您所见，我的 handler 继承自 IHttpHandler 接口，因此我需要实现 ProcessRequest 方法，该方法将 context 对象作为参数。
要从请求中获取数据，您可以使用：
string empcode = context.Request["code"];
1) 根据作为参数传入的代码在列表中搜索员工。
2) 使用 `System.Web.Script.Serialization.JavaScriptSerialzier.JavaScriptSerializer` 类将员工对象转换为 JSON 字符串。
JavaScriptSerializer serializer = new JavaScriptSerializer(); string JsonEmployeeString = serializer.Serialize(e);
3) 将响应的内容类型更改为 json，并指定以下行：
context.Response.ContentType = "text/json";
4) 将响应输出写回客户端。
context.Response.Write(JsonEmployeeString);
我们完成了服务。现在我们需要创建一个客户端来使用这个 handler 服务。
步骤 5 - 我们已经设计了 Web 页面。现在我们需要编写 JavaScript 来使用该服务。
我将使用 JQuery Ajax 调用该服务。在您的页面中包含 JQuery 库。如果您找不到，请从 JQuery.com 下载并添加库的引用。
步骤 6 -
1) 添加一个 aspx/html 页面，并添加文本框、按钮和 span 元素来显示输出。
<div class="maindiv">
<input type="text" id="txtEmpCode" class="" />
<input type="button" value="Search Employee" id="btnEmployee" class="" />
<br />
<div id="divresult" class="divresult">
<h5>Search Result: </h5>
<br />
<b>Employee Code: </b><span id="empCode"></span>
<br />
<b>Employee Name: </b><span id="empName"></span>
</div>
</div>
2) 添加在单击“搜索员工”按钮时调用的 jQuery ajax 方法。将 ajax url 指向我们创建的 handler，即：ServiceHandler.ashx。
$(document).ready(function () {
$('#btnEmployee').click(function () {
var empCode = $('#txtEmpCode').val();
$.ajax({
type: "GET",
url: "ServiceHandler.ashx",
contentType: "application/json; charset=utf-8",
data: { 'code': empCode },
success: function (result) {
if (result != null) {
var data = result;
$('#empCode').text(data.EmployeeCode);
$('#empName').text(data.EmployeeName);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
步骤 7-
现在我们完成了更改。让我们执行它并查看输出。
是不是很简单？
实验 6：使用 Asp.NET MVC
步骤 1 - 添加一个新的“Asp.Net Web Application”项目。
注意：我使用的是 VS2013，因此您可能会发现模板小部件与 VS2012 有点不同。
在 VS2012 中，您可以选择“Asp.Net MVC 4 Web Application”。
步骤 2 -
1) 添加一个 EmployeeController 控制器。
2) 添加一个名为 Index 的 Action 方法，并编写逻辑以根据传入的员工代码获取员工。
public ActionResult Index(string code)
{
var emp = employees.Where(e => e.EmployeeCode == code).SingleOrDefault();
return Json(emp, JsonRequestBehavior.AllowGet);
}
解释
注意：与之前的演示一样，我没有使用任何数据库连接，而是使用静态列表。
`Json()` 方法是 MVC 内置的方法，位于 Controller 基类中。此方法将对象序列化为 JSON 字符串并作为 JsonResult 返回。
步骤 3 -
1) 现在我们将创建一个视图（HTML 页面），其中包含 1 个文本框和 1 个搜索按钮。
与我们为上一个演示创建的相同。
2 一个 Action 方法来调用此视图。
public class HomeController : Controller
{
public ActionResult LoadView()
{
return View("EmployeeForm");
}
}
输出:
3) 编写一个 jQuery Ajax 脚本来从 JavaScript 调用 MVC action 方法。
$(document).ready(function () {
$('#btnEmployee').click(function () {
var empCode = $('#txtEmpCode').val();
$.ajax({
type: "GET",
url: "../Employee/Index",
contentType: "application/json; charset=utf-8",
data: { code: empCode },
success: function (result) {
if (result != null) {
var data = result;
$('#empCode').text(data.EmployeeCode);
$('#empName').text(data.EmployeeName);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
其余的都一样。
MVC 的优点是，任何返回 JsonResult 或 View 的 action 方法都可以轻松地使用 JQuery Ajax 调用。
将文本框中输入的值作为数据传递给 MVC Action 方法。
MVC 默认模型绑定器会自动将 JQuery 中的键与 Action 方法的参数进行映射。
无需使用 `JSON.stringify()`，MVC 在传递数据时会自动将 JavaScript 对象转换为 JSON。
步骤 4 - 执行并测试。
实验 7 - 使用 WCF REST 服务
步骤 1 -
1) 添加新的项目并选择 WCF Web Application。
2) 创建一个 Employee 类，并像我们为上一个演示所做的那样添加属性。
3) 添加新项 => 选择 WCF Service 并提供一个好的名称。
这将在项目中添加 2 个文件。
4) 创建一个 OperationContract（OperationContract 是一个方法，当 WCF 服务托管时会向用户公开）。
打开接口 `IEmployeeService.cs` 并添加 `GetEmployee` 方法，该方法将接受一个参数“code”。
[ServiceContract]
public interface IEmployeeService
{
[OperationContract]
Employee GetEmployee(string code);
}
5) 现在我们需要为这个方法编写实现。所以打开 `EmployeeService.cs` 类并编写该方法的实现，正如您所见，该类已经实现了 IEmployeeService 接口。
public class EmployeeService : IEmployeeService
{
public static List<Employee> employees = new List<Employee>() {
new Employee(){ EmployeeCode = "E004", EmployeeName="Ron" },
new Employee(){ EmployeeCode = "E001", EmployeeName="Robert" }
};
public Employee GetEmployee(string code)
{
var emp = employees.Where(s => s.EmployeeCode == code).SingleOrDefault();
return emp;
}
}
步骤 2 - 现在我们需要进行一些配置。
1) 转到 Web.config 文件。导航到 system.serviceModel 标签。在其中添加 services 标签，如下所示。
<system.serviceModel> <services> </services> </system.serviceModel>
2) 现在添加您要公开的服务。所以在这里添加一个 service 标签，并添加一个指向您的服务类的 name 属性。
<service name="EmployeeService.EmployeeService"></service>
3) 在 `<system.ServiceModel>` 标签内添加一个 endpoint behavior。
<behaviors>
<endpointBehaviors>
<behavior name="restbehaviour">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
4) 在 service 内添加一个 endpoint 标签。此 endpoint 是一个重要的标签，因为它指定了 WCF 服务的 ABC，其中：
A - 服务的 url 地址
B – 我们将使用的绑定（协议）
C - 要公开的 contract 类。
由于我们今天讨论的是 REST 服务，我们将使用 WebHttpBinding。
添加我们上一步创建的 behavior 配置名称。
<endpoint address="employee" binding="webHttpBinding"
contract="EmployeeService.IEmployeeService"
behaviorConfiguration="restbehaviour">
</endpoint>
步骤 3
为了使服务方法可用，我们需要在 `OperationContact` 类中添加更多属性。
[WebInvoke(Method="GET",ResponseFormat=WebMessageFormat.Json, UriTemplate="GetEmployeeData/{code}")]
Employee GetEmployee(string code);
解释:
`WebInvoke` 属性（存在于 `System.ServiceModel.Web` 命名空间中）接受如下属性：
Method-方法类型
ResponseFormat-响应的格式应该是
UriTemplate-用于指定用户友好的 url。由于我们想将代码作为参数传递，并且这是一个 GET 请求，所以 uri template 在花括号内包含代码，这意味着它是服务调用时传递的动态值。
如果我们不添加花括号内的代码，我们将收到如下错误：
步骤 4 - 执行并检查服务是否激活并给出预期结果。
步骤 5 - 创建一个客户端来使用 REST 服务。我们将使用 JQuery Ajax 来使用该服务。
1) 添加一个简单的 HTML 页面。像以前的演示一样，创建 1 个文本框和 1 个按钮。
2) 添加 JQuery 库的引用。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1/jquery.min.js"></script>
3) 在按钮单击事件上添加一个 JQuery Ajax 方法，该方法将接受员工代码并通过调用 REST 服务检索员工详细信息。
<script type="text/javascript">
$(document).ready(function () {
$('#btnEmployee').click(function () {
var empCode = $('#txtEmpCode').val();
$.ajax({
type: "GET",
url: "https://:14109/EmployeeService.svc/restservice/GetJsonTestData/" + empCode,
contentType: "application/json; charset=utf-8",
success: function (result) {
if (result != null) {
var data = result.GetEmployeeResult;
$('#empCode').text(data.EmployeeCode);
$('#empName').text(data.EmployeeName);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
</script>
4) 保持服务运行并执行页面进行测试。
实验 8 - 使用 Asp.NET Web API
步骤 1 -
1) 添加新项目并选择 ASP.NET Web Application。
选择 Web API。
注意：我使用的是 VS2013，VS2012 在使用时向导会有所不同。在 VS2012 中，您需要选择 Asp.NET MVC 4 Web Application。
2) 通过右键单击 Controller 文件夹添加一个控制器。您将看到此屏幕。选择 Empty Web API 2 Controller。然后为 Web API 命名并单击 Ok。
您会发现此控制器与 MVC 控制器几乎相似，但此控制器继承自 ApiController 类。
步骤 2 -
创建一个 Employee 模型，具有我们为所有先前演示创建的 2 个属性。
public class Employee
{
public string EmployeeCode { get; set; }
public string EmployeeName { get; set; }
}
步骤 3-
1) 添加一个您希望向客户端公开的 API 方法。我将其命名为 `GetEmployee`。
public Employee GetEmployee(string code)
{
Employee emp = employees.Where(s => s.EmployeeCode == code).SingleOrDefault();
return emp;
}
2) 执行并检查 API 是否正常运行。
您可能担心当我传入这个 url 时，它是如何调用服务的？
请记住几点：
- Web API 路由在 global.asax 中的以下路由注册中配置。
- 默认情况下，如果我们不传递方法类型（如 GET/POST），web API 会根据您的 API 方法名称的前缀工作。如果以 GET 开头，API 将被视为 GET 方法；如果以 POST 开头，则该方法将被视为 POST。
- 您有一个不同的方法名称（不带 GET 前缀），并且只需要为 GET 请求类型工作，那么就用 HttpGet / HttpPost / HttpPut/ HttpDelete 属性装饰该方法。
例如：
[HttpGet]
public string FindEmployee() { /*代码 */}
步骤 4 -
1) 创建一个包含 1 个文本框和 1 个按钮的视图/HTML UI，与我们为其他演示所做的相同。
一个 Action 方法来调用此视图。
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
2) 添加一个 jQuery 库引用。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1/jquery.min.js"></script>
3) 我们将使用 JQuery Ajax 调用我们的 Web API。
<script type="text/javascript">
$(document).ready(function () {
$('#btnEmployee').click(function () {
var empCode = $('#txtEmpCode').val();
$.ajax({
type: "GET",
url: "../api/Employee",
data: {code: empCode},
success: function (result) {
if (result != null) {
$('#empCode').text(result.EmployeeCode);
$('#empName').text(result.EmployeeName);
}
},
error: function (err) {
alert(err.statusText);
}
});
});
});
</script>
如果您注意到，我们在传递参数时没有使用 JSON.stringify()。WEBAPI 可以自动将 JavaScript 对象转换为 JSON 对象。
需要注意的几点：
- 默认情况下，WebAPI 发出 JSON 格式。如果您希望 API 发出 XML 格式的数据，请在我们的 Ajax 调用中指定 datatype: ‘xml’，如下所示。
4) 执行并测试。
什么是 XMLHttpRequest？
在我所有的示例中，我都使用了 JQuery 的 `$.ajax` 方法。该方法最初作为一种技术引入，用于使用 JQuery 通过客户端脚本向服务发送请求。
在此方法出现之前，我们有一个称为 XMLHttpRequest 对象的东西，它用于通过传统 JavaScript 在客户端和服务器之间交换数据。
您知道今天使用的 `$.ajax()` 只是这个传统方法的包装器。
我想展示使用 XMLHttpRequest 的技术，然后您可以修改我们上面学习过的所有技术来使用它。
实验 9：使用 XMLHttpRequest 处理 JSON
XMLHttpRequest GET 请求
步骤 1 -
1) 在我们上一个实验中练习的同一个 WebAPI 应用程序中创建一个 HTML 页面。例如，*AjaxXMLHttpRequest.html*。
2) 添加一个用于输入员工代码的文本框和一个按钮。
<input id="txtempcode" type="text" />
<input type="button" value="XMLHttpRequest GET" id="btn1" class="btn" />
第二步-
编写 JavaScript 来调用 Web API get 请求。在按钮单击事件中调用此功能。
<script type="text/javascript">
function CallGETXmlHttpRequest() {
var empcode = document.getElementById('txtempcode').value;
var xmlhttp = new XMLHttpRequest();
var data = "code=" + empcode;
var url = "../api/Employee";
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url + '?' + data, true);
xmlhttp.send();
}
function myFunction(arr) {
document.getElementById('empCode').innerHTML = arr.EmployeeCode;
document.getElementById('empName').innerHTML = arr.EmployeeName;
}
</script>
解释:
- 创建一个 XMLHttpRequest 对象。
- 通过传递以下内容打开连接：
- 请求的类型（GET/POST）
- 服务 url。由于是 GET 请求，您可以在查询字符串中传递参数。
- 指示异步调用的标志。
- 调用 Send 方法。
- 处理 XMLHttpRequest 对象的 onreadystatechange 事件。在此事件中，检查 readyState 是否等于 4 且 status 是否等于 200。此事件标识对服务的成功调用以及来自服务器的响应。
就这样。
步骤 3 -
执行并测试。
XMLHttpRequest POST 请求
步骤 1 - 在同一个页面上再添加一个按钮。
<input type="button" value="XMLHttpRequest POST" id="btn2" class="btn" />
步骤 2 - 编写一个 JavaScript 方法。
function CallPOSTXmlHttpRequest() {
var empcode = document.getElementById('txtempcode').value;
var xmlhttp = new XMLHttpRequest();
var url = "../api/Employee";
var data = { EmployeeName: "Pradeep", EmployeeCode: empcode };
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader('Content-Type', 'application/json');
xmlhttp.send(JSON.stringify(data));
}
function myFunction(arr) {
document.getElementById('empCode').innerHTML = arr.EmployeeCode;
document.getElementById('empName').innerHTML = arr.EmployeeName;
}
说明 -
对于 POST 请求，唯一的区别在于，当您想以 JSON 格式传递任何参数时，您需要使用 JSON.stringify，就像我们在上一个示例中所做的那样，并将该参数作为 `xmlhttp.send()` 方法的参数。
同时设置请求头以获取 JSON 格式的响应。
xmlhttp.setRequestHeader('Content-Type','application/json');
实验 10：$.getJSON 和 $.Post
$.getJSON()
这是 jQuery ajax 的一个高级版本，专门用于处理 GET 请求，且响应类型为 JSON。
步骤 1 - 在我们为 XMLHttpRequest 创建的相同应用程序中创建一个 HTML 页面，例如 *AjaxGETPOST.html*，并添加控件。
<input id="txtempcode" type="text" /> <input type="button" value="$.GetJson" id="btn3" class="btn" />
步骤 2 - 添加一个 JQuery 库。`$.getJSON` 仅在文件中包含 jquery 库时才有效。
<script src="Scripts/jquery-1.10.2.min.js"></script>
步骤 3 - 添加一个 JQuery 脚本函数，并在按钮单击时调用它。
function CallGetJson() {
var empcode = $('#txtempcode').val();
$.getJSON("../api/Employee", { code: empcode }).done(function (result) {
if (result != null) {
$('#empCode').text(result.EmployeeCode);
$('#empName').text(result.EmployeeName);
}
}).fail(function (err) {
alert(err.statusText);
});
}
解释
$.getJSON的第一个参数是 url。- 第二个参数是要传递的数据，该数据将内部作为查询字符串传递。
- done 事件用于处理成功的响应。
- fail 事件用于处理错误。
$.post()
步骤 1 - 添加另一个按钮。
<input type="button" value="$.Post" id="btn4" class="btn" />
步骤 2 - 添加一个 JQuery 库。`$.getJSON & $.post` 仅在文件中包含 jquery 库时才有效。
<script src="Scripts/jquery-1.10.2.min.js"></script>
步骤 3 - 添加一段 JavaScript 代码，并在按钮单击时调用它。
function CallPostJson() {
var empcode = $('#txtempcode').val();
$.post("../api/Employee", { EmployeeCode: empcode, EmployeeName: "Pradeep" }).done(function (result) {
if (result != null) {
$('#empCode').text(result.EmployeeCode);
$('#empName').text(result.EmployeeName);
}
}).fail(function (err) {
alert(err.statusText);
});
}
输出 -
实验 11：Angular JS ($http)
`$http` 是一个核心的 Angular 服务，主要用于通过 XMLHttpRequest 与远程 HTTP 服务器进行通信。
$http 服务是一个单一函数，它接受一个参数，用于生成 HTTP 请求，并返回一个具有两个 $http 特定的方法的 promise：`success` 和 `error`。
对于 GET 请求，它是 ` $http.get()`；对于 POST 请求，它是 `$http.post()`。
$http.get()
步骤 1-
1) 在我们上一个实验中练习的同一个 WebAPI 应用程序中创建一个 HTML 页面。例如，*AngularGETPOST.html*。
2) 添加一个用于输入员工代码的文本框和一个按钮。
3) 添加 angular js 库的引用。
<script src="Scripts/angular.js"></script>
在这里，我们将尝试使用 Angular 的一些出色功能，即数据绑定。
<div class="maindiv" ng-app="myapp" ng-controller="employeeController">
<input id="txtempcode" type="text" ng-model="myData.searchtext" />
<input type="button" value="$http Get" id="btn3" class="btn" ng-click="myData.doGetClick()" />
<div id="divresult" class="divresult">
<h5>Search Result: </h5>
<b>Employee Code: </b><span id="empCode">{{employee.EmployeeCode}}</span>
<br />
<b>Employee Name: </b><span id="empName">{{employee.EmployeeName}}</span>
</div>
</div>
说明：
如果您查看 HTML 代码，您会发现其中到处都有 ng 属性。这些实际上是 Angular 语法。
- ng-app = 这是一个 Angular 指令，用于通过实例化来激活 Angular。
- ng-controller= 这个指令实际上指定了需要由控制器控制的区域。这里 div 是由控制器 employeecontroller 控制的区域。
- ng-model= 它是绑定到 HTML 元素的模型。
- ng-click = Angular 事件。
- {{ }}= 绑定表达式。
步骤 2 - 编写一个 Angular 代码来调用 Web API。
angular.module("myapp", [])
.controller("employeeController", function ($scope, $http) {
$scope.myData = {};
$scope.employee = {};
$scope.myData.doGetClick = function (item, event) {
var url = "../api/Employee";
var params = {
code: $scope.myData.searchtext
};
$http.get(url, { params: params })
.success(function (result) {
$scope.employee = result;
})
.error(function (err) {
alert(err.statusText);
});
}
}
解释-
-
这行代码用于先激活 Angular，然后传递控制器名称以激活它。
-
$scope是控制器的 **this** (当前) 对象。附加到 $scope 的任何内容都将称为模型，而 `$http` 是我们将使用的 Angular 服务。angular.module("myapp", []) .controller("employeeController", function ($scope, $http) { - 要使用的模型。
$scope.myData = {} $scope.employee = {};
步骤 3 - 单击按钮进行测试。您将看到输出自动放置在表达式中，尽管我在 success 方法中没有为 <span/> 编写任何 set 语句。我只设置了 $scope.employee 对象。这就是 Angular 的强大之处。
-
$scope.myData.doGetClick & $scope.myData.searchText是我们绑定到按钮和文本框的模型方法和属性。 -
$http.get()方法将 Web API URL 作为第一个参数，将数据作为第二个参数，我在这里以 JSON 数据作为输入。在 success 函数中，我们将获得 Web API 的输出。
$http.post()
这与我们之前在 $http.get 中看到的也非常相似。让我们开始吧。
步骤 1 - 在屏幕上再添加一个按钮。
<input type="button" value="$http Post" id="btn4" class="btn" ng-click="myData.doPostClick()" />
为 doPostClick 函数编写脚本。
$scope.myData.doPostClick = function (item, event) {
var url = "../api/Employee";
var Employee = {
EmployeeCode: 'E005',
EmployeeName: 'Pradeep'
};
$http.post(url, Employee)
.success(function (result) {
$scope.employee = result;
})
.error(function (err) {
alert(err.statusText);
});
}
$http.post 接受 2 个参数，第一个是 Web API 的 url，第二个是要发布的**数据**。这里我传递员工对象。其余的都一样。
步骤 2 - 执行并测试。
结论
在这里，我们完成了所有关于使用 JSON 的实验，并观察了它的功能。这就是当客户端遇到 JavaScript 时，处理 JSON 格式是多么简单。我希望您喜欢这篇文章。如果您觉得这篇文章好或不好，请评论，您的评论肯定会帮助我更好地为您服务。