初识Ajax

最新推荐文章于 2024-07-22 21:07:03 发布

在学了在学了！

最新推荐文章于 2024-07-22 21:07:03 发布

阅读量200

点赞数

分类专栏：笔记文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/xieyihu/article/details/127328046

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一，全局刷新和局部刷新

1.全局刷新

使用form,href等发起的请求；
**缺点：**传递的数据量大；占用网络的带宽；
浏览器需要重新渲染整个页面，用户体验不是很好；

2.局部刷新

页面不动，数据发生了改变；在当前的页面中，发起请求，获取数据；更新当前页面的dom对象，对视图进行刷新；
**优点：**改进了上面的缺点；

2.异步请求对象

在局部刷新中，
异步对象接受的使用；

使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据；
局部刷新需要使用的技术：

JavaScript：创建对象，调用它的属性和方法；
dom：处理dom，更新数据；
css:
serviet：
这些技术的综合使用称为Ajax；

二，Ajax

是一种无序重新加载网页的情况下，更新部分页面内容的方法；
不是一种新的编程语言，是多种技术的综合使用；使用Ajax实现局部刷新；
什么是异步请求和同步请求？
异步请求：相当于微信发消息，不用等待结果，等其回复再去处理；
同步请求：打电话，一对一，等的；

1.异步对象的属性和方法

在这里插入图片描述

//1.创建异步对象
        var xhr = new XMLHttpRequest();
        //2.绑定事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                //获取数据
                let date = xhr.responseText();
                //更新dom对象
                document.getElementById().innerHTML = date;
            }
        }   
        //3.初始请求的参数，执行open
        xhr.open("get","local",true);
        //4.使用异步对象发送请求
        xhr.send();

<body>
    <div align = "center">
        <p></p>
        <table>
            <tr>
                <td>姓名：</td>
                <td><input type="text" id=" name"></td>
            </tr>
            <tr>
                <td>体重：</td>
                <td><input type="text" id="w"></td>
            </tr>
            <tr>
                <td>身高：</td>
                <td><input type="text" id=" h"></td>
            </tr>
            <tr>
                <td>操作：</td>
                <td><input type="button" value="ajax" onclick="doAjax()"></td>
            </tr>
        </table>
    </div>
    <script >
        function doAjax(){
            console.log('button00000');
            //具体内容******
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){

            }
            xhr.open('get','',true);
            xhr.send();
        }