jQuery Ajax与prototypeJS Ajax数据获取的方式

最新推荐文章于 2021-08-06 19:52:29 发布

原创最新推荐文章于 2021-08-06 19:52:29 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

HTML5+CSS3+JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Ajax技术通过按钮点击获取服务器返回的随机数。文中提供了两种实现方案，一种是使用jQuery来处理Ajax请求，另一种是使用Prototype.js。这两种方法都详细展示了如何设置Ajax请求、处理响应并更新DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文的实现是通过按钮点击，获取服务器页面的随机数

模拟服务器的页面

randNum.jsp

<%@ page contentType="text/html; charset=GBK" language="java" %>

<%
    out.println(Math.round(Math.random()*10));
%>

Html页面的代码，利用jQuery方式，要导入jQuery.min.js库

<body>
<input type="button" value="获取" onclick="getPrice()" />
<div id="resultDiv" ></div>

<script type="text/javascript" >
  var xmlHttpReq;
  function createXMLHttpRequest(){
     if(window.XMLHttpRequest){
         xmlHttpReq=new XMLHttpRequest();
     }else if(window.ActiveXObject){
         try{
           xmlHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
         }catch(e){
           try{
              xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){   }
        }
     }
  }

  function getPrice(){
     createXMLHttpRequest();
     var uri="randNum.jsp";
     xmlHttpReq.open("POST",uri,true);
     xmlHttpReq.onreadystatechange=processResponse;
     xmlHttpReq.send(null);
  }

  function processResponse(){
     if(xmlHttpReq.readyState==4){
        if(xmlHttpReq.status==200){
           document.getElementById('resultDiv').innerHTML=xmlHttpReq.responseText;
        }else{
           window.alert('请求页面异常');
        }
     }
 }

</script>
</body>

1、首先创建XMLHttpRequest，并判断当前的浏览器是否支持XMLHttpRequest，IE5/ IE6不支持XMLHttpRequest
2、通过open方法打开与uri服务器地址的连接，并且采用post的参数方式，允许异步传输
3、指定XMLHttpRequest状态发生改变的指定执行的函数processResponse
4、在执行processResponse函数时，判断服务器的响应是否完成，只需判断XMLHttpRequest对象的readyState==4属性即可；服务器响应完成后，还应该判断服务器响应是否正确，XMLHttpRequest对象的status==200属性进行。
5、服务器响应正确就获取回应文本responseText
6、使用send方法发送请求

** 利用protytypeJS的Ajax方式获取ResponseText，要求导入prototype.js库

<body>
<input type="button" value="获取" onclick="getPrice()" />
<div id="resultDiv" ></div>

<script type="text/javascript">
  function getPrice(){
    var uri="randNum.jsp";
      new Ajax.Request(
         uri,
         {
            method:"post",
            parameters:null,
            onComplete:showResponse,
            asynchronous:true
          });
  }

  function showResponse(request){
      $('resultDiv').innerHTML=request.responseText;
  }
</script>
</body>

无须创建XMLHttpRequest对象，只创建Ajax.Request()对象就可以完成异步请求发送
Ajax.Request( url, options) 格式，options部分参数如下：
asynchronous 是否异步发送请求
method 发送请求的方式
parameters 请求参数，应采用name1=value1&name2=value2形式
onCreate 当Ajax.Request对象初始化完成后触发该属性指定的回调函数
onComplete 请求交互完成后触发器函数

==============

初步学习Ajax，以此记录