关于前后端结合

最新推荐文章于 2023-12-22 16:27:46 发布

GDUFSGOP

最新推荐文章于 2023-12-22 16:27:46 发布

阅读量378

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/GDUFSGOP/article/details/104053055

版权

AJAX快速上手

1、AJAX由来：
Asynchronous JavaScript And XML（异步的JS和XML）
以前用xml描述一个有结构的数据
现在更多用的不是xml而是json的数据存储格式（json更加清晰）
其实现在是：AJAJ
但由于历史原因延用下来就成称为AJAX

2、作用简介
传统的浏览器请求后服务器响应，会使整个网页刷新；而ajax是在此基础上实现网页的局部刷新，从而提升用户体验。

3、实现原理
ajax仅向服务器发送并取回必需的数据，它使用基于XML的web service接口，并在客户端采用js处理来自服务器的响应。因此减少浏览器和服务器之间交互的数据，减少web服务器的处理时间，使得响应更加快速。

4、ajax是一套api：核心提供的类型是XMLHttpRequest
XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式。

5、代码演示
//基于phpstudy的开发环境（本地php）
1）新建html

<body>
<div id="demo"><h2>让 AJAX 更改这段文本</h2></div>
<button type="button" onclick="loadDoc()">更改文本</button>
</body>

2）在html头部添加js代码

<script>
        function loadDoc() {
            // 1.用户代理（xhr类似于浏览器的作用）
            var xhr = new XMLHttpRequest();     //初始化，请求代理对象（状态码：0）

            // 2.打开浏览器，输入网址
            xhr.open("GET", "http://localhost/test03/ts001/response.php", true);    //建立一个与服务端 端口的连接（状态码：1）

            // 3.敲击回车，开始请求
            xhr.send();

            // 4.获取响应
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // 获取相应体
                    // console.log(this.responseText)
                    document.getElementById("demo").innerHTML = this.responseText;
                }       //4放在1后可捕获1，2，3，4的状态码（状态码见readyState）
            };
        }
    </script>