摘要：性能會有所降低一點內(nèi)容，刷新整個頁面用戶的操作頁面會中斷整個頁面被刷新了就是能夠做到局部刷新三對象是中最重要的一個對象。頭信息已經(jīng)接收，響應(yīng)數(shù)據(jù)尚未接收。

Ajax(Asynchronous JavaScript and XML) 異步JavaScript和XML

Ajax實際上是下面這幾種技術(shù)的融合：

(1)XHTML和CSS的基于標(biāo)準(zhǔn)的表示技術(shù)

(2)DOM進(jìn)行動態(tài)顯示和交互

(3)XML和XSLT進(jìn)行數(shù)據(jù)交換和處理

(4)XMLHttpRequest進(jìn)行異步數(shù)據(jù)檢索

(5)Javascript將以上技術(shù)融合在一起

客戶端與服務(wù)器，可以在【不必刷新整個瀏覽器】的情況下，與服務(wù)器進(jìn)行異步通訊的技術(shù)

在我們之前的開發(fā)，每當(dāng)用戶向服務(wù)器發(fā)送請求，哪怕只是需要更新一點點的局部內(nèi)容，服務(wù)器都會將整個頁面進(jìn)行刷新。

性能會有所降低(一點內(nèi)容，刷新整個頁面！)

用戶的操作頁面會中斷(整個頁面被刷新了)

Ajax就是能夠做到局部刷新！

XMLHttpRequest對象是Ajax中最重要的一個對象。使用Ajax更多的是編寫客戶端代碼，而不是服務(wù)端的代碼。

傳統(tǒng)的web前端與后端的交互中，瀏覽器直接訪問Tomcat的Servlet來獲取數(shù)據(jù)。Servlet通過轉(zhuǎn)發(fā)把數(shù)據(jù)發(fā)送給瀏覽器。

當(dāng)我們使用AJAX之后，瀏覽器是先把請求發(fā)送到XMLHttpRequest異步對象之中，異步對象對請求進(jìn)行封裝，然后再與發(fā)送給服務(wù)器。服務(wù)器并不是以轉(zhuǎn)發(fā)的方式響應(yīng)，而是以流的方式把數(shù)據(jù)返回給瀏覽器

XMLHttpRequest異步對象會不停監(jiān)聽服務(wù)器狀態(tài)的變化，得到服務(wù)器返回的數(shù)據(jù)，就寫到瀏覽器上【因為不是轉(zhuǎn)發(fā)的方式，所以是無刷新就能夠獲取服務(wù)器端的數(shù)據(jù)】

要創(chuàng)建XMLHttpRequest對象是要分兩種情況考慮的：

在IE6以下的版本

在IE6以上的版本以及其他內(nèi)核的瀏覽器(Mozilla)等

open()(String method,String url,boolean asynch,String username,String password)

send(content)

setRequestHeader(String header,String value)

getAllResponseHeaders()

getResponseHeader(String header)

abort()

常用的方法就是黑色粗體的前三個

open()：該方法創(chuàng)建http請求

第一個參數(shù)是指定提交方式(post、get)

第二個參數(shù)是指定要提交的地址是哪

第三個參數(shù)是指定是異步還是同步(true表示異步，false表示同步)

第四和第五參數(shù)在http認(rèn)證的時候會用到。是可選的

setRequestHeader(String header,String value)：設(shè)置消息頭（使用post方式才會使用到，get方法并不需要調(diào)用該方法）

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

send(content)：發(fā)送請求給服務(wù)器

如果是get方式，并不需要填寫參數(shù)，或填寫null

如果是post方式，把要提交的參數(shù)寫上去

onreadystatechange：請求狀態(tài)改變的事件觸發(fā)器（readyState變化時會調(diào)用此方法），一般用于指定回調(diào)函數(shù)

readyState：請求狀態(tài)readyState一改變，回調(diào)函數(shù)被調(diào)用，它有5個狀態(tài)

0：未初始化

1：open方法成功調(diào)用以后

2：服務(wù)器已經(jīng)應(yīng)答客戶端的請求

3：交互中。Http頭信息已經(jīng)接收，響應(yīng)數(shù)據(jù)尚未接收。

4：完成。數(shù)據(jù)接收完成

responseText：服務(wù)器返回的文本內(nèi)容

responseXML：服務(wù)器返回的兼容DOM的XML內(nèi)容

status：服務(wù)器返回的狀態(tài)碼

statusText：服務(wù)器返回狀態(tài)碼的文本信息

上面有兩個地方都提及了回調(diào)函數(shù)，回調(diào)函數(shù)是什么？？

回調(diào)函數(shù)就是接收服務(wù)器返回的內(nèi)容！

檢測用戶輸入的用戶名是否為"zhongfucheng"，只要不是zhongfucheng，就可以使用！

創(chuàng)建的div只要用于顯示服務(wù)器返回的數(shù)據(jù)

當(dāng)用戶點擊按鈕的時候，就觸發(fā)事件。

創(chuàng)建XMLHttpRequest對象

創(chuàng)建http請求

把文本框的數(shù)據(jù)發(fā)送給http請求的目標(biāo)

指定回調(diào)函數(shù)

編寫回調(diào)函數(shù)

發(fā)送http請求

回調(diào)函數(shù)得到http返回的內(nèi)容，把內(nèi)容寫在div上

實現(xiàn)了局部更新，不需要刷新整一個頁面

在傳統(tǒng)的Web中我們已經(jīng)解決過中文亂碼問題了。

服務(wù)器傳送給瀏覽器數(shù)據(jù)發(fā)生亂碼：response設(shè)置編碼的時候和瀏覽器頁面的編碼一致便可以解決

瀏覽器傳送給服務(wù)器數(shù)據(jù)發(fā)生亂碼：如果是post方式，request設(shè)置編碼便可以解決。如果是get方式，Tomcat下，使用ISO8859-1編碼得到原本的二進(jìn)制數(shù)組，再使用UTF-8編碼便可以解決

接下來，要介紹的是：我們可以屏蔽任何瀏覽器和任何服務(wù)器的編碼格式，瀏覽器發(fā)送給服務(wù)器的數(shù)據(jù)不造成亂碼問題！

具體我們是這樣做的：

發(fā)送數(shù)據(jù)給服務(wù)器的時候，JavaScript使用兩次EncodeURI()

服務(wù)器得到數(shù)據(jù)，使用URLEncode.decode(數(shù)據(jù),"utf-8")進(jìn)行解碼

為啥我能說這種方式屏蔽任何瀏覽器和服務(wù)器的編碼格式，都不會亂碼呢？？

在傳統(tǒng)的Web中我們也解決過緩存的問題，通過設(shè)置response的頭信息，返回給瀏覽器就可以實現(xiàn)不緩存頁面了。

但是呢，現(xiàn)在我們使用XMLHttpRequest，拿到的不是全新的頁面，僅僅是服務(wù)器端發(fā)送過來的數(shù)據(jù)！！

那我們要怎么解決緩存的問題呢？？產(chǎn)生緩存的原因就是：我們請求了同一個地址，做了相同的操作。服務(wù)端認(rèn)為我的操作并沒有什么變化，就直接把緩存的信息給我了。這樣的話，我就不能更換驗證碼圖片了(等等應(yīng)用)。

我們可以這樣做：

在每次請求url中加入一個時間戳參數(shù)【每次url就不一樣了】

加入時間戳參數(shù)到url時，也分兩種情況

url本身就帶有參數(shù)了，也就是說有"?"號了，那么添加時間戳的時候就需要用"&"號

[x] url沒有參數(shù)，直接使用"?"號來添加時間戳

if(url.indexOf("?") >= 0){
url = url + "&t=" + (new Date()).valueOf();
} else{
url = url + "?t=" + (new Date()).valueOf();
}

使用XMLHttpRequest去跨域訪問是會出現(xiàn)錯誤的。

我們要怎么解決呢？？這時候就要用代理思想了

XMLHttpRequest先把請求提交給同域的Servlet處理

同域Servlet再將XMLHttpRequest的請求提交給跨域的服務(wù)器

同域Servlet得到跨域服務(wù)器的返回值，再返回給XMLHttpRequest

這個時候，XMLHttpRequest跨域訪問就分兩種(GET和POST)情況了，因為這兩種提交數(shù)據(jù)的方式是不一樣的！

我們需要在調(diào)用open方法之前判斷一下要連接的地址是不是以http開頭的，如果是則認(rèn)為要訪問的是跨域的資源

首先將當(dāng)前url中的”?”變成”&”，這是因為將要連接的地址改為”Proxy?url=” + url以后，如果原來url地址中有參數(shù)的話，新的url地址中就會有兩個“?”這會導(dǎo)致服務(wù)器端解析參數(shù)錯誤，”url=”之后的內(nèi)容表示本來要訪問的跨域資源的地址。

GET方式是直接把參數(shù)的信息都放在url地址上，所以處理起來會相對簡單。

步驟：

使用StringBuilder裝載著getParameter("url")【獲取得到地址，呆會要做拼接，所以用StringBuilder】

得到其他參數(shù)的時候，做URLEncode.encode()，因為我們進(jìn)入Servlet的時候已經(jīng)被decode了一次【我們要盡可能保留原始請求】(參照解決中文亂碼)

遍歷所有的請求參數(shù)，只要名字不是"url"，就添加到StringBuilder中【第一個參數(shù)為"?",其他的參數(shù)為"&"】(http://localhost:8080/url?aa=bb&cc=dd)

創(chuàng)建URL對象，把拼接成的StringBuilder傳遞進(jìn)去

使用BufferReader讀取遠(yuǎn)程服務(wù)器返回的數(shù)據(jù)，要指定輸入流編碼格式，否則會亂碼

BufferedReader reader = new BufferedReader(new InputStreamReader(URL對象.openSteam(),"UTF-8"));  

最后，把遠(yuǎn)程服務(wù)器讀取到的數(shù)據(jù)再返回給XMLHttpRequest

POST方式把參數(shù)的信息都封裝到HTTP請求中，在URL進(jìn)行連接的時候，需要把數(shù)據(jù)寫給遠(yuǎn)程服務(wù)器

步驟：

得到url參數(shù)，創(chuàng)建StringBuilder

得到其他參數(shù)的時候，做URLEncode.encode()，因為我們進(jìn)入Servlet的時候已經(jīng)被decode了一次【我們要盡可能保留原始請求】(參照解決中文亂碼)

遍歷所有的請求參數(shù)，只要名字不是"url"，就添加到StringBuilder中【第一個參數(shù)直接給出,其他的參數(shù)為"&"】(aa=bb&cc=dd&ee=ff)

創(chuàng)建URL對象，創(chuàng)建URL連接器，允許寫數(shù)據(jù)到遠(yuǎn)程服務(wù)器上

URL url = new URL(url);
URLConnection connection = url.openConnection;
connection.setDoOutPut(true);

得到寫數(shù)據(jù)流

OutputSteamWriter writer = new OutputSteamWriter(conncetion.getOutputSteam)

把StringBuilder的數(shù)據(jù)寫到遠(yuǎn)程服務(wù)器上，并flush

使用BufferReader讀取遠(yuǎn)程服務(wù)器返回的數(shù)據(jù)

BufferedReader reader =  new BufferedReader(new InputSteamReader(conncetion.inputSteamReader,"UTF-8"));

我們在購物的時候，常常需要我們來選擇自己的收貨地址，先選擇省份，再選擇城市...

有沒有發(fā)現(xiàn)：當(dāng)我們選擇完省份的時候，出現(xiàn)的城市全部都是根據(jù)省份來給我們選擇的。這是怎么做到的呢？？？其實就是通過AJAX來完成的。使用AJAX技術(shù)讓我們看起來網(wǎng)頁非?！爸悄堋?，會根據(jù)省份來給出對應(yīng)的城市信息。

我們這里就不讀取數(shù)據(jù)庫了，直接在Servlet寫死數(shù)據(jù)來進(jìn)行模擬測試。

我們知道AJAX與服務(wù)器之間的交互常用的傳輸載體格式有三種：

HTML

XML

JSON

由于省份與城市是有層級關(guān)系的，因此我們只能用XML或者JSON。

我們這里首先就用XML來進(jìn)行，后面會使用JSON，來看看他倆有什么不同的地方。。

當(dāng)用戶選擇了某個省份之后，就使用AJAX與服務(wù)器進(jìn)行交互，那么在選擇城市的時候就出現(xiàn)對應(yīng)的城市信息。

監(jiān)聽下拉框值變化事件

只要下拉框值變化了，就與服務(wù)器進(jìn)行交互

得到服務(wù)器返回的值，解析XML

使用DOM把數(shù)據(jù)寫到城市下拉框列表中

得到前臺帶過來的數(shù)據(jù)

判斷該數(shù)據(jù)是什么，返回對應(yīng)的的XML文件

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/17
  Time: 19:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    



<%--############前臺頁面###################--%>

    請選擇省份
    廣東
    湖南


    請選擇城市


<%--############AJAX###################--%>

import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by ozc on 2017/5/17.
 */
@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
public class ProvinceServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //設(shè)置中文編碼
        request.setCharacterEncoding("UTF-8");
        String province = request.getParameter("province");

        //這里是返回的是XML，因此指定XML數(shù)據(jù)！
        response.setContentType("text/xml;charset=UTF-8");

        PrintWriter printWriter = response.getWriter();

        /****************返回XML文件給前臺**************/
        printWriter.write("");
        printWriter.write("");
        if("廣東".equals(province)){
            printWriter.write("廣州");
            printWriter.write("深圳");
            printWriter.write("中山");
        }else if("湖南".equals(province)){
            printWriter.write("長沙");
            printWriter.write("株洲");
            printWriter.write("湘潭");
            printWriter.write("岳陽");
        }
        printWriter.write("");

        System.out.println("1111");


        /*******事后操作*******/
        printWriter.flush();
        printWriter.close();


    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        this.doPost(request, response);
    }
}

監(jiān)聽下拉框的變化，如果變化了，那么就使用異步操作去訪問服務(wù)器，得到對應(yīng)的數(shù)據(jù)返回給異步對象

異步對象解析服務(wù)器帶過來的數(shù)據(jù)，使用DOM編程把數(shù)據(jù)動態(tài)添加到頁面上

在Servlet上記得要指定返回的是XML的數(shù)據(jù)！

在前臺解析XML文檔的時候，不能直接使用innerHtml來得到節(jié)點的值，只能通過firstChild.nodeValue的方式獲取。

由于每次append到下拉框都會連續(xù)append，因此在響應(yīng)事件的時候，把下拉框清零

把下拉框options的長度賦值為1，那么就是清零的操作了。

前面我們已經(jīng)使用過了XML作為數(shù)據(jù)載體在AJAX中與服務(wù)器進(jìn)行交互。當(dāng)時候我們的案例是二級聯(lián)動，使用Servlet進(jìn)行控制

這次我們使用JSON作為數(shù)據(jù)載體在AJAX與服務(wù)器交互，使用三級聯(lián)動，使用Action進(jìn)行控制....

省份-城市-區(qū)域三級聯(lián)動【Struts2 + JSON版】

與上次是一樣的，只不過這次換了用JSON，使用Action控制罷了...

監(jiān)聽下拉框的變動，使用異步對象與服務(wù)器進(jìn)行交互。

監(jiān)聽下拉框的變動

得到服務(wù)器返回的JSON數(shù)據(jù)

使用eval()進(jìn)行解析，得到具體的對象

使用DOM編程把數(shù)據(jù)填充到對應(yīng)的下拉框上

得到前臺發(fā)送過來的數(shù)據(jù)

判斷具體的數(shù)據(jù)是什么，給出對應(yīng)的數(shù)據(jù)

使用Struts2提供的組件把數(shù)據(jù)封裝成JSON

返回給瀏覽器

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

  
    

      
  
  


  <%--############前臺頁面##############################--%>
  
    請選擇省份
    廣東
    北京
  

  
    請選擇城市
  


  
    請選擇區(qū)域
  

  <%--############監(jiān)聽省份##############################--%>
  

  

要想Struts2能夠把Action的數(shù)據(jù)封裝成JSON，就需要導(dǎo)入Struts2的開發(fā)包

struts2-json-plugin-2.3.4.1.jar

在Action中對應(yīng)的成員屬性需要給getter方法

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ozc on 2017/5/18.
 */
public class ProvinceAction  extends ActionSupport{

    //自動封裝數(shù)據(jù)
    private Bean bean;
    public Bean getBean() {
        return bean;
    }
    public void setBean(Bean bean) {
        this.bean = bean;
    }

    //封裝城市的集合
    private List city = new ArrayList<>();
    public List getCity() {
        return city;
    }

    public String findCityByProvince() throws Exception {

        if ("廣東".equals(bean.getName())) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(bean.getName())) {
            city.add("一環(huán)");
            city.add("二環(huán)");
            city.add("三環(huán)");
            city.add("四環(huán)");

        } else {
            System.out.println("沒有你選擇的地區(qū)");

        }
        return "ok";
    }
}

返回給前端的時候，數(shù)據(jù)是這樣子的：

<%--############監(jiān)聽城市##############################--%>

public String findAreaByCity() throws Exception {

    if ("廣州".equals(bean.getName())) {
        area.add("白云區(qū)");
        area.add("黃浦區(qū)");
        area.add("蘿崗區(qū)");
    } else if ("珠海".equals(bean.getName())) {
        area.add("香江");
        area.add("拱北");
        area.add("EE");
        area.add("xx");
    } else {
        System.out.println("沒有你選擇的地區(qū)");

    }
    return "ok";
}

這次使用的是JSON作為數(shù)據(jù)載體與服務(wù)器進(jìn)行交互，和XML本質(zhì)上是沒有區(qū)別的。

只不過JSON是更加輕量級文本數(shù)據(jù)，在JavaScript能夠方便地獲取返回的數(shù)據(jù)

在Struts2中把Action數(shù)據(jù)封裝成JSON格式，返回給異步對象

需要導(dǎo)入jar包

在配置文件中配置繼承json包

返回的類型是json

如果使用POST時，發(fā)送的key、vaulue太多的話，我們可以使用bean進(jìn)行封裝

當(dāng)選中省份時，把城市和區(qū)域的下拉框清空，當(dāng)選擇城市時，把區(qū)域的下拉框清空

如果文章有錯的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章的同學(xué)，可以關(guān)注微信公眾號:Java3y