Ajax核心XMLHttpRequest總結_AJAX相關

Ajax:即"Asynchronous JavaScript and XML"（非同步JavaScript和XML），一門綜合性的技術：運用JavaScript對象XMLHttpRequest進行非同步資料交換；JavaScript操作DOM實現動態效果；運用XHTML+CSS表達資訊；XML和XSLT操作資料。此篇文章重點介紹使用XMLHttpRequest對象與伺服器端進行非同步資料交換。

    使用方法 
    XMLHttpRequest五步使用法：

複製代碼 代碼如下:

    1.建立對象；
    2.註冊回呼函數；
    3.使用open方法設定和伺服器互動的基本資料；
    4.設定發送的資料，開始和伺服器端互動；
    5.實現回呼函數。

    由於每次應用XMLHttpRequest對象時，都要進行五步操作，因此，可將該對象的使用封裝為js檔案中，傳遞部分參數使用其方法就可以完成相應功能，實現如下：

複製代碼 代碼如下:

    //使用封裝方法人員只提供http的請求，url地址，資料，成功和失敗的回調的方法
    //1.定義XMLHttpRequest對象的構造方法
    var MyXMLHttpRequest =function（）{
    var xmlhttprequest;
    if（window.XMLHttpRequest）{
    //IE7,IE8,FireFox,Mozillar,Safari,Opera
    //alert（"IE7,IE8,FireFox,Mozillar,Safari,Opera"）；
    xmlhttprequest = new XMLHttpRequest（）；
    //解決瀏覽器在伺服器端響應由於沒有Text頭的時候可能無法工作的問題
    if（xmlhttprequest.overrideMimeType）{
    xmlhttprequest.overrideMimeType（"text/xml"）；
    }
    }else if（window.ActiveXObject）{
    //IE6,IE5.5,IE5
    alert（"IE6,IE5.5,IE5"）；
    var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    for （var n=0;n

擴充問題

    1.瀏覽器緩衝
    2.中文亂碼
    3.跨域訪問

    對於問題1、問題3都可以通過更改url地址的方法得以解決。問題1可在url地址尾新增時間戳記，問題3通過代理方式進行解決。只需在send（）中的第三步執行前添加相應判斷即可：

複製代碼 代碼如下:

    //解決緩衝的轉換：增加時間戳記
    if（url.indexOf（"?"） >= 0 ）{
    url = url + "&t=" + （new Date（））。valueOf（）；
    } else {
    url = url + "?t=" + （new Date（））。valueOf（）；
    }
    //解決跨域的問題
    if（url.indexOf（"http://"） >= 0） {
    url.replace（"?","&"）；
    url = "Proxy?url=" + url;
    }

    問題3對應代理服務端實現：

複製代碼 代碼如下:

    /**
    * Handles the HTTP GET method.
    *
    * @param request servlet request
    * @param response servlet response
    * @throws ServletException if a servlet-specific error occurs
    * @throws IOException if an I/O error occurs
    */
    @Override
    protected void doGet（HttpServletRequest request, HttpServletResponse response）
    throws ServletException, IOException {
    //擷取參數，最後得到請求url地址類似於：url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33
    StringBuilder url = new StringBuilder（）；
    url.append（request.getParameter（"url"））；
    //擷取訪問的跨域地址url = http://192.168…/AJAX/AJAXServer
    Enumeration enu = request.getParameterNames（）；
    boolean flag = false;       //定義標誌變數，表示是否為拼接的第一個參數
    while（enu.hasMoreElements（））{
    String paramName = （String） enu.nextElement（）；
    if（！paramName.equals（"url"））{
    String paramValue = request.getParameter（paramName）；
    paramValue = URLEncoder.encode（paramValue,"utf-8"）；
    if（！flag）{
    url.append（"?"）。append（paramName）。append（"="）。append（paramValue）；
    flag = true;
    } else {
    url.append（"&"）。append（paramName）。append（"="）。append（paramValue）；
    }
    }
    }
    response.setContentType（"text/html;charset=utf-8"）；
    PrintWriter out = response.getWriter（）；
    if（url != null && url.length（） > 0）{
    URL connectionUrl = new URL（url.toString（））；
    BufferedReader reader = new BufferedReader（new InputStreamReader（connectionUrl.openStream（），"utf-8"））；

以上就是本文的全部內容了，希望大家能夠喜歡。