私の個人的なブログからの移転サイトは
、私は、ブログに読めば「ゼロからの成功したGETリクエストにアヤックススターター（）、」その後、確かに我々は機能を取得するための単純な要求を完了していることを知っています。次のとおりです。
/**
* 一个简单的get请求
* @param {String} url 请求地址,文件名
* @param {Function} fnSucc 请求成功时执行的函数
* @param {Function} fnFaild 请求失败执行的函数
*/
function AJAX(url, fnSucc, fnFaild) {
//1.创建ajax对象
var oAjax = null;
/**
* 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
* 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法,url,是否异步)
oAjax.open("GET", url, true);
//3.发送请求
oAjax.send();
//4.接收返回
//OnRedayStateChange事件
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
// alert("成功" + oAjax.responseText);
fnSucc(oAjax.responseText);
} else {
// alert("服务器响应失败!");
if (fnFaild) {
fnFaild();
}
}
}
};
}なぜAjaxの機能パッケージを続行？
次の理由の場合：
現在の方法が要求を取得するだけで使用しますが、ポストの要求を使用することはできません、あなたはときに、ユーザー登録、POSTので、今不完全なPOSTを使用する必要があります。
現時点ではリクエストパラメータはURLのみに直接書き込むことができ、データへの動的アクセスを助長されていません、パラメータが使いやすい、道を解決するために使用する必要があります。
リクエストメソッドリクエストのキャッシュの問題を取得します。
カプセル化方式を学びます、
変革の目標
function ajax(url, options) {
// your implement
}オプションのパラメータを含むことが、目的です。
タイプ：ポストまたは取得するには、デフォルト値を持つことができます
データ：キーオブジェクトとしてまたは文字列＆割り当てに関連する送信されたデータ、
ONSUCCESS：成功の関数を呼び出すとき
onfail：失敗の関数を呼び出します
変態開始（3段階）
元の関数の変換（A）
パラメータは、削除fnSucc、fnFaild追加しますoptions。実行成功と失敗の機能はオプションの対象となることはonsuccess、onfail二つの方法は、値を対応します。
主に図4に示すように、戻り受信次のように部分が変更されています
//4.接收返回
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
//请求成功。形参为获取到的字符串形式的响应数据
options.onsuccess(oAjax.responseText);
} else {
//先判断是否存在请求失败函数
//存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
if (options.onfail) {
options.onfail(oAjax);
}
}
}
};（B）要求パラメータを処理します
私たちが知りたいまず第一には、使用パラメータへの要求があった場合、リクエストパラメータは、方法は、特にシンプルでGETです。直接URLを追加しますか？パラメータ名=値＆パラメータパラメータ名= 2 2のパラメータ値の後ろ
アイデアの実現：
-
まず、何がないときoptions.dataが使用されているかどうかを判断する
"?timestamp= + new Date().getTime();URL内のリンクは、キャッシュをクリアするためには、。ここで私は使用方法、タイムスタンプは、本明細書に変更することができるです
new Date().getTime();また、使用することができMath.random();、それぞれの要求が異なるURLを保つために主に。参照する他の多くの方法がありますAjaxは問題を解決するためのキャッシュ方法は？。自身がより多くのそれをグーグル人気のある観光。
Options.data存在は、取り扱い制限要求データフォーマットはJSON（もちろん、必ずしもそう厳密JSONなどの、それがフォームキーに保たれるべきである）に設定されている容易にするはずです。
データを使用してトラバース中に使用される
=使用、キー値で接続するように&要求パラメータの複数を接続します唯一のオリジナル機能2. Connectサーバーの変更
次のことを達成するために：
オリジナル：
//2.连接服务器
//open(方法,url,是否异步)
oAjax.open("GET", url, true);今：
//open(方法,url,是否异步)
var param = "";//请求参数。
//判断data存在时缓存它，不存在时，设为0
var data = options.data ? options.data : 0;
if(typeof(data)==="object"){//只有data为对象使才执行
for (var key in data){//请求参数拼接
if (data.hasOwnProperty(key)) {
param += key+"="+data[key]+"&";
}
}
param.replace(/&$/,"");//去除结尾的&。
}else{
param= "timestamp=" + new Date().getTime();
}
//2.连接服务器
oAjax.open("GET", url+"?"+param, true);（C）選択要求タイプ
ポストがデータを送信して、アナログフォームの送信。URLでリクエストパラメータ、より安全に見ることができません。
アイデアの実現：
あるかどうかを判断するタイプは、存在する場合に大文字に変換するかどうか、デフォルトでは、GET要求です。
要求、GET、またはPOSTの種類を決定します。
データを提出するポストの要求を使用する場合は、リクエストパラメータは、URLをたどっていません。
-
ポストと要求データに追加しなければならない
open()とsend()、ヘッダ情報を直接添加します。xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ポスト要求データと前記接続サーバ3に送信要求を処理する手段
次のことを達成するために：
オリジナル：
//2.连接服务器
oAjax.open("GET", url+"?"+param, true);今：
//3.发送请求
var type = options.type ? options.type.toUpperCase() : "GET" ;
if(type ==="GET"){
oAjax.open("GET", url+"?"+param, true);
oAjax.send();
}else{
oAjax.open("POST", url, true);
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oAjax.send(param);
}最終的な完成
併用群の一緒に前に書かれました。
/**
* AJAX函数封装
* @param {string} url 请求地址（必须）
* @param {object} options 发送请求的选项参数
* @config {string} [options.type] 请求发送的类型。默认为GET。
* @config {Object} [options.data] 需要发送的数据。
* @config {Function} [options.onsuccess] 请求成功时触发，function(oAjax.responseText, oAjax)。（必须）
* @config {Function} [options.onfail] 请求失败时触发，function(oAjax)。(oAJax为XMLHttpRequest对象)
*
*@returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
*/
function AJAX(url, options) {
//1.创建ajax对象
var oAjax = null;
/**
* 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
* 若直接使用XMLHttpRequest,在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法,url,是否异步)
var param = ""; //请求参数。
//只有data存在，且为对象使才执行
var data = options.data ? options.data : -1; //缓存data
if (typeof (data) === "object") {
for (var key in data) { //请求参数拼接
if (data.hasOwnProperty(key)) {
param += key + "=" + data[key] + "&";
}
}
param.replace(/&$/, "");
} else {
param = "timestamp=" + new Date().getTime();
}
//3.发送请求
var type = options.type ? options.type.toUpperCase() : "GET";
if (type === "GET") {
oAjax.open("GET", url + "?" + param, true);
oAjax.send();
} else {
oAjax.open("POST", url, true);
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
oAjax.send(param);
}
//4.接收返回
//OnRedayStateChange事件
oAjax.onreadystatechange = function () {
if (oAjax.readyState === 4) {
if (oAjax.status === 200) {
//请求成功。形参为获取到的字符串形式的响应数据
options.onsuccess(oAjax.responseText, oAjax);
} else {
//先判断是否存在请求失败函数
//存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
if (options.onfail) {
options.onfail(oAjax);
}
}
}
};
return oAjax;//发送请求的XMLHttpRequest对象
}最終的な完成はケースです。もちろん、ここまで完璧から、などの
try catch使用が、このようなAパッケージにより、または多くを学びます。