用jQuery的AJax實現(xiàn)異步訪問、異步加載

更新時間：2016年11月02日 08:40:55 作者：bboyjoe

這篇文章主要介紹了用jQuery的AJax實現(xiàn)異步訪問、異步加載，jQuery的ajax異步實現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者參考,需要的朋友可以參考下

本篇文章實現(xiàn)了用jQuery的AJax實現(xiàn)異步訪問和異步加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

【異步訪問】

用一個例子用以說明：點擊按鈕，將input內(nèi)用戶輸入的數(shù)據(jù)發(fā)送給服務(wù)端，并將結(jié)果返回給頁面。

首先是html承載內(nèi)容：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>AJax異步訪問</title> 
  <script src="js/jquery-2.1.3.min.js"></script> 
  <script src="js/ajaxDemo.js"></script> 
</head> 
<body> 
<input type="text" id="nameValue"> 
<br/> 
<button id="btn">提交</button> 
<p> 
  結(jié)果：<span id="result"></span> 
</p> 
</body> 
</html>

配置服務(wù)器：Server.php

<?php 
if(isset($_GET['name'])){ 
  echo "姓名：".$_GET['name']; 
}else{ 
  echo "參數(shù)錯誤"; 
}

ajaxDemo.js實現(xiàn)AJax異步訪問:

$(document).ready(function(){ 
  $("#btn").on("click",function(){ 
    //在與服務(wù)器通訊較慢時給用戶提示信息 
    $("#result").text("數(shù)據(jù)請求中，請稍后..."); 
    //向服務(wù)器發(fā)送請求(get、post) 
    $.get("Server.php",{name:$("#nameValue").val()},function(data){ 
      $("#result").text(data); 
    }).error(function(){ 
      //當(dāng)服務(wù)器出現(xiàn)異常時 
      $("#result").text("服務(wù)器正在維護") 
    }) 
  }) 
})

實現(xiàn)效果：

【異步加載】

主要用到load()方法以及getScript()方法,具體以一個例子說明：

在現(xiàn)有html文件中加載一個擬好的片段，以及在片段加載完成之前阻止用戶進一步操作的彈出框。

首先是現(xiàn)有html代碼，無任何內(nèi)容:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>AJax異步加載</title> 
  <script src="js/jquery-2.1.3.min.js"></script> 
  <script src="js/main.js"></script> 
</head> 
<body> 
 
</body> 
</html>

擬一個js文件getData.js寫一個函數(shù)最簡陋的彈出框提示為例：

function getData(){ 
  alert("片段的內(nèi)容引自新浪體育"); 
} 
擬一個片段box.htm，承載要加載的片段內(nèi)容：
<div> 
  <h4>中超-耿曉峰失誤拉蒙兩球 申花7輪首敗1-4綠城</h4> 
  <p> 
    北京時間8月11日晚19點35分，2015年中超聯(lián)賽第22輪在杭州黃龍體育場開始一場較量， 
    由杭州綠城迎戰(zhàn)上海申花。上半場第7分鐘陳柏良突然冷射，導(dǎo)致耿曉峰接球脫手造成失球， 
    這是中華臺北球員（陳昌源在比利時土生土長）在中超聯(lián)賽進的首球。 
    第12分鐘申花隊呂征禁區(qū)右路左腳凌空射門扳平比分。第25分鐘阿甘在底線附近把球送入禁區(qū)， 
    拉蒙頭球得分，第37分鐘阿甘單刀赴會打入一球。 
    第60分鐘阿甘頭球擺渡，拉蒙跟進射門梅開二度。最終杭州綠城4比1戰(zhàn)勝上海申花。 
  </p> 
</div>

最后寫main.js來異步加載getData.js以及box.htm到現(xiàn)有html文件中。

$(document).ready(function(){ 
  //異步加載js文件 
  $.getScript("js/getData.js").complete(function(){ 
    getData(); 
  }) 
  //異步加載片段 
  $("body").text("加載中...") 
  $("body").load("box.htm",function(url,status,c){ 
    if(status=="error"){ 
      $(this).text("片段加載失敗"); 
    } 
  }); 
 
})

最后效果：