AJAX 多次发送异步请求的 XmlHttpRequest 对象的设置

最新推荐文章于 2021-08-06 14:27:39 发布

kongfanyu

最新推荐文章于 2021-08-06 14:27:39 发布

阅读量3.1k

点赞数

分类专栏： AJAX 文章标签： xmlhttprequest ajax function div button jsp

本文链接：https://blog.csdn.net/kongfanyu/article/details/6446181

版权

AJAX 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

业务需求：

第一步：加载商品类别，点“加载种类” 按钮

第二步：选择商品种类显示该类别的所有商品，也是异步请求：

这时要注意xmlHttpRequest的创建及 onreadystatechange 回调函数的设置

<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript">

//第一次异步请求
  function loadCategory(){
   createXmlHttp();
   xmlhttp.onreadystatechange=getCategory;
   xmlhttp.open("GET","show!findAllCategories.action",true);
   xmlhttp.send();
  }
  function getCategory(){
   if(xmlhttp.readyState==4){
    if(xmlhttp.status==200){
     var sel=document.getElementById("div1");
     sel.innerHTML=xmlhttp.responseText;
    }
   }
  }
   //第二次异步请求
  function getData(){
   createXmlHttp();//另一个xmlhtpp对象，必须重新创建，否则和第一个相同
   xmlhttp.onreadystatechange=getProduct;
   document.getElementById("div2").innerHTML="";
   xmlhttp.open("GET","showPro!findProByCategoryId.action?id="+document.getElementById("dept").value,true);
   xmlhttp.send();
  }
  function getProduct(){
   if(xmlhttp.readystate==4){
    if(xmlhttp.status==200){
     var sel1=document.getElementById("div2");
     sel1.innerHTML=xmlhttp.responseText;
    }
   }
  }
</script>

</head>

<body>
    <div id="div1">
    <input type="button" value="加载种类" οnclick="loadCategory()">
    </div>
    <div id="div2"></div>
</body>
</html>

kongfanyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX 多次发送异步请求的 XmlHttpRequest 对象的设置

<br />业务需求：<br />第一步：加载商品类别，点“加载种类” 按钮<br /> <br /><br /> <br />第二步：选择商品种类显示该类别的所有商品，也是异步请求：<br /> <br /><br /> <br />这时要注意xmlHttpRequest的创建及 onreadystatechange 回调函数的设置<br /><br /><br /><html><br /> <head><br /> <base href="<%=basePath%>"><br /> <ti
复制链接

扫一扫

专栏目录