»ùÓÚJQuery¿ò¼ÜµÄAJAX,AJAXµÄÈýÖÖʵÏÖ·½Ê½
»ùÓÚJQuery¿ò¼ÜµÄAJAX
Ç°¼¸Ìì·¢Á˸öÌù£¬·ÖÏíÁËprototype¿ò¼Ü¹ØÓÚAJAX·½ÃæµÄѧϰ¹ý³Ì¡£È»ºóÓÐÈË˵jquery¿ò¼Ü¸ü·½±ã¡£
ÕýºÃÏîÄ¿ÖÐ×¼±¸Ê¹ÓÃthickbox£¬ÓÚÊǸɴàÅ×Æúprototype.js£¬¿´Æðjquery.jsÁË¡£JQueryȷʵ²»´í£¬Ìå»ý±È PrototypeСÁËÐí¶à£¬¶øÇÒʹÓÃÆðÀ´¸ü·½±ã¸üÁé»î¡£ÓÐÈË˵PrototypeÏñJAVA£¬Õýͳ£»¶øJQueryÏñRuby£¬Áé»î£¬¸üÇ÷ÓÚOOP¡£
СÊÔÁËÏÂAJAX£¬¸Ð¾õ±Èprototype¼ò½à¶àÁË£¬ÔÚJQueryÖУ¬AJAXÓÐÈýÖÖʵÏÖ·½Ê½£º$.ajax(),$.post,$.get()¡£
XHTML(Ö÷Òª):
<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>ÊäÈëÐÕÃû:</span><input type="text" name="username" id="input1" /></p>
<p><span>ÊäÈëÄêÁä:</span><input type="text" name="age" id="input2" /></p>
<p><span>ÊäÈëÐÔ±ð:</span><input type="text" name="sex" id="input3" /></p>
<p><span>ÊäÈ빤×÷:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">Ìá½»</button>
<button id="test_post">POSTÌá½»</button>
<button id="test_get">GETÌá½»</button>
JS:
1¡¢ÒýÈëjquery¿ò¼Ü£º
<scrīpt type="text/javascrīpt" src="../js/jquery.js"></scrīpt>
2¡¢¹¹½¨AJAX£¬JQUERYµÄºÃ´¦ÊDz»ÐèÒªÔÚXHTMLÖÐʹÓÃJS´úÂëÀ´´¥·¢Ê¼þÁË£¬¿ÉÒÔÖ±½Ó·â×°ÔÚJSÎļþÖУº
<scrīpt type="text/javascrīpt">
//$.ajax()·½Ê½
$(document).ready(function (){
$('#send_ajax').click(function (){ //Ö±½Ó°ÑonclickʼþдÔÚÁËJSÖУ¬¶ø²»ÐèÒª»ìÔÚXHTMLÖÐÁË
var params=$('input').serialize(); //ÐòÁл¯±íµ¥µÄÖµ£¬ÓëprototypeÖеÄform.serialize()Ïàͬ
$.ajax({
url £º'ajax_test.php', //ºǫ́´¦Àí³ÌÐò
type:'post', //Êý¾Ý·¢ËÍ·½Ê½
dataType:'json', //½ÓÊ
Ïà¹ØÎĵµ£º
var xmlHttp;
var flag = false;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
fu ......
±¾ÎÄÄÚÈÝÕª×Ô£º¡¶Java Web¿ª·¢½Ì³Ì——ÈëÃÅÓëÌá¸ßƪ£¨JSP+Servlet£©¡·
ÏÂÃæÒÔ×¢²á¹ý³ÌÖÐÓû§ÃûÊÇ·ñ´æÔÚµÄÑé֤ΪÀý½éÉÜAJAXµÄÓ¦Óá£
¹¦ÄÜÃèÊö£ºÓû§×¢²áµÄÓû§Ãû²»ÔÊÐíÖظ´£¬ËùÒÔÔÚÓû§ÌύʱºòÐèÒªÅжϡ£ÎªÁËÈÃÓû§ÔçÖªµÀ½á¹û£¬ÔÚÓû§ÊäÈëÓû§ÃûÖ®ºó¾ÍÓ¦¸Ã½øÐÐÅжϣ¬¿ÉÒÔ²ÉÓÃAJAX½øÐд¦Àí¡£
¼ÙÉ裺ΪÁ˼ò»¯´ú ......
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<sc ......
dataÀàÐÍ
js´úÂ룺
$.post("getmaterial.do?method=getmaterial",
{name:name},
function (data) {
});
ÆäÖÐgetmaterial.do?method=getmaterialÊÇÇëÇóµÄurl£¬{name:name}ÊÇ´«µÝµ½ºǫ́µÄ²ÎÊý£¬¿ÉÒÔÓÃ
request.getParameter("name");»ñÈ¡£¬dataÊǺǫ́´«µÝ¹ýÀ´µÄÊý¾Ý¡£
action´úÂ룺
response.setContentType( ......
µ±ÓÃajax·µ»Ø¶à¸öÖµµÄʱºò£¬¿ÉÒÔÓÃxml£¬Ò²¿ÉÒÔÓÃjson
jsonʵÀý
<html>
<head>
<title>AjaxTest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
& ......