ホームページ  >  記事  >  ウェブフロントエンド  >  Ajax コア XMLHttpRequest の概要

Ajax コア XMLHttpRequest の概要

亚连
亚连オリジナル
2018-05-25 12:00:071283ブラウズ

この記事は、Ajax のコアコンテンツである XMLHttpRequest の関連知識を主にまとめたものです。非常に詳しく書かれているので、必要な方はぜひご参照ください。

Ajax: それは「非同期 JavaScript と XML」 (非同期 JavaScript と XML) であり、JavaScript オブジェクト XMLHttpRequest を使用して非同期データ交換を行い、JavaScript は XHTML+CSS を使用して情報を表現します。 XSLT はデータを操作します。この記事では、サーバーとの非同期データ交換に XMLHttpRequest オブジェクトを使用することに焦点を当てます。

使用法
XMLHttpRequest の 5 つのステップの使用法:

1. オブジェクトを作成します。
2. コールバック関数を登録します。
3. open メソッドを使用して、サーバーとの対話のための基本情報を設定します。送信するデータを設定し、サーバーとの対話を開始します
5. コールバック関数を実装します。

XMLHttpRequest オブジェクトを使用するたびに 5 つの手順が必要となるため、オブジェクトの使用は 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() の 3 番目のステップを実行する前に、対応する判断を追加するだけです:

// キャッシュ変換を解決します: タイムスタンプを追加します


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に基づいており、更新せずにWebページ上のファイルコンテンツを動的に表示します

Ajaxを使用して列の URL を更新せずにページのコンテンツとアドレスを変更します

以上がAjax コア XMLHttpRequest の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。