Ajax+PHP+Json简单示例

基础概念:

1.AJAX的全称： Asynchronous JavaScript and XML （异步的JavaScript和XML）

2.有了XMLHttpRequest这个对象，才实现了从同步到异步的过渡。
  XMLHttpRequest对象用于在后台与服务器交换数据。

  // 兼容IE6以下版本
  var request;
  if (window.XMLHttpRequest) {
    // IE7+,Firefox,Chrome
    request = new XMLHttpRequest();
  } else {
    // IE6,IE5
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }

3.HTTP：计算机通过网络进行通信的规则

    HTTP请求：get/post方法，URL，请求头，请求体
    HTTP响应：状态码，响应头，响应体

4.XMLHttpRequest

    4.1发送请求
        open(method,url,async)
        send(string)

    4.2获取响应
        responseText:获取字符串形式的响应数据
        responseXML:
        status和statusText:
        getAllResponseHeader()
        getResponseHeader()

        监听readyState属性
            0:请求未初始化，open还没有调用
            1:服务器连接已建立，open已经调用了
            2:请求已接收，也就是接收到头信息了
            3:请求处理中，也就是接收到响应主体了
            4:请求已完成，且响应已就绪，也就是响应完成了

5.监听HTTP请求工具 Fiddler

6.JSON：JavaScript Object Notation JavaScript对象表示法

    6.1 JSON的长度比XML格式短
    6.2 JSON读写的速度更快
    6.3 JSON可以使用JavaScript内建的方法直接进行解析，转换成Javascript对象非常方便

7.解析JSON的两种方法

    7.1 eval和JSON.parse
        在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

        var jsondata = '{"staff":[{"name":"mike","age":22},{"name":"kk","age":alert(123)}]}';

        var jsonobj = eval('(' + jsondata + ')'); // 123

        alert(jsonobj.staff[0].name); // mike

        这样会先执行json数据中的恶意代码，alert(123);

    7.2 在线验证JSON格式工具： jsonlint.com

8.使用JQuery实现Ajax

    type:提交类型，默认为"GET"
    url:发送请求的地址
    data:连同请求发送到服务器的数据
    dataType:预期服务器返回的数据类型
    success:秦秋成功后的回调函数
    error:请求失败时调用次函数。

9. 跨域处理

    JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。
    由于JavaScript同源策略的限制，a.com域名下的js无法操作b.com域名下的对象

    处理方法： 

        1.代理

        2.JSONP 只能对Get请求起到效果

            利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

        3.HTML5提供的XHR2 IE10以下的版本都不支持（在服务端加入下列语句）

            header('Access-Control-Allow-Origin:*'); // 所有域都可以访问
            header('Access-Control-Allow-Methods:POST,GET'); 
            header('Access-Control-Allow-Credentials:true'); 

---

代码示例：

// 后台PHP代码（返回Json格式数据）

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组