ajax

XMLHttpRequest取得响应

var xhr = new XMLHttpRequest();    //创建XMLHttpRequest实例

xhr.open("GET","get.php?参数",true);       //async 默认为true异步

xhr.send();                                     //发送请求        //若为post,则构造参数data,用send传

xhr.onreadystatechange = function(){            //监听readystate属性的状态

     if(xhr.readyState ===4 && xhr.status  ===200){      //readystate为4 服务器接收并处理请求,status为200 返回成功。

               //想做的事 document.getElementById('searchResult').innerHTML= xhr.responseText;                                                            //responseText 服务器返回的文本数据

        }else{

      alert(xhr.statusText);                            //statusText 服务器返回的状态文本

    }

};

新版本HTTP

1设置http请求的时限:XMLHttpRequest对象,增加了timeout属性:

  xhr.timeout = 3000        //设置时长

  xhr.ontimeout = function(event){alert('请求超时');}     //其ontimeout事件指定回调函数

2 FormData 对象 模拟表单操作

  var formData = new FormData();

  formData.append('username','张三‘);

  formData.append('id',12345);

  xhr.open('POST',form.action);       //formData=new FormData(form);

  xhr.send(formData);

3 上传文件  (input[type='file']),

var formData = new FormData();

for (var i = 0; i<files.length;i++){

  formData.append('files[]',files[i]);}

xhr.send(formData);

4 进度信息 XMLHttpRequest对象,传递数据时有一个progress事件,用来返回进度信息

下载的progress事件属于XMLHttpRequest对象,上传的progress事件属于XMLHttpRequest.upload对象。

xhr.onprogress = updateProgress;

xhr.upload.onprogress = updateProgress;

function updateProgress(event){

  if (event.lengthComputable){

    var percentComplete = event.loaded / event.total;

    }

  }

json   存储和交换文本信息的语法,类似XML,采用键值对的方式来组织

json在js中的解析:

eval('('+jsondata+')');   //相对不严格,不易出格式上的报错,但会被恶意转换路径

JSON.parse(jsondata);  //严格json格式,但也不会恶意执行其中的代码

      JSONLink 检测json格式

{data:[

         {"key":"value"},{"key":"value"},{"key":"value"}

]}   //数据

{"success":true,"msg":'xxx'}   //逻辑

跨域访问数据:jsonp 只适用于get请求来实现跨域

HTML5提供的XMLHttpRequest leval2 实现跨域 但IE10不支持

原文地址:https://www.cnblogs.com/yxiaoqian/p/5746385.html