Ajax学习笔记 (一)

Ajax | 定义

AJAX 的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言,而是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分

同步概念 | 响应慢体验性不好

异步概念 | 实时显示体验性好

语法部分 | 原生XMLHttpResult

    //创建一个Request对象
    var request = new XMLHttpRequest();

    //通过Open发送http请求方式、地址、是否为异步
    request.open("GET/POST","get.php",ture);

    //获取请求内容
    var data =  document.getElementById("staffName").value;

    //setRequestHeader设置编码方法,定义请求头
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
    //通过Send发送http请求内容
    request.send(data); 
    request.send("name=Jason&sex=boy");

HTTP响应 | 状态码

    1、数字+文字状态码 成功or失败
    2、响应头 包括请求类型、时间、内容、长度
    3、响应体 包括请求正文、HTML内容、表单数据、字符串等

    1开头 – 代表 –【正在处理】
    2开头 – 代表 –【请求成功】
    3开头 – 代表 –【重新定向、进一步处理】
    4开头 – 代表 –【客户端错误、404】
    5开头 – 代表 –【服务端错误、500】

XMLHttpRequest响应 | readyState监听

    1、responseText 获取字符串
    2、responseXML 获取XML数据
    3、status 和 statusText 以数字文本返回状态码
    4、getAllResponseHeader 获取所有响应头
    5、getResponseHeader 查询某个字段的值

readyState属性:

    0 – 代表 –【请求未初始化】
    1 – 代表 –【open调用】
    2 – 代表 –【接受请求】
    3 – 代表 –【请求中、接收头信息】
    4 – 代表 –【已经完成】

onreadystatechange = function | 监听状态

    JsonLint(Json校验工具)
    Fidder(监听工具、web调试工具)
    XAMMP(服务端运行环境、http://www.apchefriends.org)

    <script type="text/javascript">
        request.onreadystatechange = function() {
            // 监听是否请求结果
            if (request.readyState===4) {
                if (request.status===200) {
                    // 解析JSON
                    var data = JSON.parse(request.responseText);
                    // 成功后执行、失败后执行
                    if (data.success) { 
                        document.getElementById("createResult").innerHTML = data.msg;
                    } else {
                        document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
                    }
                } else {
                    alert("发生错误：" + request.status);
                }
            } 
        }
    </script>

Ajax跨域 | 协议 + 子域名 + 主域名 + :端口号 + /服务端地址

    1、建立2个链接、后端访问返回到前端值
    2、Jsonp 通过script标签[不兼容POST] header(“Content-Type: application/json;charset=utf-8”);
    3、利用HTML5特性 XMLHttpResult level2[不兼容IE10]