1.创建对象
var xhr = new XMLHttpRequest();
4.设置状态变化的监听事件
xhr.onreadystatechange = function(){
//5.判断当前请求的状态
if(xhr.readyState == 4){
//6.获取请求结果：
console.log(xhr.responseText);
}
};
2.创建请求： get/post
xhr.open('get','url地址')
3.发送请求
xhr.send(null); // post请求的form表单数据， get请求设置null即可
请求状态：xhr.readyState
0：创建对象
1：已经调用open方法
2：已经调用send方法
3：开始返回数据，但是不完整
4：数据返回完整，请求成功请求监听事件：xhr.onreadystatechange
可以监听到1-4这几个状态，无法监听到0的状态-
对特殊字符进行编码：
- encodeURIComponent(str)
-
POST请求需要设置请求头信息：(必须要在open方法之后调用)
- xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
-
同步异步请求
- open(get|post,url,[true异步|false同步])
给请求地址加上随机数，可以避免浏览器缓存问题
-
字符串转换成json:
- var json = "{'city':'shen zhen'}";
- eval("var j_info="+json);
post提交表单数据
var fd = new FormData(表单对象);
xhr.send(fd)
-
注意：
- 不要设置setRequestHeader了
- 表单中一定要写name属性
-
进度条
- xhr.upload.onprogress = function(evt){
var loaded = evt.loaded; //已上传大小
var total = evt.total; //总大小
var per = Math.floor((loaded/total)*100)+"%"; //计算百分比
//设置指定元素的样式
document.getElementById('son').style.width = per;
}
- xhr.upload.onprogress = function(evt){
