DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> Ajax核心XMLHttpRequest總結
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"));

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved