通过XMLHttpRequest和jQuery实现ajax的几种方式

前端技术 2023/09/09 JavaScript

示例一：利用Ajax来动态获取时间的例子。

HTML代码：

<%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeFile=\"Default.aspx.cs\" Inherits=\"_Default\" %>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head runat=\"server\">
  <title></title>
  <script type=\"text/javascript\" src=\"Scripts/jquery-1.7.1.js\"></script>
  <script type=\"text/javascript\" src=\"Scripts/jwy.js\"></script> 
</head>
<body>
  <form id=\"form1\" runat=\"server\">
  <div>
    <input type=\"text\" name=\"textbox\" id=\"text1\" />
    <input type=\"button\" name=\"button\" id=\"Button1\" value=\"显示时间\" onclick=\"btnclick()\" />
  </div>
  </form>
</body>
</html>

创建一个“一般处理程序”来处理前台请求，返回系统当前时间：

Handler.ashx

<%@ WebHandler Language=\"C#\" Class=\"Handler\" %>
using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Text;
public class Handler : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = \"text/plain\";
    context.Response.Write(ShowTime());
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
  public static string ShowTime()
  {
    return DateTime.Now.ToString(); 
  }
}

js代码：

function btnclick() {
  var httprequest = null;
  // 初始化XMLHttpRequest对象
  if (window.XMLHttpRequest) {
    // Firefox等现代浏览器中的XMLHttpRequest对象创建
    httprequest = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    // IE中的XMLHttpRequest对象创建
    httprequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
  }
  if (!httprequest) {
    alert(\"创建httprequest对象出现异常！\");
  }
  httprequest.open(\"POST\", \"Handler.ashx\", true);
  //httprequest向handler发送post请求，最后参数是设定是否为异步请求,true为异步，false为同步
  httprequest.onreadystatechange = function () {
    //指定onreadystatechange事件句柄对应的函数
    if (httprequest.readyState == 4) {
      //4代表服务器返回完成
      if (httprequest.status == 200) {
        //200代表成功了
        document.getElementById(\"text1\").value = httprequest.responseText;
        //responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml
      }
      else {
        alert(\"AJAX服务器返回错误！\");
      }
    }
  }
  httprequest.send();
  //在这里才真正的向服务器端发送请求
}

我们用jquery来前台js代码会变得十分简洁：

基于jquery编写的js代码：

注意：HTML代码要把button的onclick事件去掉，因为我们直接在js用了事件绑定。

$(document).ready(function () {
  //button1绑定事件
  $(\"#Button1\").bind(\"click\", function () {
    $.ajax({
      url: \"Handler.ashx\",
      type: \"POST\",
      success: function (data) {
        //$(\"#text1\").val(data);
        document.getElementById(\"text1\").value = data;
      }
    });
  });
});

不得不说jquery“简约而不简单”……

jquery中的$.ajax集合了get、post方法，默认的是get。

如果直接用POST的话，代码更简单

$(document).ready(function () {
  //button1绑定事件
  $(\"#Button1\").bind(\"click\", function () {
    $.post(\"Handler.ashx\", function (data) {
  document.getElementById(\"text1\").value = data;
    });  
 });
});

示例二：

一、XMLHttpRequest实现获取数据

不使用jQuery实现页面不刷新获取内容的方式，我们这里采用XMLHttpRequest原生代码实现；

js代码如下：

//1.获取a节点，并为其添加Oncilck响应函数
document.getElementsByTagName(\"a\")[0].onclick = function(){
　　 //3、创建一个XMLHttpRequest();
  var request = new XMLHttpRequest();
  //4、准备发送请求的数据url
  var url = this.href;
  var method = \"GET\";
  //5、调用XMLHttpRequest对象的open方法
  request.open(method,url);
  //6、调用XMLHttpRequest对象的send方法
  request.send(null);
  //7、为XMLHttpRequest对象添加onreadystatechange 响应函数
  request.onreadystatechange = function(){
    //8、判断响应是否完成：XMLHttpRequest 对象的readystate的属性值为4的时候
    if(request.readyState == 4){
       //9、在判断响应是否可用：XMLHttpRequest 对象status 属性值为200
      if(request.status == 200){
           //10、响应结果
           alert(request.responseText);
      }   
    }  
  }    
      //2、取消a节点的额默认行为
      return false;    
}

插入HTML代码：

<a href = \"hello.txt\">点击获取文本内容</a>

 二、jQuery实现ajax获取信息

这个例子是动态的从后台获取数据来改变下拉按钮的内容；

js代码如下：

function bindCarteam0(){
     //通过URL请求数据
     var URL = <select:link page=\"/xiaoshouwl.do?method=getCarteamList\"/>;
      $.ajax({
        url:URL,
        type:\'GET\',
        dataType: \"json\",
        success:function(html){
          var str=\"<option value=\'-1\'>全部</option>\";
          for(var i=0;i<html.length;i++){
            str+=\"<option value=\'\"+html[i].id+\"\'>\"+html[i].name+\"</option>\";
          }
          $(\"#carteam_code\").empty().html(str);
        }
      });
   }

HTML代码如下：

<select:select property=\"carteam_code\" styleId=\"carteam_code\" style=\"width:150px\">
                     <select:option value=\"-1\">全部</select:option>
                </select:select>

其中type类型有get和post两种；

post 可以传输的数据量比较大，get有字节限制；

本文地址：https://www.stayed.cn/item/23673

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案