9月4號總結-Ajax

1.Ajax 簡介

1.1Ajax 是什麼？

Ajax (Asynchronous JavaScript and XML) 是一種Web應用技術,能夠藉助客戶端腳本(javascript)與服務端應用進行異步通信，獲取服務端數據之後,能夠進行局部刷新。進而提升數據的響應和渲染速度。

1.2Ajax 技術應用場景？

**Ajax技術最大的優點就是底層異步,而後局部刷新,進而提升用戶體驗,這種技術如今在不少項目中都有很好的應用,例如:

• 商品系統。
• 評價系統。
• 地圖系統。
• …..

  AJAX能夠僅向服務器發送並取回必要的數據，並在客戶端採用JavaScript處理來自服務器的響應。這樣在服務器和瀏覽器之間交換的數據大量減小，服務器響應的速度就更快了。但Ajax技術也有劣勢，最大劣勢是不能直接進行跨域訪問。**
  
  

2.2 Ajax入門代碼簡易實現

第一步:服務端代碼設計

建立AjaxController類,用於處理客戶端請求

package com.cy.ajax.controller;@Controller  
@RequestMapping("/")  
public class AjaxController { @RequestMapping("doAjax01UI") public String doAjax01UI() { return "ajax-01";  
          } //處理ajax請求的服務端設計  @RequestMapping("doAjaxGet") @ResponseBody //將方法返回值以字符串形式進行輸出  public String doAjaxGet() throws Exception{  
                  System.out.println("==doGet()=="); //Thread.sleep(3000);//模擬耗時操做  return "Ajax Get request result";  
          }  
            
}

第二步:客戶端代碼設計

客戶端頁面關鍵dom元素設計:

//Ajax方式的請求 function doAjaxGet(){//錯誤調試:debugger,console.log(),排除法  //1.建立XHR對象 var xhr=new XMLHttpRequest(); //2.設置狀態監聽(將服務端響應的結果更新到ajaxResultId位置) xhr.onreadystatechange=function(){ //console.log(xhr.readState);  if(xhr.readyState==4&&xhr.status==200){  
                     console.log(xhr.responseText);  
                   document.getElementById("ajaxResultId").innerHTML=xhr.responseText;  
                }  
           }; //3.創建鏈接 xhr.open("GET","http://localhost/doGet",true);//true表示異步(底層會啓動線程與服務端通信)  //4.發送請求 xhr.send();  
}

3. Ajax 基本業務實現

3.2 服務端關鍵代碼實現

---

在服務端AjaxConotroller中添加以下代碼,處理客戶端請求:

private List<String> names=new ArrayList<String>();//假設這是存儲數據的表  @RequestMapping("doAjax02UI") public String doAjax02UI() { return "ajax-02";  
          } /**經過此方法校驗名字是否存在*/  @RequestMapping("doCheck") @ResponseBody  public String doCheck(String name) { if(names.contains(name)) return "名字"+name+"已經存在,請選擇其它名字"; return "名字"+name+"不存在,能夠註冊";  
          } /**將客戶端請求數據寫入到names對應的集合*/  @RequestMapping("doSave") @ResponseBody  public String doSave(String name) {  
                  System.out.println("name="+name);  
                  names.add(name); return "save ok";  
          }

3.3 客戶端關鍵代碼實現

構建ajax-02頁面,而後添加關鍵元素.

第一步:html關鍵表單元素設計

<h1>The Ajax 02 Page</h1>  
<fieldset>  
   <legend>Ajax 表單請求</legend>  
   <form>  
      <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">  
      <input type="button" onclick="doSave()" value="Save">  
   </form>  
   <span id="result"></span>  
</fieldset>

第二步:添加JS關鍵業務代碼

<script type="text/javascript">  
    function doClear(){  
            document.getElementById("result").innerHTML="";  
    }  
     
    function doSave(){ //1.建立XHR對象 var xhr=new XMLHttpRequest(); //2.設置狀態監聽 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){  
                      document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";  
                 }  
            }; //3.打開連接  //var name=document.getElementById("nameId").value; var  name=document.forms[0].name.value;  
            xhr.open("POST","/doSave",true); //post請求要設置請求頭(規定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.發送請求 xhr.send("name="+name);//Post請求send方法傳值 }  
     
    function doCheck(){//在此函數中向服務端發起異步請求,檢測name是否存在  //1.建立XHR對象 var xhr=new XMLHttpRequest(); //2.設置狀態監聽 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){  
                     document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";  
                }  
           }; //3.打開連接  //var name=document.getElementById("nameId").value; var  name=document.forms[0].name.value;  
           console.log("name",name);  
           xhr.open("GET","/doCheck?name="+name,true); //4.發送請求 xhr.send(null);//Get請求send方法傳值 }