Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

  AJAX 不是新的編程語言,而是一種使用現有標準的新方法。

  AJAX 是與服務器交換數據并更新部分網頁的藝術,在不重新加載整個頁面的情況下。AJAX可以更新部分頁面,而不需要整個刷新,從而提升用戶體驗。

  XMLHttpRequest 對象

  是Ajax的核心,所有現代瀏覽器均支持 XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject)。

  XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

  創建方法:

  var xhr = new XMLHttpRequest();

  常用方法:

  open("GET/POST","URL地址",true/false) 打開連接

  true和false代表異步或同步。

  同步表示需要等待服務器響應后才能執行后面的代碼

  異步表示不需要等待服務器響應,響應后會進行通知

  推薦使用異步方式。

  send(String) 發送請求

  如果是POST方法需要填寫請求參數,如:"name=zhang&age=20"

  如果是Get方法參數可以不寫

  onreadystatechange事件回調,監聽連接狀態改變

  用法:

  onreadystatechange = function(){...};

  常用屬性:

  readyState 連接狀態

  ajax共有5種狀態:

狀態

名稱

描述

0

Uninitialized

初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。

1

Open

open() 方法已調用,但是 send() 方法未調用。請求還沒有被發送。

2

Sent

Send() 方法已調用,HTTP 請求已發送到 Web 服務器。未接收到響應。

3

Receiving

所有響應頭部都已經接收到。響應體開始接收但未完成。

4

Loaded

HTTP 響應已經完全接收。

  responseText 服務器響應文本內容

  status 響應碼、如:200、404、500等

  案例:使用ajax和Servlet進行交互

 

 

 

  JQuery中的Ajax函數:

  除了原生的Ajax代碼外,JQuery框架也封裝了幾個ajax函數,讓我們能更容易地與服務器交互。

  $.ajax

  常用參數:

  type 請求方法GET、POST

  url 服務器地址(必須)

  data 請求參數

  async 是否異步true,false

  success 正常情況調用函數

  error 錯誤情況調用函數

  示例:

  $.ajax({url:check.do,data:{tel:‘13001112222’},async:true,

  success:function(data){

  alert(服務器返回內容+data);

  },

  error:function(){

  alert(服務器操作出現錯誤);

  }

  });

  $.post函數

  以post方式和服務器交互

  $.post("URL地址",{參數名:值},function(data){

  回調代碼

  });

  案例:

  //使用jquery的post方法

  function post(){

  $.post("ajax.do",{name:李四},function(data){

  $("#div1").text(data);

  });

  }

  $.get 函數

  以get方式和服務器交互

  $.get("URL地址?參數",function(data){

  回調代碼

  });

  案例:

  //使用jquery的get方法

  function get(){

  $.get("ajax.do?name=趙六",function(data){

  $("#div1").text(data);

  });

  }

  load函數

  使用load方法,將ajax加載的內容直接插入到標簽中

  案例:

  $(function(){

  $("#div1").click(function(){

  //post();

  //get();

  $("#div1").load("ajax.do?name=馬九");

  });

  });

  應用場景:

  用戶注冊時檢查用戶名是否存在

  需求:用戶注冊時,填寫手機號后,當輸入框失去焦點時,對手機號進行服務器驗證后在手機號輸入框后面顯示”用戶名已存在"或"用戶名可以使用";

  思路:

  1、在input的onblur事件中進行驗證

  2、通過ajax發送手機號給后臺Servlet

  3、Servlet對手機號進行數據庫查詢,返回是否存在的文字給ajax

  4、ajax收到返回文字后,顯示到標簽上

  總結:Ajax能夠讓瀏覽器和服務器進行交互,并且在不刷新頁面的情況下對網頁內容進行更新,大大提高了用戶體驗,通過Ajax技術能夠構建交互性極強的Web應用程序。

  千鋒??成都Java培訓??課程的授課模式采用全程面授,講師成本雖高,但是效果卻是顯著的,和學員面對面溝通,了解到學員在學習過程中遇到的問題,動態地調整授課方式。及時有效地幫助學員解決疑難問題,提高學員的學習積極性。千鋒java視頻教程為零基礎的學員提供高品質的學習資料,讓每一個熱愛編程的學員可以掌握扎實的基礎。