【Ajax异步交互与跨域访问】Ajax的基本用法_ajax 跨平台交互技术-优快云博客

本文链接：https://blog.youkuaiyun.com/XHoler/article/details/108431888

一. 同步交互与异步交互

同步交互
同步交互，指发送一个请求，需要等待返回，然后才能够发送下一个请求。

同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同
- 过程：
客户端向服务端发送请求并等待服务器端响应，服务器端向客户端进行响应。

分别进行过请求和响应之后客户端才能发送下一个请求
- 同步交互第二次请求必须等待第一次请求结束之后才能开始
异步交互
异步交互，指发送一个请求，不需要等待返回，随时可以发送下一个请求。

同步交互和异步交互的区别在于同步交互需要等待结果，而异步交互不用等待
- 过程：
客户端向服务端发送一个请求之后可以继续发送请求。然后服务器依次响应
- 异步交互就是第二次请求不需要等待第一次请求结束之后就可以开始
异步交互相对于同步交互
- 优势
  - 用户操作无须像同步交互必须等待结果
  - 异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新
  - 异步交互对带宽造成的压力相比同步交互更小
  - 通过Ajax实现异步交互不需要任何第三方插件，只要游览器支持JavaScript语言即可实现
- 劣势
  - 异步交互破坏力游览器原有的前进和后退机制
  - 如果后面逻辑的执行依靠前面的逻辑执行的结果，异步交互可能出现问题
  - Ajax实现异步交互对搜索引擎支持较弱
  - Ajax实现异步交互会引起一些Web安全问题，如SQL注入攻击、跨站点脚本攻击等

二. Ajax是什么

Ajax(Asynchronous JavaScript XML)是一套技术的组合。使用Ajax模型，HTML页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。

Ajax是局部更新，可以更快的对用户的操作进行反馈。
JSON和XML都被用于在Ajax模型中封装数据

Ajax涉及的技术

Ajax是为了实现异步交互的手段，不是一种技术，而是以下多种技术的集合：

HTML页面
Cascading Style Sheets (CSS)
JavaScript脚本语言
Document Object Model (DOM)
XML
XMLHttpRequest：实现Ajax异步交互的核心

Ajax的核心对象

XMLHttpRequest就是Ajax异步交互的核心，这个对象为客户端提供了客户端和服务器之间传输数据的功能

最初由微软设计，随后被Mozilla、Apple和Google采纳。现已被W3C组织标准化
通过该对象可以得到一个URL上的数据资源，可以是所有类型的资源，不限于XML
该对象通过URL获取数据的方式不会使整个页面刷新。网页只更新一部分不会打扰用户

三. 实现Ajax异步交互

实现Ajax的执行步骤

创建Ajax的核心对象XMLHttpRequest对象
通过XMLHttpRequest对象的open()方法与服务器建立连接
构建请求所需的数据内容，并通过XMLHttpRequest对象的send()方法给服务器端
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
接收并处理服务器端向客户端响应的数据结果
将处理结果更新到HTML页面中

XMLHttpRequest对象的属性
- readyState属性表示服务器的通信状态
  - 0 未初始化
  - 1 open方法被调用
  - 2 send方法被调用
  - 3 正在响应
  - 4 响应完毕
- status属性返回响应中的数字状态码
  - 200 — 表示请求成功
  - 304 — 表示请求的资源未找到
  - 404 — 表示服务器端地址未找到
- send(data)方法向服务器端请求数据
  - 参数data—表示要向服务器端发送的请求
    - 请求方式
      
      GET—只能传递null值
      要将请求数据添加到请求地址连接中
      
      POST—可以正常传递值
      要设置请求头
      
      xhr.setRequestHeader('Content-Type','application/X-www-form-urlencoded');
    - 两种情况
      
      发送数据—类似于键值对，多个用&分隔 user=admin&password=0000
      不发送数据—要设为null，不能为空
- 接收服务器端响应的结果
  - responseText 专门接收字符串类型的结果内容
  - responseXML 专门接收XML类型的结果内容

XMLHttpRequest对象

(function () {
    function createXMLHttpRequest() {
        var httpRequest;
        if (window.XMLHttpRequest) { // 适用于Chrome、Firefox、Safari
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // ie 7以后的版本
            } catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // ie 6以前的版本
                } catch (e) { }
            }
        }
        return httpRequest;
    }
    window.createXMLHttpRequest = createXMLHttpRequest;
})()

readyState属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>readyState属性</title>
    <script src="./创建Ajax核心对象.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function () {
            // 创建核心对象XMLHttpRequest
            var xhr = createXMLHttpRequest();

            xhr.onreadystatechange = function () {

                console.log(xhr.readyState);
                /*
                    XMLHttpRequest对象的readState属性  表示服务器的通信状态
                    0  未初始化
                    1 open方法被调用
                    2 send方法被调用
                    3 正在响应
                    4 响应完毕
                */
                if (xhr.readyState === 4) {
                    /*
                        保证当前的异步请求一定是正确的
                        - XMLHttpRequest对象的status属性
                          - 200 --- 表示请求成功
                          - 304 --- 表示请求的资源未找到
                          - 404 --- 表示服务器端地址未找到
                    */
                    console.log(xhr.status);
                    if(xhr.status === 200){
                        /*
                            接收服务器端响应的结果
                            responseText  专门接收字符串类型的结果内容
                            responseXML   专门接收XML类型的结果内容
                        */
                        console.log(xhr.responseText);
                    }
                }
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }

            xhr.open('get', 'http://127.0.0.1:5500/2020/Ajax%E5%AD%A6%E4%B9%A0/code%20file/Ajax%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
            xhr.send(null);
        })
    </script>
</body>
</html>