首頁 > web前端 > js教程 > Ajax核心XMLHttpRequest總結

Ajax核心XMLHttpRequest總結

亚连
發布: 2018-05-25 12:00:07
原創
1306 人瀏覽過

本文主要是給大家總結了一下Ajax的核心內容XMLHttpRequest的相關知識,十分的詳細,推薦給大家,需要的小伙伴參考下。

Ajax:即"Asynchronous JavaScript and XML"(非同步JavaScript和XML),一門綜合性的技術:運用JavaScript物件XMLHttpRequest進行非同步資料交換;JavaScript操作DOM實現動態效果;運用XHTML表達訊息;XML和XSLT操作資料。此篇文章重點在於使用XMLHttpRequest物件與伺服器端進行非同步資料交換。

    使用方法 
    XMLHttpRequest五步驟使用法:

    1.建立物件;
    2.註冊回呼函數;
  方法設定和伺服器互動的基本資訊;
    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.跨網域存取

    問題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"));
登入後複製
上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

解決ajax跨域請求資料cookie遺失問題

JavaScript基於Ajax實作不刷新在網頁上動態顯示檔案內容

使用ajax實作無刷新改變頁面內容和網址列URL

####

以上是Ajax核心XMLHttpRequest總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板