***
4301 ワード
最近ajaxとjsonの技術を温めて、また多くの収穫を発見して、ここで記録して、私はプログラミングの8ヶ月の白に接触して、もし間違いがあれば、また指摘して、後で直接乾物に行きます.
まず、なぜajaxとajaxの優位性を学ぶのですか?
私自身の理解では、ajaxはフロントエンドからバックエンドにデータを転送するのに便利です.Javaでは、主に2種類あります.1つ目はhtmlのformフォームを介してsubmitを介してバックエンドに直接転送することですが、このコミットにはサーバ側(servlet側)がデータを返すと1つのページ(requet.getRequest.Dispatcher(url)を再ジャンプするしかないというデメリットがあります.forward(request,response)またはresponse.sendRedirect(url))にリダイレクトして処理するのは不便です.ユーザーがログインして検証するなどについては、ユーザーが正しいかどうかを判断するためにページを再ジャンプするのではないでしょうか.ここのユーザー体験はよくありませんが、ajaxは非同期リクエストを実現し、この問題を完璧に解決しました.
フロントエンドデータがバックエンドに転送される共通の特徴:
フロントエンドデータがバックエンドに伝送されるのは、要求方式、要求アドレス、伝送パラメータ(データ)、受信サーバから返されたデータを処理する3つにほかならない.formフォームのmethod,action,そしてinputのname属性はこれらのものを伝えるものであり,ajaxではより便利である.
eg:
$.ajax({
type:「post」//リクエスト方式
url:“control.jsp”,//要求アドレス
data:json,//転送パラメータ,jsonフォーマットのデータ
success:function(data){//サーバから返されるデータ
}
});
これがjqueryのajaxリクエストのフォーマットです.jsのajaxリクエストについては後述しますが、jqueryはjsのajaxリクエストをカプセル化しただけで、主にブラウザの互換性の問題を解決しています.
jsのajaxリクエスト:
直接的に最も簡単なフォーマットで、カプセル化しません
var xhr=new XMLfttpRequest()//XMLfttpRequestオブジェクトを定義します.ここで、ajaxとform伝送パラメータはhttpプロトコルを満たす必要があります.ajaxが要求するのはXML httpRequestです.XMLのデータを伝送しますが、XMLとjsonは互いに変換できます.
xhr.open(「要求方式」,url,true);//urlにはアドレスとパラメータが含まれており、具体的なパラメータの書き方はusername=「zz」?password=「12345」でなければならず、中間は?で区切られ、trueはfalseが同期要求である場合は非同期要求を表す.
xhr.onchangereadystate = function(){
};//返されたデータを処理します.ここには返されたステータスコードなどxhr.readyState==4が含まれています.要求が完璧に通過したことを示しています.また、1,2,3などがあります.例えば、サーバーが見つからないなどのエラー、サーバーが閉じているなどのエラーがあります.
xhr.send();この文が必要で、リクエストが開始されたことを示し、もちろん互換性を満たすなどの問題があり、AxtivexObjectオブジェクト(ie 8以下、ie 8以上はXMLHttpRequestリクエスト)を使用する必要があります.
jsのリクエストがどれほど面倒なのかはわかりにくいので、やはりjqueryのajaxリクエストを使うのが便利なことをお勧めします.ここで言うリクエスト方式とは、データ転送の安全、サイズなどの問題を解決することにほかならません.例えば、getリクエストはurlバーで直接見ることができますが、postはできません.また、getリクエスト転送のデータが小さすぎて、postは大きなものを転送することができます.getは一般的にストレートに使われていますページジャンプなどに接続し、postはパラメータを転送する必要がある場合に使用され、比較的安全です.
jsonデータの解析?
jsonは何ですか?実は1種のデータ伝送で、javaの中のmapは1種のキー値の対で、jsの中でもよく使って、jsonのフォーマットは
var json={key:value,key 1:value 1,key 2:value 2}はこのようなフォーマットであり、jsの仕様要件ではkeyは二重引用符または単一引用符を使用する必要はありません.
まず、なぜajaxとajaxの優位性を学ぶのですか?
私自身の理解では、ajaxはフロントエンドからバックエンドにデータを転送するのに便利です.Javaでは、主に2種類あります.1つ目はhtmlのformフォームを介してsubmitを介してバックエンドに直接転送することですが、このコミットにはサーバ側(servlet側)がデータを返すと1つのページ(requet.getRequest.Dispatcher(url)を再ジャンプするしかないというデメリットがあります.forward(request,response)またはresponse.sendRedirect(url))にリダイレクトして処理するのは不便です.ユーザーがログインして検証するなどについては、ユーザーが正しいかどうかを判断するためにページを再ジャンプするのではないでしょうか.ここのユーザー体験はよくありませんが、ajaxは非同期リクエストを実現し、この問題を完璧に解決しました.
フロントエンドデータがバックエンドに転送される共通の特徴:
フロントエンドデータがバックエンドに伝送されるのは、要求方式、要求アドレス、伝送パラメータ(データ)、受信サーバから返されたデータを処理する3つにほかならない.formフォームのmethod,action,そしてinputのname属性はこれらのものを伝えるものであり,ajaxではより便利である.
eg:
$.ajax({
type:「post」//リクエスト方式
url:“control.jsp”,//要求アドレス
data:json,//転送パラメータ,jsonフォーマットのデータ
success:function(data){//サーバから返されるデータ
}
});
これがjqueryのajaxリクエストのフォーマットです.jsのajaxリクエストについては後述しますが、jqueryはjsのajaxリクエストをカプセル化しただけで、主にブラウザの互換性の問題を解決しています.
jsのajaxリクエスト:
直接的に最も簡単なフォーマットで、カプセル化しません
var xhr=new XMLfttpRequest()//XMLfttpRequestオブジェクトを定義します.ここで、ajaxとform伝送パラメータはhttpプロトコルを満たす必要があります.ajaxが要求するのはXML httpRequestです.XMLのデータを伝送しますが、XMLとjsonは互いに変換できます.
xhr.open(「要求方式」,url,true);//urlにはアドレスとパラメータが含まれており、具体的なパラメータの書き方はusername=「zz」?password=「12345」でなければならず、中間は?で区切られ、trueはfalseが同期要求である場合は非同期要求を表す.
xhr.onchangereadystate = function(){
};//返されたデータを処理します.ここには返されたステータスコードなどxhr.readyState==4が含まれています.要求が完璧に通過したことを示しています.また、1,2,3などがあります.例えば、サーバーが見つからないなどのエラー、サーバーが閉じているなどのエラーがあります.
xhr.send();この文が必要で、リクエストが開始されたことを示し、もちろん互換性を満たすなどの問題があり、AxtivexObjectオブジェクト(ie 8以下、ie 8以上はXMLHttpRequestリクエスト)を使用する必要があります.
jsのリクエストがどれほど面倒なのかはわかりにくいので、やはりjqueryのajaxリクエストを使うのが便利なことをお勧めします.ここで言うリクエスト方式とは、データ転送の安全、サイズなどの問題を解決することにほかならません.例えば、getリクエストはurlバーで直接見ることができますが、postはできません.また、getリクエスト転送のデータが小さすぎて、postは大きなものを転送することができます.getは一般的にストレートに使われていますページジャンプなどに接続し、postはパラメータを転送する必要がある場合に使用され、比較的安全です.
jsonデータの解析?
jsonは何ですか?実は1種のデータ伝送で、javaの中のmapは1種のキー値の対で、jsの中でもよく使って、jsonのフォーマットは
var json={key:value,key 1:value 1,key 2:value 2}はこのようなフォーマットであり、jsの仕様要件ではkeyは二重引用符または単一引用符を使用する必要はありません.
json:
var data = {username:uname,password:pwd};
java (json)?
java String , ajax ,java String
: json ,ajax String , Json ,
json , eval , ajax
$.ajax({
type:"post",//
url:"data.jsp",//
data:params,// ,
success:function(data){// ( )
var jdata = data.trim();
jdata = eval("("+ jdata +")");
}
});
data.trim() , enter。
json :
json:
var json = {
name:uname,
address:{ , , },
teacher:{student1:" ",student2:" ",student3:" "}
}
json , ajax json ?
var name = json.name// uname
var address = [];
for(var i; i < json.address.length;i++){
address[i] = json.address[i];
}// , address
var student1 = json.teacher.student1;//
var student2 = json.teacher.student2;//
var student3 = json.teacher.student3;//
。
: , , , , 。