你的位置:首页 > Java教程

[Java教程]通过XMLHttpRequest和jQuery实现ajax的几种方式


AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(Jquery,Css……)重新融合的一个新的知识框架。而,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 

  


创建一个“一般处理程序”来处理前台请求,返回系统当前时间:

Handler.ashx

<%@ WebHandler Language="C#" %>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; // 初始化

  




我们用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;  }); });});

  


示例二:

一、

不使用jQuery实现页面不刷新获取内容的方式,我们这里采用

js代码如下:

//1.获取a节点,并为其添加Oncilck响应函数document.getElementsByTagName("a")[0].onclick = function(){   //3、创建一个

  




插入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" >           <select:option value="-1">全部</select:option>        </select:select>