Ajax学习笔记

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;
    }