通过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 相关文章推荐
用客户端js实现带省略号的分页
Apr 27 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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测试硬盘写入速度示例
2014/01/27 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JS中style属性
2006/10/11 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python的Template使用指南
2014/09/11 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python和opencv实现抠图
2018/07/18 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python如何测试stdout输出
2020/08/10 Python
详解Python高阶函数
2020/08/15 Python
python包的导入方式总结
2021/03/02 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
"序列点" 是什么
2016/07/29 面试题
接口可以包含哪些成员
2012/09/30 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
美发店5.1活动方案
2014/01/24 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
何玥事迹观后感
2015/06/16 职场文书
公司庆典主持词
2015/07/04 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL