通过XMLHttpRequest和jQuery实现ajax的几种方式
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的几种方式的更多相关文章
- JQuery书写Ajax的几种方式?
1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...
- jquery中ajax的几种方式
三种简写: $.get(URL,data,function(data,status,xhr),dataType) $(selector).post(URL,data,function(data,sta ...
- Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例
需求: (django)使用XMLHttpRequest和jQuery实现Ajax加法运算 url.py: from django.conf.urls import url from hello im ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
- (转载)MVC + JQUERY + AJAX的几种方式
MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({ type: "GET", url: ...
- Struts2实现ajax的两种方式
基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
随机推荐
- PL/SQL Developer使用
查询存储过程方法:1.右上角小百页 - 新建SQL窗口 - 复制存储过程名称 - 按住CTRL - 点击链接进入2.点击查询按钮(望远镜) - 文本查找输入名称 - 对象类型默认(函数.过程,包说明, ...
- C#关于Sort排序问题
1.在集合中用Sort对集合元素进行排序 List<,,,,}; tmp.Sort((x, y) => -x.CompareTo(y)); Console.WriteLine(tmp); ...
- mutex 简单介绍
“mutex”是术语“互相排斥(mutually exclusive)”的简写形式,也就是互斥量. 当两个或更多线程需要同时访问一个共享资源时,系统需要使用同步机制来确保一次只有一个线程使用该资源.M ...
- js获取和设置DOM样式函数cssStyle（类似于jquery的$(elem).css()）
如题,相信这个函数百度一搜一大推,但令人匪夷所思的是这些函数都写的“奇形怪状的”,例如http://www.cnblogs.com/windows7/archive/2010/03/30/170064 ...
- 【Zend Studio】10.6.0版本设置默认字体
1.打开Windows->Prefefences 2.找到General->Appearance->Colors and Fonts->Basic->Text Font- ...
- 旋转转盘选择Menu--第三方开源--CircleMenu
CircleMenu在github上的项目主页是:https://github.com/zhangphil/Android-CircleMenu CircleMenu用法简单,JAVA代码: pack ...
- python中的remove趣谈
首先我们要知道remove做的操作是顺序遍历list表,找到第一个匹配的项时删掉该项,并不会再往下找,那我们看下面的代码 mylist = [1,2,3] for i in mylist: print ...
- 在WPF中显示GIF图片并实现循环播放
WPF中有一个MediaElement媒体控件,可以来播放媒体,同时也可以显示GIF图片.但看到网上有些人说用MediaElement不能加载作为资源或内嵌的资源的GIF图片,我猜他们一定是在前台用X ...
- opengl基础学习专题 (三) 多边形绘制的几种样式
题外话 聪明人之所以不会成功,是由于他们缺乏坚韧的毅力. ——艾萨克·牛顿(1643年1月4日—1727年3月31日)英国 也许可以理解为 想更深一步的时候,坚持,努力和聪明缺一不可. 挺直腰杆在此向 ...
- Java入门到精通——工具篇之Maven概述
为接手gxpt准备已经快一个月了从SSH2-->EJB-->环境搭建-->Maven的构建.下面就带领大家初始Maven 一.什么是Maven. Maven是一个垮平台的项目管理工具 ...