使用XHR接收5种响应数据

• text/plain

  • 服务端：
    
    • header('Content-Type: text/plain');
    • echo 'succ';
  • 客户端：if (xhr.responseText === 'succ') { ... }

• text/html

  注意：AJAX应用中服务器返回的不是完整的HTML文档，而只是HTML标签组成的片段

  • 服务器端：
    
    • header('Content-Type:text/html');
    • echo '<li>xx</li><li>yy</li>';
  • 客户端：
    
    • parent.innerHTML = xhr.responseText;
  • 案例：搜索建议 ( 如百度搜索 )
    SELECT * FROM book WHERE bname LIKE '%指南%'; //%匹配任意多个任意字符——模糊匹配

• application/javascript

  注意：JavaScript代码在PHP解释器看来就是普通的字符串而已；

  • 服务器端：
    
    • header(' Content-Type: application/javascript');
    • echo 'alert(123);document.body.appendChild(...)';
  • 客户端：
    
    • eval( xhr.responseText ) //客户端必须使用eval来执行JS字符串

• application/xml

  • 服务器端：

    • header('Content-Type: application/xml');
    • echo '<?xml ?><productList>....</productList>';

  • 客户端：

    • //xhr.responseText //把字符串解析为DOM对象很麻烦
    • xhr.responseXML //DOM树的根对象

  • 案例：异步加载更多数据

• application/json

  • 服务器端：
    
    • header('Content-Type: application/json;charset=UTF-8');
    • $arr = ....;
    • $str = json_encode($arr); //把PHP数组转换为JSON字符串
    • echo $str;
  • 客户端：
    
    • JSON.parse( xhr.responseText ); //把JSON字符串解析为JS对象