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. C++求最小公倍数

    题目内容:求两个正整数的最小公倍数. 输入描述:输入数据含有不多于50对的数据,每对数据由两个正整数(0<n1,n2<100000)组成. 输出描述:对于每组数据n1和n2,计算最小公倍数 ...

  2. PHP请求页面

    < ?php $file_contents = file_get_contents('http://www.ccvita.com/'); echo $file_contents; ?> 有 ...

  3. 没有Where条件下group by走索引

    C:\Users\Administrator>sqlplus /nolog SQL :: Copyright (c) , , Oracle. All rights reserved. SQL&g ...

  4. 蓝牙4.0LED灯控方案

    一.LED照明机遇 相对传统光源产品,LED灯凭借其光效高.寿命长.不含汞.总拥有成本低等优势,已被普遍认为是一种革命性和替代性的技术.随着全球白炽灯禁产.禁用政策的依次落实,白炽灯将逐渐消失于市场. ...

  5. 对java面试文章的技术漫谈的C#技术理解

    .NET人技术太菜的话,要好好学习啊,所以看到Java届的面试对话文章,不经意想用C#的知识想做一些回应(其实也没有什么了不起的). 楼下知识文章扩展一览,外加自己接触到的扩展.水太深! static ...

  6. ES6 入门系列 - let 和 const 命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...

  7. C++ STL vector 内存分配

    vector为了支持快速的随机访问,vector容器的元素以连续方式存放,每一个元素都紧挨着前一个元素存储. 当vector添加一个元素时,为了满足连续存放这个特性,都需要重新分配空间.拷贝元素.撤销 ...

  8. Android判断当前的android设备是否处于联网状态

    首先,要想获得当前android设备是否处于联网状态,那么android本身给我们提供了一个服务 private ConnectivityManager connectivityManager;//用 ...

  9. spring使用JdbcDaoSupport中封装的JdbcTemplate进行query

    1.Dept package cn.hxex.springcore.jdbc; public class Dept { private Integer deptNo; private String d ...

  10. lvs keepalived 安装配置详解

    前段时间看了一篇文章,lvs做负载均衡根F5差不多,说实话不怎么相信,因为F5没玩过,也无法比较.F5相当的贵,真不是一般企业能负担的起的.负载均衡软件也用过不少,nginx,apache,hapro ...