JSON 与 Ajax

在处理 AJAX 和远程 REST API 时，发送 JSON 请求负载和接收 JSON 响应对象是非常常见的任务.

1. AJAX 与 XMLHttpRequest

为了发出 AJAX 请求，我们创建了一个 XMLHttpRequest 对象的实例。XMLHttpRequest对象允许我们对实时服务器进行异步 AJAX 调用.

XMLHttpRequest 具有强大的属性，例如 readystate, response, 和 responseText. 它还提供了有用的方法，例如 open(), onuploadprogress(), onreadystatechange(), 和 send().

发出 AJAX 请求的第一步是使用 HTTP URL/端点调用open()方法。默认情况下，XMLHttpRequest 会打开一个 异步请求。在 open()中，我们指定了必须发送请求的 HTTP 方法.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/url/to/the/api/endpoint", true);

我们可以设置一个回调函数并将回调分配给方法 onreadystatechange。我们可以将回调方法分配给onuploadprogress()，如果我们使用AJAX请求上传文件.

xmlhttp.onreadystatechange = function()
{
//function body
}

在AJAX请求过程中，我们需要检查 xmlhttp 对象中名为readyState的属性。ReadyState 属性跟踪所发出的 XMLHttpRequest 的进度.

每当 readyState 的值发生更改时，都会调用 onreadystatechange 方法.

例如，如果 readyState 的值为 4，则表示服务器已收到客户端发出的请求，并且已准备好发送响应.

xmlhttp.onreadystatechange = function()
{
	if (this.readyState == 4 && this.status == 200)
	{
		var responseJsonObj = JSON.parse(this.responseText);

		console.log( responseJsonObj.name );
		console.log( responseJsonObj.age );
	}
};

在前面的示例中，我们使用了另一个称为 status 的属性。这是从服务器返回的 HTTP 状态代码.

例如，状态代码 200 表示事务成功，而状态代码 400 表示错误请求.

最后，使用send()方法将请求发送到服务器.

xmlhttp.send();

如果我们想将一些数据发送到服务器，我们可以使用send()方法.

var data = {"name" : "Lokesh"};
xmlhttp.send( JSON.stringify( data ) );

2. 在AJAX请求体中发送JSON

Javascript 示例使用 AJAX 向服务器发出 HTTP POST 请求，并将 JSON 字符串作为请求正文发送.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/demo", true);

xmlhttp.onreadystatechange = function()
{
	if (this.readyState == 4 && this.status == 200)
	{
		//使用 parse()方法将 JSON 字符串转换为 JSON 对象
		var responseJsonObj = JSON.parse(this.responseText);

		//使用 response
	}
};

var jsonData = {"name" : "Lokesh"};
xmlhttp.send( JSON.stringify( jsonData ) );

2. 在AJAX响应中接收JSON

Javascript 示例使用 AJAX 向服务器发出 HTTP 请求，并处理从服务器收到的 JSON 响应.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function()
{
	if (this.readyState == 4 && this.status == 200)
	{
		//使用 parse()方法将 JSON 字符串转换为 JSON 对象
		var responseJsonObj = JSON.parse(this.responseText);

		console.log( responseJsonObj.name );
		console.log( responseJsonObj.age );
	}
};

xmlhttp.open("GET", "/demo", true);
xmlhttp.send();