Ajax Jquery

時間 2019-11-09

標籤 ajax jquery 欄目 Ajax 简体版

原文原文鏈接

1、Ajaxjavascript

Ajax是異步的JavaScript和xmlcss

同步：一個頁面會一直在等待着咱們服務器的響應（須要刷新咱們的請求頁面）html

異步：無論服務器那邊是否有響應都不會影響咱們的下一步操做（不須要刷新咱們的頁面，可是數據是變化的）前端

同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求。java

異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。（很差的是會增大服務器的訪問量）web

1.步驟數組

　　a.建立一個Ajax對象 XmlHttpRequest 經過這個對象對服務器進行請求操做瀏覽器

　　　　xmlHttpRequest=new xmlHttpRequest（）；（大多數瀏覽器能夠這樣建立）服務器

　　　　xmlHttpRequest=new ActiveObject（）；（爲了保持兼容性只有 ie5和ie6須要這樣建立）app

function createXMLHttpRequest() {
        var xmlHttpRequest;//聲明一個變量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest對象
    }

Ajax建立

　　b.打開連接

　　　　method: Get Post

　　　　xmlHttpRequest.open（"GET","url",true）;

　　c.向服務器發送請求的參數

　　　　xmlRequest.send(null);

　　d.調用監聽的方法得到一個相應的返回值

　　　　xmlHttpRequest.onreadystatechange

　　　　等待接收服務器那邊的響應

0 －（未初始化）尚未調用send()方法
1 －（載入）已調用send()方法，正在發送請求
2 －（載入完成）send()方法執行完成，已經接收到所有響應內容
3 －（交互）正在解析響應內容
4 －（完成）響應內容解析完成，能夠在客戶端調用了

當readystate==4 && status==200就能夠進行接收數據了

Ajax練習：

<script type="text/javascript">
        function createXMLHttpRequest() {
        var xmlHttpRequest;//聲明一個變量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest對象
    }
    
        function fun01(){
            var xmlHttpRequest=createXMLHttpRequest();
            //打開連接
            xmlHttpRequest.open("Get","/Ajax/servlet/Demo1",true);
            xmlHttpRequest.send(null);
            xmlHttpRequest.onreadystatechange=function(){
                //開始判斷咱們的響應碼
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    var text=xmlHttpRequest.responseText;
                    var h1=document.getElementById("h1");
                    h1.innerHTML=text;
                    
                    
                }
                
            }
        
        }
    </script>
  </head>
  
  <body>
          <input type="button" id="btn" value="請求" onclick="fun01()">
          <h1 id="h1"></h1>
    
  </body>

Ajax頁面操做

public class Demo1 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String str="hello world";
        //經過如下語句發送到Ajax中
        response.getWriter().write(str);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        
    }

}

servlet操做

Ajax實現登錄操做：

    <script type="text/javascript">
        function createXMLHttpRequest() {
        var xmlHttpRequest;//聲明一個變量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest對象
    }
    
        function fun01(){
            var username=document.getElementById("username")
            var xmlHttpRequest=createXMLHttpRequest();
            //打開連接
            xmlHttpRequest.open("POST","/Ajax/servlet/Demo2",true);
            //設置一個xmlHttpRequest  這個對象 設置一個tou
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //開始發送咱們的Ajax參數
            xmlHttpRequest.send("username="+username.value);
            //判斷給Ajax的響應碼
            xmlHttpRequest.onreadystatechange=function(){
                //開始判斷咱們的響應碼
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    var text=xmlHttpRequest.responseText;
                    var error=document.getElementById("error");
                    if(text==0){
                        error.innerHTML="正確";
                        
                    }else{
                        error.innerHTML="用戶名錯誤";
                    }
                    
                }
                
            }
        
        }
    </script>

  </head>
  
  <body>
    <form action="">
        用戶名：<input type="text" id="username" onblur="fun01()" /><span id="error"></span><br>
        密碼：<input type="password"  />
        <input type="submit" value="提交"/>
    
    </form>
  </body>

頁面部分

public class Demo2 extends HttpServlet {

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        
    }

    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        String username=request.getParameter("username");
        if(username.equals("zhangsan")){
            response.getWriter().write("0");
        }else{
            response.getWriter().write("1");
        }
    
    }


}

servlet部分

2、Jquery

　　web前端： html css JavaScript

　　jsp：<% %>腳本 EL表達式簡化咱們做用域的輸出

　　ESTL：簡化了咱們的Java腳本

　　Jquery：簡化了咱們css javascript操做

　　$(fuction(){

　　});

　　1）設置元素及內容

　　在常規的 DOM 元素中，咱們可使用 html()和 text()方法獲取內部的數據。html()方法能夠獲取或設置 html 內容，text()能夠獲取或設置文本內容。

$('#box').html(); //獲取 html 內容

$('#box').text(); //獲取文本內容，會自動清理 html 標籤

$('#box').html('<em>www.li.cc</em>'); //設置 html 內容

$('#box').text('<em>www.li.cc</em>'); //設置文本內容，會自動轉義 html 標籤

注意：當咱們使用 html()或 text()設置元素裏的內容時，會清空原來的數據。而咱們期

望可以追加數據的話，須要先獲取本來的數據。

$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加數據

若是元素是表單的話，jQuery 提供了 val()方法進行獲取或設置內部的文本數據。

$('input').val(); //獲取表單內容

$('input').val('www.li.cc'); //設置表單內容

若是想設置多個選項的選定狀態，好比下拉列表、單選複選框等等，能夠經過數組傳遞操做。

$("input").val(["check1","check2", "radio1" ]); //value 值是這些的將被選定

2）添加節點

爲了使頁面更加智能化，有時咱們想動態的在 html 結構頁面添加一個元素標籤，那麼在插入以前首先要作的動做就是：建立節點。

var box = $('<div id="box">節點</div>'); //建立一個節點

$('body').append(box); //將節點插入到<body>元素內部

另外一種方式：

$(box).appendTo('body');

3）移動節點

利用現有的方法進行節點的移動。

舉例：

<span id="spanl">我是span標籤</span>

<div id="div2">我是div</div>

function click3(){

var span = $("#spanl");

var div = $("#div2");

div.insertBefore(span);// insertAfter();

}

4）刪除節點

使用jQuery提供的remove()方法，此方法是將對象從頁面中刪除，可是有返回對象，返回的就是刪除的對象。

<span id="spanl">我是span標籤</span>

<div id="div2">我是div</div>

function click4(){

var div = $("#div2").remove();

}

5）複製節點

複製節點，就是將對象重複拷貝一份，可使用jQuery提供的clone()方法，此方法就是將對象自己進行拷貝，拷貝後返回拷貝的對象。

<span onclick="f1();" >歡迎來到杭州歸谷</span>

<button onclick="f2();">點擊複製節點</button>

</div>

function f1(){

alert("點擊了span標籤");

}

function f2(){

var body1 = $("#body1");

var div1 = $("#div1");

body1.append(div1.clone());

}

6）替換節點

//替換節點

$('div').replaceWith('<span>節點</span>'); //將 div 替換成 span 元素

$('<span>節點</span>').replaceAll('div'); //同上

//清空節點

$('div').empty(); //刪除掉節點裏的內容

7）包裹節點

jQuery 提供了一系列方法用於包裹節點，那包裹節點是什麼意思呢？其實就是使用字符串代碼將指定元素的代碼包含着的意思。

$('div').wrap('<strong></strong>'); //在 div 外層包裹一層 strong

$('div').wrap('<strong>123</strong>'); //包裹的元素能夠帶內容

$('div').wrap('<strong><em></em></strong>'); //包裹多個元素

8）屬性節點

l attr()方法

設置與獲取屬性

舉例：

$(function(){

$(「span」).attr(「title」,」weclome」);

});

</script>

結果：<span title=」weclome」>abc</span>

在頁面標籤元素中，每一個標籤元素都擁有多個屬性，所以jQuery也提供了使用屬性對象的方式來對元素節點進行操做，屬性對象JS中的面向對象方式：{「title」:」weclome」,」id」:」sp1」}，這個方式同時也是JSON所使用的傳輸方式，也就是JSON串。也可使用Object對象方式來使用。