Ajax

1. Ajax :异步的JavaScript和XML，是一种使用现有标准的新方法。
   Ajax是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

2. A：创建一个异步对象
   B：设置请求方式和请求地址
   C：发送请求
   D：监听状态的变化
   E：处理返回的结果

3. http状态码：200–300 || 304

4. get/post请求的异同：
   相同点：都是将数据提交到远程服务器
   
   不同点：存储位置：get会把数据放在url后面
   post会将数据放到请求头中
   
   get请求对数据大小有限制
   post请求对数据大小没有限制
   
   get用于非敏感数据以及小数据
   post用于敏感数据和小数据

5. 上传文件：一般用post上传，必须设置enctype属性为官方指定属性
   后端获取该文件应通过$_FILES获取，不可以通过$ _POST获取。php中文件会上传到一个临时目录，接收完毕之后会自动删除。

6. 后端php相关
   定义变量：$num = 10;
   打印变量： echo $num; 定义数组：$num;定义数组：arr = arr (1,2,3,4,5);
   打印数组：print_r($arr);
   取数组某变量：echo $arr[0];
   定义对象：
   $dict = (key=>value.key=>value)
   取出变量:echo $dict[“key”];

7. ajax-get的基本使用

    <button>发送请求</button>
    <script>
        var but = document.getElementsByTagName('button')[0];
        but.onclick = function(){
            //创建一个异步对象
            var xmlhttp = new XMLHttpRequest();
            //设置请求方式和请求地址
            // method：请求的类型；GET 或 POST
            // url：文件在服务器上的位置
            //async：true（异步）或 false（同步）
            xmlhttp.open("GET","a.php",true)
            //发送请求
            xmlhttp.send();
            //监听状态的变化
            //0: 请求未初始化
            //1: 服务器连接已建立
            //2: 请求已接收
            //3: 请求处理中
            //4: 请求已完成，且响应已就绪
            xmlhttp.onreadystatechange = function(ev2){
                   //判断是否请求成功
                    if (xmlhttp.readyState === 4){
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){
                            //处理返回的结果
                            console.log("请求成功");
                        }else{
                            console.log("请求失败");
                            
                        }
                    }      
            }
         
        }

responseText和responseXML

8. IE的兼容性写法
   创建异步对象：
   

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

在ie浏览器中，如果使用ajax发送get请求，那么ie浏览器会认为同一个url中只有一个结果
解决办法：在文件末尾加''?t=" +（new Date().getTime()）;

9. ajax-get的封装
   注意：url不能出现中文，需要转码。 需要设置超时时间。

function myAjax (url,obj,time,success,error){
   //0. 将对象转换为字符串
   var str = objToStr(obj);
   //1. 创建异步对象
   var xmlhttp;
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }   
   //2.设置请求方式和请求地址
   // method：请求的类型；GET 或 POST
   // url：文件在服务器上的位置
   //async：true（异步）或 false（同步）
   xmlhttp.open("GET",url+"?"+str,true)
   //3.发送请求
   xmlhttp.send();
   //4.监听状态的变化
   //0: 请求未初始化
   //1: 服务器连接已建立
   //2: 请求已接收
   //3: 请求处理中
   //4: 请求已完成，且响应已就绪
   xmlhttp.onreadystatechange = function(ev2){
          //判断是否请求成功
           if (xmlhttp.readyState === 4){
               clearInterval(timer);
               if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){
                   //5.处理返回的结果
                   success(xmlhttp);
               }else{
                   error(xmlhttp);
                   
               }
           }      
   }
   // 转换函数
   function objToStr(obj){
       var res = [];
       obj.time = new Date().getTime;
       for (var key in obj){
           //url不能出现中文，利用encode转码
           res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));
       }
       return res.join("&");
   }
   //设置超时时间
   if(time){
       timer = setInterval(function(){
           console.log("中断请求");
           xmlhttp.abort();
           clearInterval(timer);         
       },time)       
   }    
}

10. php中，如果执行结果有中文或者需要返回xml数据，必须在php顶部设置
    header("Content-type:text/xml;charset=utf-8");

11. ajax函数的封装：https://github.com/aeyoo/myRepository/blob/master/function/myAjax.js

12. json ：固定的数据格式
    将文本中的数据提取： 注意,在低版本的ie中，不可以使用原生的JSON.parse() 方法，需要用框架兼容

var str = xmlhttp.responseText;
var obj = JSON.parse(str);
console.log(obj.name);
console.log(obj.age);