ajax json
11344 ワード
AJAX
AJAXは、Webページ全体を再ロードすることなく、一部のWebページを更新できる技術です.AJAXはクライアントデータとサービス側データの輸送を担当する.AJAX:Asynchronous JavaScript and XML(非同期JavaScriptとXML)すべての操作htdocs Ajaxの核心はJavaScriptオブジェクトXmlHttpRequestであり、このオブジェクトはサーバへのリクエストの送信とサーバ応答の解析にスムーズなインタフェースを提供します.XmlHttpRequestは、JavaScriptを使用して、ユーザをブロックすることなく、サーバに要求して応答を処理することができます.
家具の形態:イージー(組み立てられた)->運送(パネル分割)->ホーム(組み立てられた)データ転送:サーバ(データ構造、配列、オブジェクト)->実行(特殊構造文字列)->クライアントブラウザ(データ構造、配列、オブジェクト)
市場で使用されている文字列データの最大フォーマット:xml特徴:种类豊富なデータを保存できる(自分でラベルを设置する)欠点:解析するのは难しい:大型のニュースサイト网易ニューステンセントニュース新浪微博凤凰中国语. json(90%はjsonを使用)の特徴:小さく、いくつかの小型のアプリケーションに適用され、解析が比較的簡単である:モバイル端末プロジェクト JAvascriptでの同期と非同期:同期:ブロックされ、前のプログラムが終了してから、後続のプログラムを行う必要があります.例:お湯を汲む人が多く、蛇口が一つしかないので、並ばなければなりません.前の人が水を受け取ってから、水を受け取る動作をしなければなりません. 非同期:非ブロックで、前のプログラムが実行されたかどうかは、あなたのプログラムの実行に影響しません.例:多くの人がお湯を沸かして、蛇口の数は無限です.他の人が水を受け取るのは私たちにとって何の影響もありません.
ajaxインスタンス
Open()1番目のパラメータ:要求方式get/post 2番目のパラメータ:データをダウンロードするアドレス3番目のパラメータ:非同期かどうか、trueの場合、ajax非同期を非同期で実行することを表します:非ブロック、前のコードの実行は後のコードの実行同期に影響しません:ブロック、前のコードの実行は後のコードの実行に影響します
onreadystatechangeイベントはreadystateプロパティが変更されたときにトリガーされます
Ajaxのメリットとデメリット
メリット:最大のポイントはページの更新がなく、ユーザーの体験が非常に良いことです. 非同期方式でサーバと通信し、より迅速な応答能力を有する. 以前のサーバ負担の仕事をクライアントに転嫁し、クライアントのアイドル能力を利用して処理し、サーバと帯域幅の負担を軽減し、空間とブロードバンドのレンタルコストを節約することができる.さらにサーバの負担を軽減し、ajaxの原則は「必要に応じてデータを取得する」ことであり、冗長要求を最大限に削減し、サーバに対する負担に応答することができる. 標準化され、広くサポートされている技術に基づいて、プラグインやウィジェットをダウンロードする必要はありません.
欠点:ajaxはブラウザbackボタンをサポートしていません.AJAXでインタラクションを行う場合は、js+xmlhttpで他のページ情報を取得し、閲覧ユーザにとっては隠れたUEであり、ブラウザアドレスバーのURLの変化を感じず、ブラウザにとってはアドレスバーのURLが変化せず、HISTORYが発生しない.この問題は解決できると言われていますが、それによる開発コストは非常に高く、ajaxフレームワークが要求する迅速な開発とは乖離しています.これはajaxがもたらした非常に深刻な問題です. セキュリティ上の問題AJAXは、サーバとのインタラクションの詳細を明らかにしました. 検索エンジンへのサポートは弱い. プログラムの異常メカニズムを破壊した. デバッグは容易ではありません. 携帯電話、PDAなどのハンドヘルドデバイスはajaxをサポートできません.
フォーム:データのコミット
Action:データコミットのアドレス、デフォルトは現在のページmethod:データコミット方式、get/post、デフォルトはget方式 get http://localhost/code/1.get.php?username=Tom&password=123456&age=18特徴:データ名とデータ値を=リンクし、複数ある場合は複数のデータを組み合わせて&リンクし、urlにデータを置く?その後、指定されたページに転送する欠点:1、安全でない2、転送データが限られている2 kb post構成パラメータenctype:コミットされたデータのフォーマット、デフォルトアプリケーション/x-www-form-urlencodedの特徴:ブラウザ内部でコミットする利点:1、安全2、理論上、転送可能なデータは無限である.postメソッド、send(パラメータとして渡す)にデータを置くpostキャッシュ問題なしpost符号化不要
ajax_GET
ajax_post
パッケージajaxはajaxに書く.js中
パッケージajax.js呼び出し
JSONオブジェクト
2つのインスタンスajaxはjson 1を取得し、ajaxを介してデータ2をダウンロードし、ダウンロードしたデータは一般的にjson形式の文字列3、解析
AjaxでJsonを解析する2つの方法の詳細
eval(); JSONはお勧めしません.parse(); 推奨
二つの方法の違い
まずjson形式のオブジェクトを初期化します.
では、問題は2つの方法でどのような違いがあるのでしょうか.コードを少し変更します
小結:「eval();」メソッド解析時に文字列が合法かどうかを判断することはなく、jsonオブジェクトのjsメソッドも実行されるので、非常に危険です.「JSON.parse();」方法の良さはもちろん、おすすめです.
注意:「eval();」と「JSON.parser();」この2つのメソッドのパラメータは文字列のみを受け入れます.つまり、文字列のみを解析できます!!フロントエンドがバックグラウンドに提供するのは文字列データフォーマットのみで、バックグラウンドがフロントに返すのはどのデータフォーマットが返されているかを見て、文字列であれば解析してから使用しなければなりません.
bejson.comはダウンロードしたjson形式の文字列を対応するデータ構造に解析する
AJAXは、Webページ全体を再ロードすることなく、一部のWebページを更新できる技術です.AJAXはクライアントデータとサービス側データの輸送を担当する.AJAX:Asynchronous JavaScript and XML(非同期JavaScriptとXML)すべての操作htdocs Ajaxの核心はJavaScriptオブジェクトXmlHttpRequestであり、このオブジェクトはサーバへのリクエストの送信とサーバ応答の解析にスムーズなインタフェースを提供します.XmlHttpRequestは、JavaScriptを使用して、ユーザをブロックすることなく、サーバに要求して応答を処理することができます.
家具の形態:イージー(組み立てられた)->運送(パネル分割)->ホーム(組み立てられた)データ転送:サーバ(データ構造、配列、オブジェクト)->実行(特殊構造文字列)->クライアントブラウザ(データ構造、配列、オブジェクト)
市場で使用されている文字列データの最大フォーマット:
ajaxインスタンス
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
var xmlhttp; // ajax
// ，ie6 ie6 ， new ActiveXObject('Microsoft.XMLHTTP');
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //
xmlhttp.send(); //
/*
try catch ajax
var xmlhttp = null;
try{
xmlhttp = new XMLHttpRequest();
}catch(error){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
console.log(error);
}
*/
}
Open()1番目のパラメータ:要求方式get/post 2番目のパラメータ:データをダウンロードするアドレス3番目のパラメータ:非同期かどうか、trueの場合、ajax非同期を非同期で実行することを表します:非ブロック、前のコードの実行は後のコードの実行同期に影響しません:ブロック、前のコードの実行は後のコードの実行に影響します
onreadystatechangeイベントはreadystateプロパティが変更されたときにトリガーされます
readyState :ajax
0 （ ） open
1 （ ） send ，
2 （ ）send ，
3 （ ）
4 （ ） ， 。
status: ，HTTP
200 :
404 : 、 URl
responseText: ajax
responseXML: XML */
Ajaxのメリットとデメリット
メリット:
欠点:
フォーム:データのコミット
Action:データコミットのアドレス、デフォルトは現在のページmethod:データコミット方式、get/post、デフォルトはget方式
ajax_GET
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//1、 ajax
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
console.log(error);
}
//2.open
// url ， encodeURI
// ， url
xhr.open('get', '1.get.php?username=' + encodeURI(' ') +'&password=123456&age=18&' + new Date().getTime(), true);
//3、send
xhr.send();
//4、
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}else{
alert(' ，Err:' + xhr.status);
}
}
}
ajax_post
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//1、 ajax
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
console.log(error);
}
//2.open
xhr.open('post', '1.post.php', true);
// post open ，send
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //
//3、send
//post ， send
xhr.send('username= &password=123456&age=18');
//4、
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}else{
alert(' ，Err:' + xhr.status);
}
}
}
パッケージajaxはajaxに書く.js中
function ajax(method, url, data, successFunc, errorFunc{
//1. ajax
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
console.log(error);
}
//2.open
if(method == 'get' && data){
url += "?" + data;
}
xhr.open(method, url, true);
//3.send
if(method == 'get'){
xhr.send();
}else{
// post open ，send
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //
xhr.send(data);
}
//4.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
if(successFunc){
successFunc(xhr.responseText)
}
}else{
if(errorFunc){
errorFunc(' ，Err:' + xhr.status)
}
}
}
}
パッケージajax.js呼び出し
var getBtn = document.getElementById('getBtn');
var postBtn = document.getElementById('postBtn');
getBtn.onclick = function(){
ajax('get', '1.get.php', 'username=Tom&password=123456&age=18', function(data){
alert('get' + data);
}, function(error){
alert(error);
});
}
postBtn.onclick = function(){
ajax('post', '1.post.php', 'username=Tom&password=123456&age=18', function(data){
alert('post' + data);
}, function(error){
alert(error);
});
}
JSONオブジェクト
//
//JSON.parse() json ->
//JSON.stringify() -> json
//( ， ， [] ， {} ）
//alert(JSON); //object JSON
// ->
var arr = [10, 20, 'hello', true];
var str = JSON.stringify(arr);
alert(str); //[10,20,"hello",true]
// ->
var str = '[10,20,"hello",true]';
var arr = JSON.parse(str);
//alert(arr);
//alert(arr[2]);
// ->
var xiaoming = {
name: ' ',
age: 18,
sex: ' '
}
//alert(xiaoming); //object Object
var str = JSON.stringify(xiaoming);
//alert(str); //{"name":" ","age":18,"sex":" "}
// ->
var str = '{"name":" ","age":18,"sex":" "}';
var obj = JSON.parse(str);
//alert(obj.name);
//eval()
//JSON.parse() JSON.stringify() ECMA5
//eval() JSON json ， ，
var str = '[{"name":"hello","age":18}]';
var obj = eval(str);
alert(obj[0].name);
2つのインスタンスajaxはjson 1を取得し、ajaxを介してデータ2をダウンロードし、ダウンロードしたデータは一般的にjson形式の文字列3、解析
// 1：getList_ajax
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
ajax('get', 'getList.php', null, function(data){
var obj = JSON.parse(data);
alert(obj.username);
}, function(error){
alert(error);
})
}
// 2：getNews_ajax
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
ajax('get', 'getNews.php', null, function(data){
var arr = JSON.parse(data);
for(var i = 0; i < arr.length; i++){
// ，
var oLi = document.createElement('li');
var oA = document.createElement('a');
oA.href = '#';
oA.innerHTML = arr[i].title;
var oSpan = document.createElement('span');
oSpan.innerHTML = '【' + arr[i].date + '】';
oLi.appendChild(oA);
oLi.appendChild(oSpan);
oUl.appendChild(oLi);
}
}, function(error){
alert(error);
})
}
AjaxでJsonを解析する2つの方法の詳細
eval(); JSONはお勧めしません.parse(); 推奨
二つの方法の違い
まずjson形式のオブジェクトを初期化します.
var jsonDate = '{ "name":" ","age":23 }'
var jsonObj = eval( '(' + jsonDate + ')' ); // eval();
var jsonObj = JSON.parse( jsonDate ); // JSON.parse();
：
console.log( jsonObj.name ); //
では、問題は2つの方法でどのような違いがあるのでしょうか.コードを少し変更します
var jsonDate = '{ "name":alert("hello"),"age":23 }'
var jsonObj = eval( '(' + jsonDate + ')' ); // eval();
console.log( jsonObj.age ); // “alert” “hello” 23
var jsonObj = JSON.parse( jsonDate ); // JSON.parse();
cosole.log( jsonobj.age ) //
小結:「eval();」メソッド解析時に文字列が合法かどうかを判断することはなく、jsonオブジェクトのjsメソッドも実行されるので、非常に危険です.「JSON.parse();」方法の良さはもちろん、おすすめです.
注意:「eval();」と「JSON.parser();」この2つのメソッドのパラメータは文字列のみを受け入れます.つまり、文字列のみを解析できます!!フロントエンドがバックグラウンドに提供するのは文字列データフォーマットのみで、バックグラウンドがフロントに返すのはどのデータフォーマットが返されているかを見て、文字列であれば解析してから使用しなければなりません.
bejson.comはダウンロードしたjson形式の文字列を対応するデータ構造に解析する