AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。而，XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现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>

　　

通过XMLHttpRequest和jQuery实现ajax的几种方式的更多相关文章

  1. JQuery书写Ajax的几种方式?

    1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...

  2. jquery中ajax的几种方式

    三种简写: $.get(URL,data,function(data,status,xhr),dataType) $(selector).post(URL,data,function(data,sta ...

  3. Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例

    需求: (django)使用XMLHttpRequest和jQuery实现Ajax加法运算 url.py: from django.conf.urls import url from hello im ...

  4. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

  5. (转载)MVC + JQUERY + AJAX的几种方式

    MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({            type: "GET",         url: ...

  6. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  7. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  8. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  9. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

随机推荐

  1. Application Designer Security

    This wiki page covers how to manage and restrict Application Designer security through permission li ...

  2. 【漫画解读】HDFS存储原理(转载)

    以简洁易懂的漫画形式讲解HDFS存储机制与运行原理. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下: Client:客户端,系统使用者,调用HDFS API操作文件;与NN交互获取文件元数 ...

  3. CDH 不能监控hadoop状态

    1 背景:公司集群整体搬迁 2 问题:hadoop重启后,发现一个非常坑爹的问题.用 hadoop dfsadmin -report 查看datanode状态完全正常,但是Cloudera Manag ...

  4. 【php学习之路】php基础语法

    一.什么是php?       PHP即PHP: Hypertext Preprocessor(超文本处理器),是一种服务器端脚本语言,适用于创建web站点.开源免费 二.php能做什么?       ...

  5. java实现的MySQL自动备份和还原（struts2+Hibernate）---兼容 window+Linux

    相信很多朋友都经历过数据库出问题的情况,我也同样(见我的上一篇博文:phpmyadmin误删表后的恢复过程(心惊胆跳啊)   ).如果数据很大或者很重要,那么恢复起来是相当困难的,所以我们在做一个相对 ...

  6. 发布阿里云OSS for phpcmsV9整合教程

    说明:这个算不上是插件,因为没有安装包,需要手工修改代码. 还有一点就是后台发布文章时上传的附件还是会保存在你的服务器上,基于以下原因: 1.个人的需求是前台页面需要使用thumb函数生成多个缩略图大 ...

  7. 访问svc 文件，编译器错误消息: CS0016，未能写入输出文件

    编译错误              说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码.             编译器错误消息: CS0016: 未 ...

  8. DB2数据库之间联邦

    现在有以下两个数据库:sample,QIN 需要在数据库QIN中访问sample中的表ACT 1.数据库编目 C:\Users\QIN>db2 catalog tcpip node OLIVER ...

  9. 说说oracle中的面向对象与面向集合

    这一篇算是对近期自己学习的一个心得总结 一.oracle的面向对象 SQL是面向集合的这个大家都知道,但是不可否认现在的oracle中有很多地方都体现着面向对象的思维.(这也算是各大语言殊途同归的一个 ...

  10. 黑客群体的露面说明互联网公司开始回馈IT行业了，

    揭开中国黑客群体的神秘面纱 年薪数百万 2015-04-26 09:59:45 15259 次阅读 14 次推荐 稿源:经济观察报 33 条评论   在网络世界有专属的代号,那里才是他们最习惯的“世界 ...