原生jsAjax操作

最新推荐文章于 2025-07-05 12:46:28 发布

原创最新推荐文章于 2025-07-05 12:46:28 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #原生jsAjax操作 #Ajax操作 #Ajax怎么用

Ajax 专栏收录该内容

3 篇文章

订阅专栏

原生jsAjax操作过程：

头部代码：

<body>
      <!--展示商品类型的列表-->
      <ul id="classType"></ul>
</body>

<script>
    var _ct=document.getElementById("classType");


// 第一步 创建对象
    var _http;
    if(window.XMLHttpRequest){
        _http=new XMLHttpRequest();
    }else{
        _http=new ActiveXObject("Microsoft.XMLHTTP");

    }

// 第二步  打开接口的链接 并发送请求
    _http.open("get","http://datainfo.duapp.com/shopdata/getclass.php");
    _http.send();

//    _http.setRequestHeader("Content-type")

// 第三步  获取数据  DOM渲染到页面上

    /*onreadystatechange  异步对象*/
    _http.onreadystatechange=function (){
        if(_http.readyState==4 && _http.status==200){
            var _content=_http.responseText;  //接受数据
            console.log(_content);


            var _jsonArr=JSON.parse(_content); //将字符串转化为json对象
            console.log(_jsonArr);  //一个数组
            for(var i=0;i<_jsonArr.length;i++){
                var _li=document.createElement("li");
                _li.textContent=_jsonArr[i].className;
                _ct.appendChild(_li);
            }

        }
    }
</script>

操作步骤：
1. 创建异步对象
2. 打开和服务器的连接，发送请求
3. 获取数据，DOM操作进行渲染

总结：

通过核心的异步对象XMLHttpRequest发送异步请求
从服务器请求数据并通过DOM操作进行数据处理

大家在写大项目的时候，可以运用一下，一些图片或价格都有可以用Ajax，上面的接口地址可以自己在网页里找，一般是找公司后端要。