zoukankan      html  css  js  c++  java
  • 关于ajax的基础知识

    一、是什么

      一种异步请求数据的web开发技术,对于改善用户体验和页面性能很有帮助。简单的说就是在不需要刷新页面的情况下实现局部dom的更新。应用场景如:模糊查询以及验证提示等。

    二、原理

      因为js是一个单线程的脚本语言,那么他是如何实现ajax异步的呢?这就得益于流浪器提供的一个XMLHttpRequest对象。我们举个例子:领导想找小李让其汇报下工作。

        1、领导告诉秘书叫小李过来

        2、领导接着干别的事儿

        3、秘书去叫小李

        4、秘书领小李过来

        5、秘书告诉领导小李来了

        6、小李向领导汇报工作

      以上基本可以模拟ajax的请求过程,其中XMLHttpRequest对象就扮演了秘书一角色,使得流浪器可以发出http请求接收http响应。流浪器发出请求之后就可以做其他的事情了,等收到XMLHttpRequest对象返回的数据就开始渲染页面。

    三、使用

    <script type="text/javascript">
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("POST","test.html",true);  
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post方法要设置请求头  
        xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面,即请求体
    
    
        //1、同步处理
        document.getElementById("xxx").innerText = xhr.responseText
        //2、异步处理
        xhr.onreadystatechange=function(){
            if(xhr.readyState == 4 && xhr.status ==200){
                document.getElementById("xxx").innerText = xhr.responseText
            }
        }
    </script>
  • 相关阅读:
    vite的使用
    webpack--Plugin
    webpack--loader
    uniapp 或小程序,通过蓝牙连接设备, 给设备配网
    每一项与之前一项相加
    vue使用vue-fullpage
    React基礎
    无间隙循环轮播效果
    Wow.js动画效果
    正则表达式
  • 原文地址:https://www.cnblogs.com/helloNico/p/10976497.html
Copyright © 2011-2022 走看看