Ajax 异步交互

时间 2019-12-05 标签 ajax 异步交互

异步交互

描述

同步交互html
- 表示先发送一个请求，等待返回响应，在去发送下一个请求，以此反复
异步交互服务器
- 表示发送一个请求时，不须要等待返回响应，能够随时发送下一个请求

XMLHttpRequest对象

XMLHttpRequest对象是Ajax的核心对象
XMLHttpRequest对象是实现异步交互的核心

<body>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    /*
        XMLHttpRequest对象
         * XMLHttpRequest对象是Ajax的核心对象
         * XMLHttpRequest对象是实现异步交互的核心
     */

    /* 经过createXMLHttpRequest()方法来建立一个XMLHttpRequest对象 */
    var xhr = createXMLHttpRequest();
    console.log( xhr );// 获得一个XMLHttpRequest对象
</script>
</body>

实现Ajax的步骤

建立XMLHttpRequest对象app
- 经过createXMLHttpRequest()方法来建立XMLHttpRequest对象
调用XMLHttpRequest对象的open()方法异步
- open()方法学习
  - 用于与服务器端创建链接
- 参数url
  - 第一个参数 - 表示当前的请求方式code
    - 常见的请求方式为 GET 和 POST
  - 第二个参数 - 表示当前请求的服务器端地址连接
调用XMLHttpRequest对象的send()方法orm
- send()方法htm
  - 用于将客户端页面的数据发送给服务器端
- 参数对象
  - 须要传递数据内容时 - 向该方法传递相关的数据内容
  - 不须要传递数据内容时 - 向该方法传递null
利用XMLHttpRequest对象的onreadystatechange事件
- onreadystatechange事件
  - 用于监听服务器端的通讯状态
- 服务器端的通讯状态中 - 存在着处理完毕(信号)
  - 接收服务器端返回的处理结果
- readyState属性
  - 表示服务器端的通讯状态
  - 属性值
    - 0 - 未初始化
    - 1 - open()方法被调用
    - 2 - send()方法被调用
    - 3 - 正在响应
    - 4 - 响应已完毕
- responseText属性
  - 用于接收服务器端的响应结果
将接收到的结果更新到HTML页面
- 经过HTTP协议来完成

示例代码

<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click', function () {
        /* 实现Ajax异步交互 */

        /* 1. 建立XMLHttpRequest对象 */
        var xhr = createXMLHttpRequest();

        /* 2. 调用XMLHttpRequest对象的open()方法 */
        /* 经过open()方法来创建与服务器端的关系 */
        xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );

        /*3. 调用XMLHttpRequest对象的send()方法 */
        /* 经过send()方法来向服务器端发送数据 */
        xhr.send( null );

        /* 4. 利用XMLHttpRequest对象的onreadystatechange事件 */
        /* 设置onreadystatechange事件 */
        xhr.onreadystatechange = function(){
            /* 经过readyState属性来判断服务器端的状态 */
            if (xhr.readyState === 4) {
                /* 经过responseText属性来获取服务器端的响应结果 */
                console.log( xhr.responseText );
            }
        }

        /*
            5. 将接收到的结果更新到HTML页面
             * 经过HTTP协议来完成
         */
    } );
</script>
</body>

readyState属性

XMLHttpRequest对象的readyState属性
- 表示服务器端的通讯状态
- 属性值
  - 0 - 未初始化
  - 1 - open()方法被调用
  - 2 - send()方法被调用
  - 3 - 正在响应
  - 4 - 响应已完毕
XMLHttpRequest对象的status属性
- 用于获得当前请求以后的响应状态码
  - 保证当前的异步请求必定是正确的
- 属性值
  - 200 - 表示请求成功
  - 404 - 表示服务器端地址未找到
responseText属性
- 专门接收字符串类型的结果内容
responseXML属性
- 专门接收XML数据格式的结果内容

示例代码

<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click', function(){
        var xhr = createXMLHttpRequest();

        xhr.onreadystatechange = function(){

            /* 显示readyState属性 */
            console.log( xhr.readyState );

            /* 判断当前服务器端的状态 */
            if ( xhr.readyState === 4 ) {

                /* 显示status属性 */
                console.log( xhr.status );

                /* 判断当前响应状态 */
                if ( xhr.status === 200 ) {
                  
                    /* 显示responseText属性 */
                    console.log( xhr.responseText );
                }
            }
            /* 能够同时判断当前服务器端的状态和响应状态 */
            if ( xhr.readyState === 4 && xhr.status === 200 ) {
                /* 显示responseText属性 */
                console.log( xhr.responseText );
            }
        };

        xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );
        xhr.send( null );
    } );
</script>
</body>

send()方法

XMLHttpRequest对象的send()方法
- 用于将客户端页面的数据发送给服务器端
参数
- 须要传递数据内容时 - 向该方法传递相关的数据内容
- 不须要传递数据内容时 - 向该方法传递null

注意

send()方法的参数与当前的请求方式有关
- 若是当前的请求方式为 GET
  - send()方法中只能传递 null值
    - 将请求数据添加到请求地址连接中
- 若是当前的请求方式为 POST
  - 须要先经过setRequestHeader()方法来设置请求头部信息
  - send()方法传递请求数据

示例代码

<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click',function(){
        // 1.建立XMLHttpRequest对象
        var xhr = createXMLHttpRequest();

        xhr.onreadystatechange = function(){
            if ( xhr.readyState === 4 && xhr.status === 200 ) {
                console.log( xhr.responseText );
            }
        };

        xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );

        /* 设置请求头部信息 */
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.send( null );
    } );
</script>
</body>