Ajax 异步交互

异步交互

描述

• 同步交互

  • 表示先发送一个请求，等待返回响应，在去发送下一个请求，以此反复

• 异步交互

  • 表示发送一个请求时，不需要等待返回响应，可以随时发送下一个请求

XMLHttpRequest对象

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

实现Ajax的步骤

1. 创建XMLHttpRequest对象

   • 通过createXMLHttpRequest()方法来创建XMLHttpRequest对象

2. 调用XMLHttpRequest对象的open()方法

   • open()方法

     • 用于与服务器端建立连接

   • 参数

     • 第一个参数 - 表示当前的请求方式

       • 常见的请求方式为 GET 和 POST
     • 第二个参数 - 表示当前请求的服务器端地址链接

3. 调用XMLHttpRequest对象的send()方法

   • send()方法

     • 用于将客户端页面的数据发送给服务器端

   • 参数

     • 需要传递数据内容时 - 向该方法传递相关的数据内容
     • 不需要传递数据内容时 - 向该方法传递null

4. 利用XMLHttpRequest对象的onreadystatechange事件

   • onreadystatechange事件

     • 用于监听服务器端的通信状态

   • 服务器端的通信状态中 - 存在着处理完毕(信号)

     • 接收服务器端返回的处理结果

   • readyState属性

     • 表示服务器端的通信状态

     • 属性值

       • 0 - 未初始化
       • 1 - open()方法被调用
       • 2 - send()方法被调用
       • 3 - 正在响应
       • 4 - 响应已完毕

   • responseText属性

     • 用于接收服务器端的响应结果

5. 将接收到的结果更新到HTML页面

   • 通过HTTP协议来完成

示例代码

按钮

readyState属性

• XMLHttpRequest对象的readyState属性

  • 表示服务器端的通信状态

  • 属性值

    • 0 - 未初始化
    • 1 - open()方法被调用
    • 2 - send()方法被调用
    • 3 - 正在响应
    • 4 - 响应已完毕

• XMLHttpRequest对象的status属性

  • 用于得到当前请求之后的响应状态码

    • 保证当前的异步请求一定是正确的

  • 属性值

    • 200 - 表示请求成功
    • 404 - 表示服务器端地址未找到

• responseText属性

  • 专门接收字符串类型的结果内容

• responseXML属性

  • 专门接收XML数据格式的结果内容

示例代码

按钮

send()方法

• XMLHttpRequest对象的send()方法

  • 用于将客户端页面的数据发送给服务器端

• 参数

  • 需要传递数据内容时 - 向该方法传递相关的数据内容
  • 不需要传递数据内容时 - 向该方法传递null

注意

• send()方法的参数与当前的请求方式有关

  • 如果当前的请求方式为 GET

    • send()方法中只能传递 null值

      • 将请求数据添加到请求地址链接中

  • 如果当前的请求方式为 POST

    • 需要先通过setRequestHeader()方法来设置请求头部信息
    • send()方法传递请求数据

示例代码

按钮