通过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 相关文章推荐
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
layui使用数据表格实现购物车功能
Jul 26 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 sybase_fetch_array使用方法
2014/04/15 PHP
php导出生成word的方法
2015/12/25 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python调用java的jar包方法
2018/12/15 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
主治医师岗位职责
2013/12/10 职场文书
电子商务自荐书范文
2014/01/04 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Redis基本数据类型String常用操作命令
2022/06/01 Redis