标签:
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
js代码:
我们用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的几种方式
标签:
原文地址:http://www.cnblogs.com/good10001/p/4788029.html