1. 程式人生 > 實用技巧 >[JavaWeb] Ajax&JQuery

[JavaWeb] Ajax&JQuery

前言:

  為減少資源浪費,不用為了從後端拿一些資源而重新整理一整個頁面,前人在js的基礎上整出了個區域性動態請求

一.Ajax,JQuery選擇器

    #id
    .class
    element
    .class.class      交集
            
    : first
    : last 
    : even
    : odd
    : element       
    :eq(index)
    :gt(no)         greater than     index > no 的元素
    :lt(no)        less than   index 
< no 的元素 :not(selector) 不在這個選擇器裡的元素 :header 所有的h元素 :contains(text) 包含指定text的所有元素 :empty 沒有子元素的所有元素 :hidden 所有被隱藏的子元素

二.BOM

物件BOM
    this:
        在方法中,this指的是所有者的物件
        在單獨情況下,this指的是全域性物件
        在函式中 this 指的是全域性物件
        嚴格模式下函式中,this 是undifined
        在事件中 this 指的是接收事件的元素
    
    window : 代表瀏覽器的視窗
        全域性的js物件函式和變數都自動成為window物件和成員
        方法:
            window.open()
            window.close()
            window.moveTo()   移動當前視窗
            window.resizeTo()    重新調整當前視窗

    
    screen : 代表物件包含使用者螢幕的資訊
        

    location : 可用於獲取當前url,並重定向
        location.herf
        location.hostname
        location.pathname
        location.protocol
        location.assign
    
    history : 
        back    返回url歷史列表裡的前一個url
        forward    返回url歷史列表裡的下一個url
    navigator : 
        navigator.appName
        navigator.cookieEnable  檢視使用者瀏覽器是否啟動cookie    
        navigator.javaEnabled() 方法返回java是否啟用         
        navigator.online    值為瀏覽器是否線上

    彈出框:三種
        1.alert() 警告框  只能點個確定  一般用來確認資訊
        2.confirm() 是一個確定框  能點確定和取消,可以用來判斷並呼叫不同的方法
        3.prompt()  提示框能輸入一個文字

    Time事件:
        setTimeout()   兩個引數  第一個是執行的方法  第二個是執行之前的毫秒數
        clearTimeout()   停止執行
        上述兩個方法用一個變數名來充當返回的變數,然後都是用這個變數進行操作
        setInterval()   兩個引數  第一個是執行的方法  第二個是隔多少毫秒進行一次執行
        clearInterval()  停止執行
        上述兩個 與Timeout()相同
    cookie : 
        使用 ducument.cookie 獲取 建立 刪除 cookie
        document.cookie 

三.Ajax,JQuery請求

  JQuery是Ajax的框架,底層封裝了Ajax

  Ajax請求:

var xhr = new XMLHttpRequest();   // 獲取一個XMLHttpRequst例項
xhr.open("method_name","data","async");  //第一個為請求方法,第二個為資料引數,第三個為是否非同步
xhr.setHeader("content-type","application/x-www-form-urlencorded");  //設定請求頭
xhr.send();  //若請求方法為post 則可在send內新增引數
xhr.onreadystatechange = function(){
  if(xhr.status==200&&xhr.readyState==4){
    //成功響應之後的業務邏輯程式碼
  }
}

  JQuery封裝後的ajax請求:

  1.$.ajax

    

$.ajax({
    url:    //url地址
    method:  //請求方法
    data:   //傳送的資料
    dataType:  //響應資料的型別
    contentType:  //型別
    success:function(){}  //請求成功的回撥函式
    error:function(){}  //請求失敗的回撥函式
});

  2.$.get  $.post

$.get(url,dataType,successfunction)
$.get(url,data,dataType,successfunction)