JS AJAX

<script type="text/javascript">
    /*ajax*/
   /*AJAX是异步的JavaScript和xml之间进行交流的技术,换而言之:JavaScript和服务器进行数据交互的一门技术
      xml 是可扩展标记语言,标签都是自己定义
      html 的标签是w3c组织定义好的,不能自己定义
      区别:
         html用来在浏览器显示内容的
         xml用来浏览器和服务器交互时,传输数据的
   响应数据
   responseText:获得字符串形式的响应数据
   responseXML:获得XML形式的响应数据
   //请求数据
   open(method,url,async);
      //mmethod:请求类型,GET或POST
      //url 文件在服务器上的位置
      //async: true(异步)或false(同步)
   send(string) 将请求发送到服务器
      //string:仅用于POST请求
   通过ajax对象的readyState属性,检查发生请求的状态
   0 请求未初始化: open()之前
   1 已建立连接: open()之后
   2 请求已发送: send()之后
   3 请求处理中
   4 请求已完成
   通过ajax对象的status属性,检查是否发生成功
   200表示请求成功
   404表示未找到请求的文件*/
   //兼容性处理
   try{
      var xhr = new ActiveXObject("Msxml2.XMLHTTP"); //IE
   }catch(e){
      console.log(e);
      var xhr = new XMLHttpRequest(); //主流浏览器
   }
   //get提交
   xhr.open('get','1.php'); //建立和服务器的链接
   xhr.send(); //发送请求
   object.onreadystatechange = function(){ //监视请求进度
      if(xhr.readyState == 4 && ajxhrax.status == 200){
         //请求成功
         var result = xhr.responseText; //返回数据
         alert(result);
      }
   }
     /*测试*/
    try{
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        var xhr = new XMLHttpRequest();
    }
    //post提交
    xhr.open('POST','http://localhost/index.php',true);
    //post提交需要加上
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    var data = '{nam:zhangsan&age:23}';
    xhr.send(data);

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status ==200){
            document.write(xhr.responseText);
        }
    }
   //get,post的区别
   /*1.给服务器传递的数据量
      每个浏览器的限制不一样,大部分浏览器是2k,Chrome是8k
      post原则上是没有限制,php.ini对其限制为8M
   2.安全性
      get方式在url地址栏传递参数,安全性不如post高
   3.传递数据的形式
      get方式在url地址后边以请求字符串形式传递参数
      post方式是以form表单的形式传递给服务器
   4.get方式缓存
      get方式由于是url地址栏请求,如果url地址没有变化有些浏览器就认为同一次请求,就读取浏览器缓存的内容
   注意:不管get,post请求,如果携带的参数含有特殊字符(=,&,?等)都要先编码在传递,如果get方式请求,对中文也要编码
   var content = encodeURIComponent("love&hate"); //url字符转码
   //序列化
   服务器通过echo回应数据
   如果回应的数据是数组的话,就不行了
   需要先将数组序列化然后再回应给客户端:
      echo json_encode();
   客户端接收数据之后,是一个{}格式的字符串
   需要解析成对象
    eval()
    eval('var obj ='+xhr.responseText)
        console.log(obj);*/
    /*服务器返回xml格式的数据*/
    try{
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        var xhr = new XMLHttpRequest();
    }
    xhr.open('get','http://localhost/test/test.xml',true);
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //var data = 'name=zhansan&age=23';
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status ==200){
           var xml = xhr.responseXML;
           console.log(xml);
           var student = xml.childNodes[0];//获取元素的集合
           console.log(student);
           var class2 = student.getElementsByTagName('class2')[0];
           console.log(class2);
           var score = class2.getElementsByTagName('score')[0];
           console.log(score);
           //最后一点和解析HTML文档不一样,获得标签里面的内容在xml文件中通过nodeValue属性获得
            //内容也是内容节点,所以想获得内容的话:firstChild的nodeValue属性来获得
           console.log(score.firstChild.nodeValue);
        }
    }
    /*test.xml
    <\?xml version="1.0" encoding="utf-8" ?>
   <student>
       <class1>
           <name>xiaobai</name>
           <score>90</score>
       </class1>
       <class2>
           <name>xiaobai</name>
           <score>90</score>
       </class2>
   </student>*/
   //表单序列化
   var oForm = document.getElementsByTagName('form')[0];
   var form = new FormDate(oForm);

   function serialize(form) {
        var formData = new FormData(form),
            getValue = formData.entries(),
            parts = [];
        for (var pair of getValue) {
            parts.push(pair[0] + "=" + pair[1]);
        }
        return parts.join("&");
    }

   //文件编码临时修改
   $file = iconv('utf-8','gbk',filename)

   //ajax文件上传显示进度条
    xhr.upload.onprogress = function(e){
        var ev = e || window.event;
        var percent = Math.floor((ev.loaded/ev.total)*100);
        //将百分比显示到进度条
        $('parent').style.display = 'block';
        $('child').style.display = 'block';

        //将上传进度显示到child里面
        $('child').style.width = percent+'%';
        $('child').style.textAling = 'center';
        $('child').innerHTML = percent+"%";

        //如果到达100就隐藏
        if(percent){
            $('paren').style.display = 'none';
            $('child').style.display = 'none';
        }
    }
</script>