アヤックス
1.コース紹介
静的なWebサイトと動的なWebサイトは同期されますが、同期方法には欠点があります。ページリクエストの応答がブロックされ、ユーザーエクスペリエンスに影響します
この問題を解決するために、ページ（非表示のフレーム）の部分的な更新を柔軟な方法で行うことができます。非表示のフレームは不便なので、Ajaxがあります。
2.部分更新のための隠しフレーム
<form action = " ./11inner.php " method = " post " target = " abc " >用户名 ： <input type = " text " name = " username " > 密码： <input type = " password " name = " パスワード" > <input type = " submit " value = " 提交" > </ form> <iframe src = "" width = "200 " height = " 200 " frameborder = " 2 " name = " abc " > </ iframe> Code in PHP <？Php $ uname = $ _POST [ ' username ' ]; $ pw = $ _POST [ ' password ' ] ; if（$ uname == ' 111 ' && $ pw == ' 111 ' ）{ // jsの親は親ページ echoを意味します'<script> parent.document.getElementById（ "dv"）。innerHTML = "Login successful" </ script> ' ; } else { echo ' <script> parent.document.getElementById（ "dv"）。innerHTML = "Usernameまたはパスワードが間違っています "</ script> ' ; } ？>
3.リクエストに対するAjax応答を実装する方法
基本的な手順：XMLHttpRequestオブジェクトの作成->送信パラメーターの構成->送信の実行->プロセス応答
1 、XHRオブジェクト作成 VAR XHR = NULL ; IF （window.XMLHttpRequest）{ 標準ブラウザ XHR = 新しい新規のXMLHttpRequestを（）; } 他{ 非標準ブラウザIE6 / 7 / 8 XHR = 新しい新しい ActiveXObjectの（' Microsoft.XMLHTTP ' ） ; } readyState == 0は、xhrオブジェクトの初期化が完了したことを意味します console.log（xhr.readyState + ' --------- 1 ---------- ' ）; 2. 送信パラメーターvarを設定します type = ' get ' ; var myurl = ' ./data.php ' ; var async = false ; // 3番目のパラメーターのデフォルト値はtrueで、非同期を意味します; falseは同期を意味します xhr.open（type、myurl、async ）; 図3は、送信 VAR PARAM = NULL ; xhr.send（PARAM） のreadyState == 1は、要求が発行されたことを示し 4 、プロセス応答は、次の呼び出しに私たち自身のコールバック関数ではなく、自動的にブラウザによって呼び出される（コールバック関数を指定する） のでブラウザはいつ呼び出されますか？xhr.readyState（0、1、2、3、4）この状態値が変更されたら、 xhr.onreadystatechange = function（）{ if（xhr.status == 200 ）{ if（xhr.readyState == 4 ）{ サーバーの応答データを取得 var result = xhr.responseText; } } } 同期リクエストの場合、コールバック関数を使用する必要はありません。xhr.responseTextconsole.log （xhr.responseText）;を介して直接データを取得できます。
4.応答でステータスを処理します
（xhr.status == 200）
xhr.statusはhttpプロトコルのステータスコードです：200成功、404リソースが見つかりません、500サーバーエラー
5.処理応答のreadyStateは状態値（0、1、2、3、4）です。
readyState == 0は、xhrオブジェクトの初期化が完了したことを示します
readyState == 1は、リクエストが発行されたことを意味します
readyState == 2は、サーバー側のデータが完全に返されたことを示します
readyState == 3は、データが解析されていることを意味します
readyState == 4は、データ分析が完了し、使用できることを意味します
6.注意が必要な事項：
1、xhrオブジェクトの作成には互換性のある処理が必要
2. xhr.openの3つのパラメーターの役割
3.理解するxhr.readyState状態値
4. xhr.responseTextを介してサーバー応答データを取得します
5. getリクエストの場合、xhr.send（）のパラメータはnullに固定されています
6. xhr.statusとxhr.readyStateの役割と違い
7.フォームの送信を防ぐいくつかの方法
1. falseを返す。
2.e.preventDefault（）;
3. <input type = "submit" value = "提交" id = "btn">把「送信」换成「ボタン」
8.フォームを手動で送信します
form.submit（）;
9. Ajax-getの送信
Ajaのget送信データは、URLを介してパラメーターを渡すことであり、パラメーターをエンコードする必要があります
xhr.send（）;メソッドパラメータはnullに固定されています
2.送信機能を構成する
encodeURI関数は、文字化けを防ぐためにgetパラメーターをエンコードします。
var param = encodeURI（ '？username =' + uname + '＆password =' + pw）;
xhr.open（ 'get'、 '。/ data.php' + param）;
3.送信
xhr.send（null）;
10. Ajaxポストの送信
Ajaxの投稿送信メソッドはxhr.send（）を使用します。
関数によって渡されるパラメーターは、URLを介してデータを渡す代わりにデータを送信します
投稿送信メソッドはリクエストヘッダーを設定する必要があります
投稿されたデータはエンコードする必要はありません
2.送信機能を構成する
xhr.open（ 'post'、 '。/ 33data.php'）;
//リクエストヘッダー情報を設定します（投稿ヘッダーにはリクエストヘッダーを設定する必要があります）
xhr.setRequestHeader（ 'Content-Type'、 'application / x-www-form-urlencode'）;
3.送信
var param = 'username =' + uname + '＆password =' + pw;
xhr.send（param）;
11. postとgetの違い
| 取得する | 役職 |
|
2.送信機能を構成する
encodeURI関数は、文字化けを防ぐためにgetパラメーターをエンコードします。
var param = encodeURI（ '？username =' + uname + '＆password =' + pw）;
xhr.open（ 'get'、 '。/ data.php' + param）;
3.送信
xhr.send（null）;
|
2.送信機能を構成する
xhr.open（ 'post'、 '。/ 33data.php'）;
リクエストヘッダー情報を設定します（投稿を送信するにはリクエストヘッダーを設定する必要があります）
xhr.setRequestHeader（ 'Content-Type'、 'application / x-www-form-urlencoded'）;
3.送信
var param = 'username =' + uname + '＆password =' + pw;
xhr.send（param）;
|
|
1. Ajaのget送信データには、URLを通じてパラメーターが渡され、パラメーターをエンコードする必要があります
2. xhr.send（）;メソッドパラメータはnullに固定されています
|
1. Ajaxの投稿送信メソッドはxhr.send（）を使用します。
関数によって渡されるパラメーターは、URLを介してデータを渡す代わりにデータを送信します
2.投稿送信メソッドはリクエストヘッダーを設定する必要があります（xhr.setRequestHeader（ 'Content-Type'、 'application / x-www-form-urlencode'）;）
3.投稿で送信されたデータはエンコードする必要はありません
|
12. URLの標準形式
| http://www.baidu.com/a/ac/b?flag = 123＃abc | scheme：// host：port / path？query＃fragment |
| http ---- scheme | スキーム：通信プロトコルhttp https ftp |
| www.baidu.com ---ホスト | ホスト：ドメイン名またはIPアドレス |
| 非表示のhttpのデフォルトポートは80です---ポート | ポート：ポートブラウザは非表示です |
| a / ac / b ---パス | パス：パス、ポートと疑問符の間の部分 |
| ＃abcの後ろ----フラグメント | フラグメント：アンカーハッシュ（ハッシュ）、役割：ページ上の特定の位置を見つける |
13.encodeURICompontent（）和encodeURI（）
encodeURIComponent（）メソッドは、URL内の特殊文字をエンコードできます
encodeURI（）メソッドは特殊文字を変換しません
|
var url = 'http://www.sina.com';
var str = 'http://www.baidu.com?username=张三＆flag =' + encodeURIComponent（ '：// ??：'）;
console.log（encodeURI（str））;
console.log（encodeURIComponent（str））;
|
14.サーバーから返されたXMLデータを解析しますvar result = xhr.responseXML;
15.サーバーから返されたjsonデータを解析しますvar result = xhr.responseText;
14＆15
|
サーバーから返されたxmlデータを解析します
var result = xhr.responseXML;
|
サーバーから返されたJSONデータを解析します
var result = xhr.responseText;
|
|
xmlデータ形式の欠点：
1.メタデータ（データを説明するデータ）：メタデータはより多くのスペースを必要とし、ネットワーク伝送に役立ちません
2.解析が不便
|
jsonデータ形式
1.データはキーと値のペアで構成されます
2.キーと値は二重引用符で囲む必要があります
3.値のタイプは次のいずれかです。数値文字列配列オブジェクト
|
|
json_encode（）;メソッドの役割：配列をjson文字列に変換する
$ str = json_encode（$ arr）;
JSON.parse（）;関数：文字列をオブジェクトに変換します
var str = '{"username":"lisi","age":"12"}';
var obj = JSON.parse(str);
var obj = eval('('+str+')');//也可以实现
eval方法的作用就是把符合js语法 的字符串转成代码并执行
eval('console.log(111)');//输出111
|
|
|
if(xhr.status == 200 && xhr.readyState == 4){
xml数据格式
var ret = xhr.responseXML;
var books = ret.getElementsByTagName('book');
var tag = '';
for (var i = 0; i < books.length; i++) {
var book = books[i];
var name = book.getElementsByTagName('name')[0].innerHTML;
var author = book.getElementsByTagName('author')[0].innerHTML;
var price = book.getElementsByTagName('price')[0].innerHTML;
var desc = book.getElementsByTagName('desc')[0].innerHTML;
tag += '<ul><li>'+name+'</li><li>'+author+'</li><li>'+price+'</li><li>'+desc+'</li></ul>';
}
var container = document.getElementById('container');
container.innerHTML = tag;
}
|
if(xhr.status == 200 && xhr.readyState == 4){
// 原生Ajax从服务器获取的原始数据是字符串（有可能是json格式的字符串）
var result = xhr.responseText;
// JSON.parse()的作用就是把json形式的字符串转化成对象
result = JSON.parse(result);
console.log(result);
var tag = '';
for (var i = 0; i < result.length; i++) {
var book = result[i];
tag += '<ul><li>'+book.name+'</li><li>'+book.author+'</li><li>'+book.price+'</li><li>'+book.desc+'</li></ul>'
}
var container = document.getElementById('container');
container.innerHTML = tag;
}
|
|
<?php
header('Content-Type:application/xml; charset=utf-8');
?>
<?xml version='1.0' encoding='utf-8' ?>
<booklist>
<book>
<name>三国演义</name>
<author>罗贯中</author>
<price>20</price>
<desc>一个杀伐纷争的年代</desc>
</book>
</booklist>
|
<?php
$arr = array(
array('name'=>'三国演义','author'=>'罗贯中','price'=>'20','desc'=>'一个杀伐纷争的年代'),
);
json_encode()方法的作用：把数组转化成json字符串
$str = json_encode($arr);
echo $str;
print_r($arr);//也可以实现
?>
|