[原生Js]AJAX学习笔记(总结)

Hello I'm Shendi,this is ajax note;get with w3c...

AJAX(Asynchronous Javascript and xml) 异步js和xml

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法
    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下
    AJAX是一种无需重新加载整个网页的情况下,能够更新部分网页的技术

 XMLHttpRequest(XHR)是AJAX的基础

所有现代浏览器均支持XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)
    创建XMLHttpRequest对象
        var obj = new XMLHttpRequest();
        老版本的(IE5 IE6) 使用ActiveXObject
            var obj = new ActiveXObject("Microsoft.XMLHTTP");
    兼容创建(应对所有的现代浏览器)
        var obj;
        if (window.XMLHttpRequest) {
            //支持XMLHttpReqeust
            obj = new XMLHttpRequest();
        } else {
            //不支持
            obj = new ActiveXObject("Microsoft.XMLHTTP");
        }

XHR请求

向服务器发送请求:使用XMLHttpRequest对象的open()和send()函数
        open(method,url,async); 规定请求的类型,URL,以及是否异步处理请求
            method                请求的类型;GET 或 POST
            url                    文件在服务器上的位置
            async                true(异步) false(同步)
        send(string); 发送请求到服务器XHRXHR
            string                仅用于POST请求=url上面的参数比如:a=b&b=c
        异步请求获取服务器上的hello.txt文件,GET请求
            var obj = new XMLHttpRequest();
            obj.open("GET","hello.txt",true);
            obj.send();
        GET or POST?
            与POST相比,GET更简单也更快,并且在大部分情况下都能用
            在以下情况中,请使用POST请求
                无法使用缓存文件(更新服务器上的文件或数据库)
                    get获取到的可能是浏览器缓存的结果
                        (可以像验证码点击刷新那样随机更改url参数来解决)
                发送大量数据(POST无数据量限制)
                发送包含位置字符的用户输入
        可以使用 setReqeustHeader(header,value); 函数来添加http头
            header                规定头名称
            value                规定头的值
    当async = true时(异步),
    请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
        obj.onreadystatechange=function () {...}
        obj.open(...);
        obj.send();

XHR响应

使用XMLHttpRequest对象的responseText或responseXML属性来获取服务器响应
        responseText 获得字符串形式的响应数据
        responseXML 获得XML形式的响应数据

onreadystatechange 事件

当请求被送到服务器时,我们需要执行一些基于响应的任务
    每当readyState改变时,就会触发onreadystatechange事件
    readyState属性存有XMLHttpRequest的状态信息 0-4
        0 请求未初始化
        1 服务器连接已建立
        2 请求已接收
        3 请求处理中
        4 请求已完成 且响应已就绪
    status
        200 完成
        404 未找到页面