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


Posted in Javascript onAugust 28, 2015

示例一:利用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有字节限制;

Javascript 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 #Javascript
jquery图片滚动放大代码分享(2)
Aug 28 #Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
Gird事件机制初级读本
2007/03/10 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
vue 巧用过渡效果(小结)
2018/09/22 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python实现翻译word表格小程序
2020/02/27 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
渡河少年教学反思
2014/02/12 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
python实现监听键盘
2021/04/26 Python
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
如何使用flask将模型部署为服务
2021/05/13 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
索尼ICF-5900W收音机测评
2022/04/24 无线电
Go语言入门exec的基本使用
2022/05/20 Golang
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL