Ajax异步请求——接受服务器返回的五种响应+补充

补充：状态码表示与ajax七种请求类型。

状态码 xhr.status  - 服务器端的状态
2xx - 表示请求成功
    200 - 请求成功
3xx - 表示重(新)定向
    302 - 表示重定向
       url - 重新指定的地址
    304 - 服务器端资源没有变化
       浏览器具有缓存
4xx - 表示客户端错误
    403 - 请求被拒绝
    404 - 请求的网页不存在
    405 - 请求类型不被允许
5xx - 表示服务器端错误
    500 - 服务器端错误
    502 - 请求的路径错误
    503 - 服务未启动
    504 - 请求路径超时
请求类型：至少具有7种请求类型

   GET - GET方式请求类型从服务器端获取数据

   POST - POST方式请求类型修改(更新)服务器端的数据

   PUT - PUT方式请求类型向服务器端新增数据

   DELETE - DELETE方式请求类型从服务器端删除内容

   HEAD - 向服务器索要与GET一致的响应，响应体将不会被返回。此方法在不必传输整个响应内容的情况下就可获取包含在响应头中的内容

   OPTIONS - 返回服务器对特定资源所支持的HTTP请求方法

   TRACE - 回显服务器收到的请求

   

在服务器端头部修改AJAX所要接收的响应类型，这种类型是

MIME(Multipurpose Internet Mail Extension)

类型，就是用于唯一的标示一种特定格式的文件的一个描述符，

常见的MIME类型：

  image/jpeg  image/gif  image/png

  text/plain  text/html  text/css

  application/javascript  application/xml  application/json

  application/msword ....

   

接下将要用到MIME不同类型让服务器端程序作出相应的处理，这里要接着上一篇的点击大洲按钮接收各大洲不同的国家名的小练习，这里主要是服务器端的头部与<script>中事件监听函数的改变。

主意：设置响应消息的头部——此语句之前不能向客户端输出任何内容

1.使用AJAX接收服务器返回的text响应

<?php
//以普通文本格式：text/plain
header('Content-Type: text/plain');
...
?>

 <script>中的ajax四部曲：

//1
var xhr = null;
<span style="white-space:pre">	</span>if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//2
xhr.onreadystatechange = function(){
	if(xhr.readyState===4){
		if(xhr.status===200){
			console.log('XHR接收到了服务器返回的成功响应：');
			console.log(xhr.responseText);  // text普通文本响应
			console.log(typeof(xhr.responseText));
			document.querySelector('#countryList').innerHTML = xhr.responseText; // html格式响应
		}else{
			alert('不成功的响应');
		}
	}
}
//3
xhr.open('GET','1.php?barName='+barName, true);
//4
xhr.send( null );

2.使用AJAX接收服务器返回的html响应

<?php
//html代码片段格式：text/html
header('Content-Type: text/html');
...
?>

<script>中的代码同text格式一样样的。

3.使用AJAX接收服务器返回的script响应

PHP代码同上两个响应类似，只是将text/xx 更改为application/javascript

<?php
//script响应
header('Content-Type: application/javascript');
...
?>

<script>中使用的JavaScript的eval( )方法，将返回的String作为一段js脚本加以解析执行

//1
var xhr = null;
	.....
//2
xhr.onreadystatechange = function(){
	if(xhr.readyState===4){
		if(xhr.status===200){
			console.log('XHR接收到了服务器返回的成功响应：');
			console.log(xhr.responseText);  
			console.log(typeof(xhr.responseText));//String
			eval(xhr.responseText);
					}else{...}
//3   ...
//4   ...

4.使用AJAX接收服务器返回的xml响应

 HTML：HyperText Markup Language，所有的HTML标签已经为了在浏览器中加以而固定下来。用标签来呈现网页内容。

 XML：eXtensible Markup Language，可扩展的标签语言，用标签的形式来描述数据(财务、航天、化学、无线...)，没有预定义任何的标签，所有的标签都由使用者随意指定。XML语言标准规定了XML数据的格式必须满足：

(1)双标签有开始，就必须有结束；单标记标签必须有/

(2)标签名严格区分大小写

(3)属性值必须使用引号括起来

(4)...

<?php
// XML响应格式
header('Content-Type: application/xml');
?>

<script>中代码

//1
var xhr = new XMLHttpRequest();
//2
xhr.onreadystatechange = function(){
	if(xhr.readyState===4){
		if(xhr.status===200){
			//使用核心DOM操作方法
		}else{
			alert('接收到非成功响应');
		}
	}
}
//3  ...
//4  ...

5.使用AJAX接收服务器返回的json响应

JSON：原本是JS中创建的对象的“直接量”法，后来从JS中独立出来，作为一种字符串数据的表示法，被各种语言所支持。其作用于XML类似，但比XML更加轻量级、简洁、处理速度更快。

JSON格式表示字符串，有两种格式：

JSON对象字符串格式：'{ "k1":"v1",  "k2": v2 }'

JSON数组字符串格式：'[ v1,  v2,  v3... ]'

<?php
//以JSON格式
header('Content-Type: application/json');
$db = [ ];
...
//把PHP数组转换为JSON格式的字符串，再输出给客户端
$str = json_encode($db); //PHP提供的对JSON格式的支持
echo $str;
?>

客户端页面，使用JavaScript的JSON.parse() 将JSON格式字符串解析为JS数组/对象

//1
var xhr = new XMLHttpRequest();
//2
xhr.onreadystatechange = function(){
	if(xhr.readyState===4){
		if(xhr.status===200){
			var arr = JSON.parse(xhr.responseText);<span style="white-space:pre">	</span>//JS提供了对JSON字符串数据的支持
		}else{
			alert('接收到非成功响应');
		}
	}
}
//3  ...
//4  ...

服务器端(PHP数据)  =>  JSON字符串  =>  客户端(JS对象)

批量响应数据最好的形式：有数据、有格式、跟HTML标签无关系、编程语言易于处理

application/xml：

application/json：

因为JSON是完全独立于语言的文本格式，同时被多种语言提供支持，为Ajax首选。