【 Ajax 】之异步交互

Ajax

1.同步交互与异步交互

同步交互;就是发送个请求到服务器端,等待返回,然后再发送下个请求
异步交互;就是发送个请求到服务器端,无需等待返回,直接发送下个请求,不过呢,可能会等待上个请求

2.Ajax是什么

关于HTML页面中能够快速加载到界面病展示个用户,不需要再次加载页面
实现Ajax步骤

<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.open('get','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);

        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
               console.log(xhr.responseText);

            }
        }
    });
</script>
</body>

3.实现Ajax异步交互

创建XMLHttpRequest对象
调用XMLHttpRequest对象open()方法
调用XMLHttpRequest对象send()方法
利用XMLHttpRequest对象onreadystatechange事件

readySate属性

<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (){
        var xhr = createXMLHttpRequest();
//        创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
               console.log(xhr.status);
               if (xhr.status === 200){
                   console.log(responseText);
               }
            }
        }
        xhr.open('get','http://localhost:63342/code/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);
    })
</script>
</body>

4.GET与POST请求方式

GET;创建的请求数据增加到open()方法的url地址中
将发送请求数据的send()方法参数为null值
POST;需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求信息
通过XMLHttpRequest对象的send()发送请求数据

<body>

<form action="#" enctype="application/x-www-form-urlencoded">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');

    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        // 创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {// 监听服务器端的通信状态
            if(xhr.readyState === 4){
                console.log(xhr.status);
                if (xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('post','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html?user=zhangwuji&pwd=123456');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 设置请求头部信息
        xhr.send('user=zhangwuji&pwd=123456');
    });
</script>
</body>

JSON数据格式

1.JavaScript中的JSON

<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
//    JSON字符串-该格式符合JSON格式要求,类型就是字符串的类型
    var jsonObject = {
        name : '犬夜叉'
    }
    var jsonArr = [1,2,3,4];
//    JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组
</script>
</body>

2.JSON字符串与JSON对象

    <script src="js/json2.js"></script>
</head>
<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);
//    JSON字符串
</script>
</body>

Ajax中的JSON

<body>
<button id="qyc">提交</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 接收数据 - JSON数据格式,是字符串类型
                var data = xhr.responseText;
                // 将符合JSON格式的字符串类型数据进行转换
                var json = JSON.parse(data);
                // 进行具体处理
                console.log(json);
            }
        }

        // 请求数据格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        var obj = {
            name : '犬夜叉',
            age : 16
        }
        // 将JSON字符串转换成符合请求数据的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });

</script>
</body>

Ajax中的XML

<body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200){
                var data = xhr.responseXML;
                //接收数据-responseXML属性-接收XML数据格式
                var nameElement = data.getElementsByTagName('name')[0];
                // 利用DOM解析XML
                console.log(nameElement.textContent);
            }
            xhr.open('post','server.xml');
            xhr.snd(null);
        }
    });
</script>
</body>
    原文作者:佐珥玎
    原文地址: https://segmentfault.com/a/1190000016377524
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞