欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-06 18:16:49
...
示例一:利用Ajax来动态获取时间的例子。

HTML代码:




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

Handler.ashx


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代码:

二、jQuery实现ajax获取信息

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

js代码如下:

function bindCarteam0(){
     //通过URL请求数据
     var URL = ;
      $.ajax({
        url:URL,
        type:'GET',
        dataType: "json",
        success:function(html){
          var str="";
          for(var i=0;i"+html[i].name+"";
          }
          $("#carteam_code").empty().html(str);
        }
      });
   }

HTML代码如下:

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

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