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不支持