通过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中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
随机推荐
- MapReduce作业的map task和reduce task调度参数
MapReduce作业可以细分为map task和reduce task,而MRAppMaster又将map task和reduce task分为四种状态: 1.pending:刚启动但尚未向reso ...
- nginx 编译安装
一.安装nginx时必须先安装相应的编译工具yum -y install gcc gcc-c++ autoconf automakeyum -y install zlib zlib-devel ope ...
- Navicat Premium 11 For Mac 注册机
http://mac.pcbeta.com/thread-138357-1-1.html
- PHP通过字符串调用函数
1. call_user_func function a($b,$c){ echo $b; echo $c; } call_user_func('a', "111","2 ...
- thinkphp 字段静态验证$_validate中错误提醒多语言化写成{%LANGUATE}的原因
class UserModel extends Model{ protected $_validate = array( array('account', 'require', '{%LANGUAG ...
- 随机获取Mysql数据表的一条或多条记录
随机获得Mysql数据表的一条或多条记录有很多方法,下面我就以users(userId,userName,password......)表(有一百多万条记录)为例,对比讲解下几个方法效率问题: sel ...
- Python脚本控制的WebDriver 常用操作 <六> 打印当前页面的title及url
下面将使用WebDriver来答应浏览器页面的title和访问的地址信息 测试用例场景 测试中,访问1个页面然后判断其title是否符合预期是很常见的1个用例: 假设1个页面的title应该是'hel ...
- swoole 异步队列
安装步骤如下(推荐把安装文件下载到 /usr/local/src 目录下): step 1: wget --no-check-certificate https://github.com/swoole ...
- hdu 4857 逃生
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4857 逃生 Description 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能 ...
- UITabelView 高级（自定义Cell）
自定义一个Cell 当我们要显示复杂数据的时候,例如要做一个扣扣聊天界面,或是新闻列表,系统的行已经不能满足我们的要求,这个时候我们可以通过自定义这个行,让他显示更多复杂结构的样式. 自定义cell就 ...