风云阁资源网

通过XMLHttpRequest和jQuery实现ajax的几种方式
网络编程 2024/11/15 佚名
3 1

示例一：利用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="/UploadFiles/2021-04-02/jquery-1.7.1.js">


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


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"/>;
      $.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有字节限制；
风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com