Ajax基础

最新推荐文章于 2025-02-24 13:36:17 发布

原创最新推荐文章于 2025-02-24 13:36:17 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #Spring Boot #JavaScript

learn 专栏收录该内容

6 篇文章

订阅专栏

A(Asynchronous)J(JavaScript)A(And)X(XML)

[ˈeˌdʒæks]

异步的JavaScript和XML

Ajax最大的优点就是在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容。

不使用Ajax的传统网页，如果需要更新内容，必须重新载入整个页面

只需要浏览器允许JavaScript即可，不需要其他插件或技术。

XMLHttpRequest对象时Ajax的基础，所有浏览器都支持 XMLHttpRequest对象 (Chrome,Firefox,Edge....IE just go die!)

使用：

1.创建XMLHttpRequest对象。

                   var xtr = new XMLHttpRequest();

2.向服务器发送请求：[三个方法]

xtr.open("method","url",asynchronous);
xtr.setRequestHeader('X-test','test');
xtr.send([String]);    //String 可选，仅用于POST请求

3.服务器响应，如需获得服务器的响应，应使用XMLHttpRequest对象的 responseText 或 responseXML属性：

=xhr.responseText;

[三个属性]:

    当请求 被发送到 服务器时，我们需要执行一些基于响应的任务。
onreadystatechange = function(){
    .....//
}
    该属性用于存储函数(或函数名)，每当readyState属性改变时，就会调用该方法。

readyState //存有XMLHttpRequest对象的状态。从0 到 4；
    0：请求未初始化
    1：服务器连接已建立
    2：请求已接收
    3：请求处理中
    4：请求已完成，且响应已就绪

status   
    200："OK"
    404:未找到页面

-----------------------------
当 xhr.readyState==4&&xhr.status==200    时，表示响应已就绪

实例：
<script>
function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET","/sg/text",true);
            xmlhttp.send();


            xmlhttp.onreadystatechange=function (ev) {
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            
        }

</script>