所以AJAX AJAX和AJAX，这是我们做广泛的这些天。 这样可以节省时间，增加了动力，让你感觉一种应用软件的使用感觉。 但还有许多许多图书馆使用AJAX的方法。 但你可以看到这个网站是为jQuery，我们来看看一些基本或者先进的AJAX用法。
你是什么，我们需要吗？
jQuery库（当然）
一个微小的PHP脚本
让我们开始交谈。 在jQuery中，基本上有6种方法做AJAX操作。 这些都是
- AJAX（选项）
- 美元。（URL，数据，回调）
- 美元。getJSON（URL，数据，回调）
- $。getScript加入脚本（URL，回调）
- 负载（URL，数据，回调）
- 美元（URL，数据，回调后，
除1号外，所有其他方法使用。AJAX内部。 因此，这意味着美元。阿贾克斯（）是我们的母亲jQuery的AJAX操作功能。 让我们来看看如何为阿贾克斯（）看起来像
$。AJAX（{ ,类型：“POST” ,网址：some.php“， ,资料：“名称=彼得位置=纽约”， ( msg ) {成功： 函数 （MSG）{ "Server Response " + msg ) ; 警报 （“服务器响应”+味精）; } }）;
这是相当它。 类型参数以“GET”或“POST”，这意味着您可以发送的AJAX requestion作为POST或GET（我宁愿永远发表）。 其余的参数都相当自我解释，如果你再看看代码。
现在，我们要做出一个小的AJAX脚本读取超链接标记链接（<a>）和加载文档中的一些div元素的请求。
首先，我们采取正常的PHP文件看起来像这样的HTML
DOCTYPE HTML PUBLIC“ - / / W3C / / DTD XHTML 1.0 Strict标准/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <HEAD> <TITLE>阿贾克斯链接测试</ TITLE> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" <script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT> </ HEAD> <BODY> </ BODY> </ HTML>
现在让我们添加一些链接到文件。 为更好的菜单样外观，我们将使用一个UL>李和链接。 这看起来像这样
<ul id="nav"> <LI> <a class="ajax_link" rel="div1" href="response.php?user=john">负荷在1区</ A> </ LI> <LI> <a class="ajax_link" rel="div2" href="response.php?user=nash">负荷在2节</ A> </ LI> <LI> <a class="ajax_link" rel="div3" href="response.php?user=stella">息3负载</ A> </ LI> <LI> <a class="ajax_link" rel="div4" href="response.php?user=jason">负载节4 </ A> </ LI> </ UL>
正如你可以看到，我们已经把内部的无序列表中的对象的列表元素的链接。 细看采取的<a>标签的属性。 我们有HREF，阶级和rel属性比正常链接看起来没有什么不同。 如果你看到，我们已经rel属性一些div的名称，即DIV1，DIV2 ...... 依此类推。 这意味着，我们希望将这些div加载的href响应。 如何做到这一点？ 让我们添加这些div的第一
<SPAN>的DIV -1 </ SPAN> <div id="div1" class="content_loader"> </ DIV> <SPAN>格-2 </ SPAN> <div id="div2" class="content_loader"> </ DIV> <SPAN>的DIV -3 </ SPAN> <div id="div3" class="content_loader"> </ DIV> <SPAN>格-4 </ SPAN> <div id="div4" class="content_loader"> </ DIV>
和真实的一部分，现在 - 我们给出的链接类“ajax_link”。 我们将动态添加AJAX行动只有有类名称称为“ajax_link”的链接。 地狱，我们没有一个页面的所有链接，有AJAX的行动，我们呢？
因此，文件的负载，我们应该这样做。
. ready ( function ( ) { $（文件）。 就绪 （ 函数 （）{ ) . click ( function ( ) { $（“a.ajax_link”）。 点击 （ 函数 （）{ this ) ;美元current_link = $（ 本 ）; $。AJAX（{ , “邮报”，类型： ( "href" ) ,网址：美元current_link 的attr（“HREF”）， ( e ) {成功： 函数 （E）{ + $current_link. attr ( "rel" ) ) . html ( e ) ; $（“＃”+ $ current_link 的attr（“REL”））HTML（E）; } }）; ; 返回 false; }）; }）;
让我解释的脚本位。 的document.ready事件是在页面加载时触发的事件。 然后我们分配上有类“ajax_link”链接的点击事件的某种代码。 这样做current_link = $（本）;允许当前的链接对象是在回调函数。 我们有
$（“＃”+ $ current_link.attr（“REL”））。HTML（E）
这意味着（“div_id”）HTML（server_response），我们已经设置了动态URL $ ajax功能的URL参数：$ current_link.attr（的“href”）。 所以，现在所有这些意味着“所有这些链接有类”ajax_link“ - 添加一个Click事件处理程序 - 然后执行AJAX请求的链接HREF poperty和响应加载到一个div的id匹配的”相对“的属性链接“。 并返回false阻止像普通链接的链接工作 
想看到它的行动呢？ 这里。
，你可以下载源 。
在这个小教程的下一节，我们将使用同样的事情，但有一个舒适的点点。
应用更简单的方法
一切仍然几乎相同。 我们只需要改变这里的Ajax方法。 因此，而不是写整个美元。AJAX块，我们可以实现以下同样的事情。
. ready ( function ( ) { $（文件）。 就绪 （ 函数 （）{ ) . click ( function ( ) { $（“a.ajax_link”）。 点击 （ 函数 （）{ + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $（“＃”+ $（ 本 ） 的attr（“REL”））负载 （$（ 本 ） 的attr（“HREF”））; ; 返回 false; }）; }）;
这是少了很多复杂的现在，正确？ load方法加载的元素，它连接到内的Ajax内容。 如果$（“＃somediv_id”）。负荷（“mypage.php”），它会尝试加载在IT mypage.php的内容。 很简单，是吧？ 但我建议你习惯的主要方法（第一部分）。
在zip文件中还有另一个文件ajax2.php这表明此methos有相同的结果。
因此，AJAX并不难，因为它听起来，正确吗？ 当你成为AJAX操作非常流畅，你会创造魔法。
感谢读BTW。
最新评论