通过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中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
随机推荐
- C#获取程序所在目录路径
方法1:Directory.GetCurrentDirectory().这个方法只能在.NET的完整版中使用,NETCF中不支持该功能,调用时会引发异常.获取的是当前目录,并不一定是真正的路径,跟Op ...
- Silverlight RadGridView的HeaderCellStyle样式
效果图 <UserControl x:Class="SilverlightApplication7.MainPage" xmlns="http://schemas. ...
- 【easuyi】---easyui中的验证validatebox自定义
这里比较简单的使用就不再多说,主要说一下自定义的validatebox. 1.验证密码是否相等,这个直接参考给定的列子就行,这里主要学习这种灵活使用的方式和方法. <input id=" ...
- 高性能MySQL——第一章MySQL的架构与历史
1.可以使用SHOW TABLE STATUS查询表的相关信息. 2.默认存储引擎是InnoDB,如果没有什么很特殊的要求,InnoDB引擎是我们最好的选择. 3.mysql的infobright引擎 ...
- 【转载】学习C#的28条建议
1. 看得懂的书,请仔细看:看不懂的书,请硬着头皮看:2. 别指望看第一遍书就能记住和掌握什么——请看第二遍.第三遍:3. 学习编程的秘诀是:编程,编程,再编程:4. 请把书上的程序例子亲手输入到电脑 ...
- STM32F0xx_FLASH编程（片内）配置详细过程
Ⅰ.概述 关于数据的储存,我觉得编程的人基本上都会使用到,只是看你储存在哪里.STM32的芯片内部FLASH都是可以进行编程的,也就是说可以拿来储存数据.但是,很多做一些小应用程序开发的人都没有利用好 ...
- 第二节：AppDomain
CLR COM服务器初始化时,会创建一个AppDomain.AppDomain是一组程序集的逻辑容器.CLR初始化时创建的第一个AppDomain称为默认的AppDomain,这个默认的AppDoma ...
- python 逻辑运算符与比较运算符的差别
文章内容摘自:http://www.cnblogs.com/vamei/archive/2012/05/29/2524376.html 逻辑运算符 and, or, not 比较运算符 ==, !=, ...
- 帮朋友 解决一道 LeetCode QJ上问题
引言 对于刷题,自己是没能力的. 最经一个朋友同事考我一道数组题 . 也许能当面试分享吧. 娱乐娱乐. 事情的开始是这样的. 前言 题目 截图 大概意思 是 在一个 数组中,找出其中两个不重复出现的元 ...
- CK表达式编辑器
1. 什么是表达式编辑器? 这个工具允许技术员传入一系列的参数,由用户编辑一个公式返回一种特定的结果.之所以需要使用表达式编辑器,就是因为用户编辑的公式经常变,技术员无法想出一办法来适应用户 ...