Ajaxは、非同期JavaScriptとXMLの略語であり、ページの特定の部分を更新するメカニズムです。サーバーからデータを取得した後、ページの一部を更新する力が得られるため、ページ全体の更新を回避できます。さらに、この方法でローカルページの更新を実現することは、スムーズなユーザーエクスペリエンスを効果的に作成するだけでなく、サーバー上の負荷を減らすこともできます。
基本的なAJAXリクエストの分析は次のとおりです。
var xhr = new xmlhttprequest（）; xhr.open（ 'get'、 'send-ajax-data.php'）; xhr.send（null）;
ここでは、サーバーにHTTP要求を行うことができるクラスのインスタンスを作成します。その後、開かれたメソッドが呼び出され、最初のパラメーターはHTTPリクエストメソッドであり、2番目のパラメーターはリクエストページのURLです。最後に、パラメーターnullを使用して送信メソッドを呼び出します。 POSTリクエストメソッドを使用する場合（ここで入手してください）、送信メソッドパラメーターには送信するデータを含める必要があります。
サーバーの応答の処理方法は次のとおりです。
xhr.onedeadystatechange = function（）{var done = 4; // ReadyState 4は、リクエストがサーバーvar ok = 200に送信されたことを意味します。 //ステータス200とは、（xhr.readystate === done）{if（xhr.status === ok）{console.log（xhr.responsetext）; //これは返されたテキストです} else {console.log（ "error："+ xhr.status）; //このリクエストでエラーが発生しました}}}onreadystatechangeは非同期なので、いつでも呼び出されることを意味します。このタイプの関数はコールバック関数と呼ばれます - 一部の処理が完了すると、呼び出されます。この場合、この処理はサーバーで発生します。
例
便利なAjaxメソッドは、多くの人がJQueryに依存している理由でもありますが、実際、ネイティブJavaScriptのAjax APIも非常に強力であり、基本的な使用法は各ブラウザでそれほど変わりません。したがって、Ajaxオブジェクトを自分で完全にカプセル化できます。以下は、カプセル化されたAJAXオブジェクトです。
// ajax method // lazy load create xhr object function createxhr（）{if（ 'xmlhttprequest' in window）{createxhr = function（）{return new xmlhttprequest（）; }; } else if（window）{createxhr = function（）{return new ActiveXObject（ "msxml2.xmlhttp"）; }; } else {createxhr = function（）{throw new error（ "ajaxはこのブラウザーによってサポートされていません"）; }; } return createxhr（）; } // ajaxはfunction request（ajaxdata）を実行します{var xhr = createxhr（）; ajaxdata.before && ajaxdata.before（）; //イベントを介して非同期リクエストを処理xhr.onreadystatechange = function（）{if（xhr.readystate == 4）{if（xhr.status == 200）{if（ajaxdata.datatype == 'json'）{// server jsons = xhr.responsetextによってjsonオブジェクトを取得します; json1 = eval（ '（' + jsonstr + '）'）、json2 =（new function（ 'return' + jsonstr））（）; ajaxdata.callback（json2）; // ajaxdata.callback（json.parse（xhr.responsetext））; // IE6/7でサポートされていないネイティブメソッド} else ajaxdata.callback（xhr.responsetext）; } else {ajaxdata.error && ajaxdata.error（xhr.responsetext）; }}}; //リクエストパラメーターxhr.open（ajaxdata.type、ajaxdata.url）; if（ajaxdata.nocache == true）xhr.setRequestheader（ 'if-modified-since'、 '0'）; if（ajaxdata.data）{xhr.setRequestheader（ 'content-type'、 'application/x-www-form-urlencoded'）; xhr.send（ajaxdata.data）; } それ以外 {？ ？ xhr.setRequestheader（ 'x-requested with'、 'xmlhttprequest'）; xhr.send（null）; } return xhr;}関数post（ajaxdata）{ajaxdata.type = 'post'; var _result = request（ajaxdata）; return _result;}関数get（ajaxdata）{ajaxdata.type = 'get'; ajaxdata.data = null; var _result = request（ajaxdata）; _result;}を返します使用の例は次のとおりです。
index.html
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> native javascript実装ajax </title> <link rel = "styleSheet" type = "text/css" media = "all" href = "。 font-family： 'lucida grande'、 'microsoft yahei'} #content .btn_ctr {display：block;幅：120px;高さ：30px;マージン：0 Auto 20px;背景：＃53a7bb;色：#fff; font-weight：bold;フォントサイズ：14px; Line-Height：30px;テキスト装置：なし;ボーダーラジウス：4px; } #test {width：280px;高さ：130px;マージン：0 Auto;パディング：15px;背景：#fff;ボーダーラジウス：4px;テキストアライグ：左; } </style> </head> <body> <div id = "header"> <div id = "header-content"> <div id = "header-inside"> <p> <a href = "http://kayosite.com/CSS3-Animation.html" href = "http://kayosite.com"ターゲット= "_ blank">私のブログ</a> </p> <p> kayo©Copyright 2011-2013 </p> </div> <h1> css3アニメーション</h1>> </div> </div> <div = " onclick = "get（{url： './ajax.html'、callback：function（out）{document.getelementbyid（ 'test'）。innerhtml = out;}}）"> ajax get content </a> <div = "test"> </div> </div> </div> ajax.html<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <body> <p>このテキストは正常に取得しました</p> </body> </html>
特定の効果については、完全なデモを閲覧できます。