AJAX相关

作者 糖一瓶 日期 2018-01-10
AJAX
AJAX相关

一、原生AJAX

我的代码式笔记：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    // 1.首先创建xhr对象
    var xhr = null;
    // 能力检测
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject("Mircosoft.XMLHTTP");
    }

    /*
        // 封装获取xhr的工厂
        var xhr = getXHR;
        function getXHR () {
            if (window.XMLHttpRequest) {
                return new window.XMLHttpRequest();
            }else {
                retrun new ActiveXObject("Mircosoft.XMLHTTP");
            }
        }
    * */

    // 4.设置回调函数（因为浏览器的兼容性问题要写在配置和发送之前）
    // 回调函数就是表示收到请求后做什么
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
                    // 获取文本信息
                    var data = xhr.responseText;
                     console.log(data);
                }else {
                    throw new Error("请求发生错误");
                }
            }
        }
    /*
       // 关于回调函数中的属性

        xhr.readyState (就绪状态)
        0   未初始化状态
        1   xhr对象正在加载
        2   xhr对象加载完成
        3   正在传输数据
        4   全部完成

        只要数据值发生改变就会触发onreadystatechange
        xhr.onreadystatechange 可以捕获state值改变后做的事情
        当xhr.readyState == 4    对象加载数据传输完成

        xhr.status (http状态码)
        1**   消息
        2**   成功
        3**   重定向
        4**   请求错误
        5**   服务器错误
        6**   其他

        当xhr.status == 2** ||304时是成功状态
    */

    /*
        //关于ajax中的缓存问题
        ajax中缓存问题严重
        解决方法：在请求后加一个时间戳或者随机数
    */


    // 2.配置
    xhr.open("get","text.php",true);
    /*
     // 关于三个参数
     1)请求类型  "get" 或 "post"
     2)文件路径
     3)是否异步  true为异步 没人会用false！
     */


    // 3.发送请求
    xhr.send(null); //get方法没有需要提交的内容。必须写null不能空着。

    /*
     // 关于ajax传递post请求
     xhr.open("post","text.php",true);
     // post程序在服务器中很难处理，但如果是表单处理，PHP中有相应的处理程序，所以我们要手动的post程序转换成表单程序。
     // ajax模拟提交表单
     xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
     xhr.send(提交的内容);
     */
</script>
</body>
</html>

二、JQuery的AJAX

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
        // data 报文信息
        // data是服务器发送到浏览器端的数据【报文体】
        $.get("text.php",function(data){
        });

    /*
        //get携带参数
        $.get("text.php?k1=v1&k2=v2",function (data) {

        });

     $.get("text.php?k1=v1&k2=v2",json数据,function (data) {

     });
    */

/*-------------------------------------------------------------------------*/
    /*
        //post携带参数
        $.post("text.php?k1=v1&k2=v2",json数据,function (data) {

        });
    */


    /*
        //json数据格式
        {
            k1:v1,
            k2:v2,
            k3:v3
        }


   */

/*-------------------------------------------------------------------------*/

    /*
    //JQ如何使用json数据格式
    $.get("system/jiekou.php",function(data){
    // var dataObj = typeof data == "object" ? data : JSON.parse(data);
    // var dataObj = typeof data == "object" ? data : (new Function("return"+data))();
    var dataObj = typeof data == "object" ? data : eval("("+data+")");
    console.log(dataObj.result)
    })

    */

</script>
</body>
</html>
FEATURED TAGS
AJAX