Ajax学习笔记

get post
　　post相对于get安全，但在network的最下方heders/formData仍能看到
　　form
　　　　action methord enctype(字符格式，比如传文件)

现在用 ajax jsonp等其他的方式
　　很多情况已经不用form做跨域传递了
　　同步与异步(计算机语言 和 生活语言 相反)
　　1. 创建Ajax对象
　　　　主流浏览器:var ajax1 = new XMLHttpRequest()
　　　　兼容IE：var ajax2 = new ActiveXObject('Microsoft.XMLHTTP')
　　2. 初始化Ajax对象
　　　　.open(methord,url,flag(同步或异步)) 异步true 同步false methord:put是什么需了解
　　3. 发送请求
　　　　.send(data); //post时候需要data塞进send，get时还是拼入url
　　4. 每次状态变化都会触发(而我们需要确定是从哪个状态位变到哪个状态位)
　　　　onreadystatechange() 状态改变触发器
　　　　readyState() 对象状态(integer)
　　　　　　0未初始化
　　　　　　1读取中
　　　　　　2已读取
　　　　　　3交互中
　　　　　　4完成
　　5. if(readyState == 4) status == 200 处理
　　　　404文件未找到 500服务器内部错误 304资源被修改
　　　　1xx 信息 接到请求继续处理
　　　　2xx 成功 成功收到 理解 接受
　　　　3xx 重定向 为了完成任务要做另一措施(如直接从浏览器获取资源，跳转其他页面等)
　　　　4xx 客户端错误 请求语法错误，不能完全符合要求
　　　　5xx 服务器错误 服务器无法完成明显有效的请求

<script ...>
    var app = null;
    if(window.XMLHttpRequest){
        app = new XMLHttpRequest();
    }else{
        app = new ActiveXObject('Microsoft.XMLHTTP');
    }
    app.open('GET','./getMyData.php',true);
    //post限定
    setRequestHeader("Content-type","application/x-www-form-urlencoded")
    //post中的内容是什么类型
    app.send();
    app.onreadystatechange = fuction(){
        if(app.readyState == 4){
            //doSth
            if(app.status == 200){
                app.responseText //有时候直接返回的字符串
                JSON.parse(app.responseText); //
                ..sth..
            }
        }
    }
</script>    

 

　　为了防止网页用缓存糊弄人/对抗懒加载机制，可以刻意在请求后面拼接时间戳
　　只有get才会有缓存问题
　　post在send和open 之间还需要 setRequestHeader("label","value") 把指定头部设置为所提供的值，在设置任何　　　　　　　　首部之前必须先调用open吃石化ajax对象

data = JSON.parse(app.responseText);
data.forEach(
    function(data[i][prop1],data[i][prop2]){
    　　do sth with prop1,prop2
    }
)

　　封装:全部参数封入一个函数的参数列表，根据各处操作 区分IE/主流 做不同请求类型的操作
JQueryAjax
　　$.ajax
　　格式:

$ajax{{
    type:'get',
    url:'.....',
    data:{ uname:"zhangsan"},
        success:function(data){
            var boj = JSON.parse(data);
            sth of data
        }
}};

　　参数:
　　　　type: 　　 请求方式GET/POST
　　　　url: 　　    请求地址url
　　　　async: 　  是否异步，默认是true异步
　　　　data: 　　 发送到服务器的数据
　　　　dataType: 　　预期服务器返回的数据类型
　　　　contentType:　　设置请求头
　　　　success: 　　　　请求成功时调用这个函数
　　　　error: 　　　　　　 请求失败时调用这个函数
　$.get

$get(
　　"url",
　　{params1:"aaaa",params2:"bbb"},
　　function(data){
    　　sth with data

　　}

);

　　失败时如果要执行error，
　　　　1.请求json文件，忽略返回值
　　　　2.
　　　　3.
　　　　4.
　$.post
　　与get语法相同
　$.getJSON
　　要求返回格式必须是Json格式的，Json格式的字符串也行，非Json会不识别

暂缺TypeScript Ajax 及rxjs