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. PL/SQL Developer使用

    查询存储过程方法:1.右上角小百页 - 新建SQL窗口 - 复制存储过程名称 - 按住CTRL - 点击链接进入2.点击查询按钮(望远镜) - 文本查找输入名称 - 对象类型默认(函数.过程,包说明, ...

  2. C#关于Sort排序问题

    1.在集合中用Sort对集合元素进行排序 List<,,,,}; tmp.Sort((x, y) => -x.CompareTo(y)); Console.WriteLine(tmp); ...

  3. mutex 简单介绍

    “mutex”是术语“互相排斥(mutually exclusive)”的简写形式,也就是互斥量. 当两个或更多线程需要同时访问一个共享资源时,系统需要使用同步机制来确保一次只有一个线程使用该资源.M ...

  4. js获取和设置DOM样式函数cssStyle(类似于jquery的$(elem).css())

    如题,相信这个函数百度一搜一大推,但令人匪夷所思的是这些函数都写的“奇形怪状的”,例如http://www.cnblogs.com/windows7/archive/2010/03/30/170064 ...

  5. 【Zend Studio】10.6.0版本设置默认字体

    1.打开Windows->Prefefences 2.找到General->Appearance->Colors and Fonts->Basic->Text Font- ...

  6. 旋转转盘选择Menu--第三方开源--CircleMenu

    CircleMenu在github上的项目主页是:https://github.com/zhangphil/Android-CircleMenu CircleMenu用法简单,JAVA代码: pack ...

  7. python中的remove趣谈

    首先我们要知道remove做的操作是顺序遍历list表,找到第一个匹配的项时删掉该项,并不会再往下找,那我们看下面的代码 mylist = [1,2,3] for i in mylist: print ...

  8. 在WPF中显示GIF图片并实现循环播放

    WPF中有一个MediaElement媒体控件,可以来播放媒体,同时也可以显示GIF图片.但看到网上有些人说用MediaElement不能加载作为资源或内嵌的资源的GIF图片,我猜他们一定是在前台用X ...

  9. opengl基础学习专题 (三) 多边形绘制的几种样式

    题外话 聪明人之所以不会成功,是由于他们缺乏坚韧的毅力. ——艾萨克·牛顿(1643年1月4日—1727年3月31日)英国 也许可以理解为 想更深一步的时候,坚持,努力和聪明缺一不可. 挺直腰杆在此向 ...

  10. Java入门到精通——工具篇之Maven概述

    为接手gxpt准备已经快一个月了从SSH2-->EJB-->环境搭建-->Maven的构建.下面就带领大家初始Maven 一.什么是Maven. Maven是一个垮平台的项目管理工具 ...