Ajax的四步骤使用和Ajax的方法封装回调函数

最新推荐文章于 2022-08-02 23:26:34 发布

sdfujichao

最新推荐文章于 2022-08-02 23:26:34 发布

阅读量434

点赞数

分类专栏： Ajax 文章标签： ajax 基本步骤

本文链接：https://blog.csdn.net/sdfujichao/article/details/51305424

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路;先用基本的ajax四部写出代码，在进行封装（把控件和URL做为参数）

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title>Ajax的基本使用和封装</title>
   </head>
   <body>
       <input type="button" id="divNextId" value="下一页"/>
       <div id="DivUserNameId"style="width: 500px; height: 500px; background-color: #ccc;"></div>
   </body>
   <script type="text/javascript">
       // 封装的ajax方法。
       function creatXmlHttp(url){
           //第一步创建一个XMLHttpRequest对象，兼容IE低版本
           var varXmlr = null;
           if(window.XMLHttpRequest){
               varXmlR = new XMLHttpRequest();
           }else{
               var varXmlR = new ActiveXObject("Micrsoft.XMLHTTP");
           }

           varXmlR.onreadystatechange = function (){
               //判断是否正确返回数据
               if(varXmlR.readyState==4 && varXmlR.status==200){
                   action(varXmlR.responseText);
               }
           }
           // 打开某个网页
           varXmlR.open("GET",url,true);
           // 发送请求数据
           varXmlR.send();
       }

       var myBtnNext = document.getElementById("divNextId");
       var myDivUserName = document.getElementById("DivUserNameId");

       var count = 0; // 用来计算显示的文件

       myBtnNext.onclick = function(){
           var arr = ["userName.txt","test1.txt","test2.txt","test3.txt"];
           var index = count%4;
           creatXmlHttp(arr[index]);
           count++;
       }

       function action(test){
           myDivUserName.innerHTML = test;
       }
   </script>
</html>

sdfujichao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的四步骤使用和Ajax的方法封装回调函数

思路;先用基本的ajax四部写出代码，在进行封装（把控件和URL做为参数） Ajax的基本使用和封装 // 封装的ajax方法。 function creatXmlHttp(url){ /
复制链接

扫一扫

专栏目录