經過XMLHttpRequest和jQuery實現ajax的幾種方式

時間 2019-11-24

標籤經過 xmlhttprequest jquery 實現 ajax 幾種方式欄目 JQuery 简体版

原文原文鏈接

AJAX你們已經都知道了，是爲了實現異步通信，提升用戶體驗度，而將不少舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）從新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中,本篇文章主要給你們介紹經過XMLHttpRequest和jQuery實現ajax的幾種方式javascript

HTML代碼：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>

建立一個「通常處理程序」來處理前臺請求，返回系統當前時間：java

Handler.ashxjquery

js代碼：web

咱們用jquery來前臺js代碼會變得十分簡潔：ajax

基於jquery編寫的js代碼：json

注意：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;
    }); 
 });
});

示例二：

1、XMLHttpRequest實現獲取數據

不使用jQuery實現頁面不刷新獲取內容的方式，咱們這裏採用XMLHttpRequest原生代碼實現；

js代碼以下：

//1.獲取a節點，併爲其添加Oncilck響應函數
document.getElementsByTagName("a")[0].onclick = function(){
　　 //三、建立一個XMLHttpRequest();
  var request = new XMLHttpRequest();
  //四、準備發送請求的數據url
  var url = this.href;
  var method = "GET";
  //五、調用XMLHttpRequest對象的open方法
  request.open(method,url);
  //六、調用XMLHttpRequest對象的send方法
  request.send(null);
  //七、爲XMLHttpRequest對象添加onreadystatechange 響應函數
  request.onreadystatechange = function(){
    //八、判斷響應是否完成：XMLHttpRequest 對象的readystate的屬性值爲4的時候
    if(request.readyState == 4){
       //九、在判斷響應是否可用：XMLHttpRequest 對象status 屬性值爲200
      if(request.status == 200){
           //十、響應結果
           alert(request.responseText);
      }  
    } 
  }   
      //二、取消a節點的額默認行爲
      return false;   
}

插入HTML代碼：

<a href = "hello.txt">點擊獲取文本內容</a>

2、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>