ajax_javascript スキルの説明、使用法、get と post の違い

私はこれまで ajax をあまり注意深く勉強したことがなく、問題を見つけて解決策を見つけたときに使用しました。

1. Ajax Get と Post の違いについて説明します
Get メソッド:
get メソッドを使用して単純なデータを送信しますが、サイズは通常 1KB に制限されます。が URL に追加されます。送信 (HTTP ヘッダー送信)。つまり、ブラウザーは、各フォーム フィールド要素とそのデータを、URL パラメーターの形式でリクエスト ラインのリソース パスの末尾に追加します。最も重要なことは、クライアントのブラウザによってキャッシュされるため、他の人がブラウザの履歴からアカウント番号やパスワードなどの顧客データを読み取ることができるということです。したがって、場合によっては、get メソッドが重大なセキュリティ問題を引き起こす可能性があります。
Post メソッド:
POST メソッドを使用すると、ブラウザは各フォーム フィールド要素とそのデータを、HTTP メッセージのパラメータとしてではなく、HTTP メッセージのエンティティ コンテンツとして Web サーバーに送信します。 URL アドレスの送信。POST メソッドを使用した場合、送信されるデータ量は GET メソッドを使用した場合よりもはるかに大きくなります。
つまり、GET メソッドは送信するデータ量が少なく、処理効率が高く、セキュリティが低く、キャッシュされますが、POST ではその逆が当てはまります。

get メソッドを使用する場合は、次の点に注意してください。 :
1 get リクエスト (または URL に渡されたパラメータを含むもの) の場合、渡されたパラメータは最初に encodeURIComponent メソッドによって処理される必要があります。例: var url = "update.php?username=" encodeURIComponent(username) "&content=" encodeURIComponent
(content) "&id=1" ;
Post メソッドを使用する場合は注意してください :
1. ヘッダーの Context-Type を application/x-www-form-urlencode に設定して、サーバーがエンティティにパラメーター変数があることを認識できるようにします。通常は SetRequestHeader("Context-Type", "application) XmlHttpRequest オブジェクトの /x-www-form-urlencoded" が使用されます ;")。例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2. パラメーターは、名前と値が 1 対 1 で対応するキーと値のペアです。たとえば、var name=abc&sex=man&age=18 と var name=?abc&sex=man&age=18 を使用します。 =18 はどちらも誤りです。
3. パラメーターは Send (パラメーター) メソッドで送信されます。例: xmlHttp.send(name); 4. サーバー側のリクエスト パラメーターは、Get と Post を区別します。 get メソッドの場合は $username = $_GET["username"]; post メソッドの場合は $username = $_POST["username"]; Post メソッドと Get メソッドは次のとおりです。
:
1. Post がデータを送信する場合、URL にデータを表示する必要はありませんが、Get メソッドは URL に表示する必要があります。
2.Post は 2M に達する大量のデータを送信しますが、Get メソッドは URL の長さの制限により約 1024 バイトしか転送できません。
3.Post は、名前が示すように、送信することを目的としています。 Get がサーバー セグメントにデータを送信できる理由は、http リクエストの内容としてどのような種類のデータが必要であるかをサーバーに伝えるためだけです。 Get は送信される Http ヘッダーに含まれます。 get メソッドは、Request.QueryString["strName"] を使用して受信します。post メソッドは、Request.Form["strName"] を使用して受信します。
注:
2 つの送信メソッドは統合できますが、 , Request("strName ") を使用して送信されたデータを取得しますが、これはプログラムの効率に影響するため、お勧めできません。
一般に、フォームの送信に Get メソッドの使用は避けてください。セキュリティ上の問題が発生する可能性があります。


AJAX コードの文字化けの問題

コードの文字化けの原因:
1. xtmlhttp が返すデータのデフォルトの文字エンコーディングは utf-8 です。クライアントページが gb2312 などのエンコードされたデータの場合、文字化けが発生します
2. 投稿で送信されたデータのデフォルトの文字エンコーディングメソッドは utf-8 です。サーバーが gb2312 である場合、または他のエンコードされたデータでは文字化けが発生します。解決策は次のとおりです。: 1。クライアントが gb2312 エンコードの場合、出力を指定します。サーバー上のストリームエンコーディング
2. サーバー側はクライアントとクライアントの両方で utf-8 エンコーディングを使用します
gb2312:header('Content-Type:text/html;charset=GB2312'); header('Content-Type:text/html;charset=utf -8');
注: 上記のメソッドを実行しても文字化けが返される場合は、メソッドが get リクエスト (またはその他) であるかどうかを確認してください。パラメータを渡すURLを含む)、渡されたパラメータは最初にencodeURIComponentメソッドで処理される必要があります。encodeURIComponentで処理されないと文字化けも発生します。
以下は私が見つけた例です。私が書いたものは比較的簡単で、あまり標準的ではないので、他の人が書いたものを参照する方が良いです（笑）。


コードをコピー


コードは次のとおりです:

var http_request = false;
function makePOSTRequest(url, パラメータ) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla、Safari、...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// 予想されるコンテンツ タイプに応じてタイプを設定します
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('XMLHTTP インスタンスを作成できません');
false を返します。
}
http_request.onreadystatechange =alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("コンテンツの長さ", パラメーター.長さ);
http_request.setRequestHeader("接続", "閉じる");
http_request.send(パラメータ);
}
関数alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
結果 = http_request.responseText;
document.getElementById('myspan').innerHTML = 結果;
} else {
alert('リクエストに問題がありました。');
}
}
}
function get(obj) {
var poststr = "mytextarea1=" encodeURI( document.getElementById("mytextarea1").value )
"&mytextarea2= " encodeURI( document.getElementById("mytextarea2").value );
makePOSTRequest('post.php', poststr);
}

post.php
一超大文本框textarea里面有量の数据，ajax通过URL请求サービス返结果，URLここにはさまざまなパラメータが含まれていますが、当然、以前の超大規模なテキスト ボックスのコンテンツも含まれています。 以前にリリースされた Firefox では、テキストエリアにある 4000 の長さの文字列が URL 要求でまったく問題ありませんでした。回答しました。IE の下で、テキストエリアの文字の長さが 2000 (大まかなデータ) を超えているときに、JS 認証が行われ、ajax がフロント 台に戻り値を返しませんでした。元のコードを参照してください。 >
复制代

代码如下: function getJsonData(url) {

var ajax = Common.createXMLHttpRequest();

ajax.open("GET",url,false);
ajax.send(null);
試してください
{
eval("var s = " ajax.responseText);
s を返します。
}
catch(e)
{
null を返す;
}
}
関数 getData(){
var url="BlacklistService.do?datas=" datasvalue;
var result = getJsonData(url);
}


ネット上での Google 公開解決法: 変更された使用する XMLHttp の要求は POST になり、パラメーターと URL が分離されます。 >

复制代码

代码如下:

function getJsonData(url,para) { var ajax = Common.createXMLHttpRequest (); ajax.open("POST",url,false); ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

ajax.send(para);

試してください
{
eval("var s = " ajax.responseText);
s を返します。
}
catch(e)
{
null を返す;
}
}
function getData(){
var url="BlacklistService.do";
var para="datas=" データ値;
var result = getJsonData(url,para);
}


================================
get リクエスト メソッドと post リクエスト メソッドの類似点と相違点Ajax 2008 年 10 月 4 日土曜日 02:37 pm Ajax では、get リクエストと post リクエストをよく使用します。では、答える前に、まず get と post の違いを理解します。
1. Get は、送信されたフォームの ACTION 属性が指す URL にパラメーター データ キューを追加します。値はフォームの各フィールドに 1 対 1 で対応します。 URLで見れます。 Post は、HTTP post メカニズムを使用して、フォーム内の各フィールドとそのコンテンツを HTML HEADER に配置し、それを ACTION 属性が指す URL アドレスに送信します。ユーザーはこのプロセスを見ることができません。
2. get メソッドの場合、サーバー側は Request.QueryString を使用して変数の値を取得します。 post メソッドの場合、サーバー側は Request.Form を使用して送信されたデータを取得します。どちらの方法でもパラメータはリクエストを使用して取得できます。
3. get によって送信されるデータの量は少なく、2KB を超えることはできません。郵便で送信されるデータの量は比較的多く、通常はデフォルトでは制限がありません。ただし、理論上はサーバーごとに異なります。
4. get のセキュリティは非常に低いですが、post のセキュリティは高くなります。
5.

は

と同じです。つまり、メソッドが get の場合、アクション ページの末尾にあるパラメーター リストは無視され、

は異なります。さらに、Get リクエストには次の特徴があります。通常は疑問符を使用して、URL にデータを追加してサーバーに渡します。 URL アドレスの末尾とデータ パラメータの先頭を表します。以下のパラメータの各データ パラメータは「名前 = 値」の形式で表示され、コネクタ & で区別されます。 Post リクエストには次のような特徴があります。データは HTTP 本文に配置され、& 接続メソッドやセパレータ メソッドなど複数の方法で編成されます。パラメータを非表示にして大量のデータを転送できます。もっと便利に。以上の説明で、どのような場合に get メソッドを使用するのか、どのような場合に post メソッドを使用するのかが理解できましたね。フォームを送信するとき、より大きなデータ ファイルを送信したい場合は、post メソッドを使用する必要があります。ポストを利用する。渡される値がパラメータ モードのみでよい場合（値が 2KB 以下）、get メソッドを使用します。次に、URL 経由でリクエストを送信する場合の get メソッドと post メソッドの違いを見てみましょう。次の例を使用すると、同じデータを GET と POST で送信する場合の違いが簡単にわかります。送信されるデータは username=Zhang San です:

コードをコピー コードは次のとおりです:

GET /?username=张三HTTP/1.1
受け入れ: image/gif、image/x-xbitmap、image/jpeg、 image/ pjpeg、application/vnd.ms-powerpoint、application/vnd.ms-excel、application/msword、*/*
Accept-Language: zh-cn
Accept-Encoding: gzip、deflate
ユーザーエージェント: Mozilla/4.0 (互換性; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
ホスト: localhost
接続: キープアライブ
POST メソッド:
POST / HTTP /1.1
受け入れる: image/gif、image/x-xbitmap、image/jpeg、image/pjpeg、application/vnd.ms-powerpoint、application/vnd.ms-excel、application/msword、*/*
Accept -Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip、deflate
User-Agent: Mozilla/4.0 (互換性、MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
ホスト: localhost
Content-Length: 28
接続: キープアライブ
username=张三

違いは 1 つで、フォームのパラメーターと値は URL リクエストに添付され、もう 1 つは HTTP リクエストのメッセージ エンティティに含まれます。上の 2 つの段落を比較すると、GET メソッドではフォームのコンテンツが前のリクエスト ヘッダーに配置され、POST メソッドではこれらのコンテンツがリクエストの本文に同時に配置されることがわかります。 application/x-www-form-urlencoded に設定されます。送信されるテキストは同じです。encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(value2) のように構成できます。 &... ..注: encodeURIComponent は、charstring の内容を含む新しい String オブジェクト (Unicode 形式) を返します。すべてのスペース、句読点、アクセント、およびその他の非 ASCII 文字は、%xx エンコーディングに置き換えられます。xx は 16 進数に相当します。キャラクターのシステム番号を表します。 たとえば、スペースは " " として返されます。 255 を超える文字値は %uxxxx 形式で保存されます。 JavaScript の encodeURIComponent() メソッドを参照してください。上記を理解した後、ajax の XMLHttpRequest オブジェクトを使用して、それぞれ GET メソッドと POST メソッドを使用してサーバーにデータを送信します。

GET メソッド

コードをコピー コードは次のとおりです。

var postContent ="name=" encodeURIComponent("xiaocheng") "&email=" encodeURIComponent("xiaochengf_21@yahoo.com.cn");
xmlhttp.open("GET", "somepage"); "?" postContent、true);

POST メソッド

コードをコピーします コードは次のとおりです:

var postContent ="name=" encodeURIComponent("xiaocheng") "&email=" encodeURIComponent("xiaochengf_21@yahoo) .com.cn ");

xmlhttp.open("POST", "somepage", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") ;
//xmlhttp.setRequestHeader("Content-Type", "text/xml") //xml ファイルが送信される場合

Ajax の post メソッドの使用

私は Ajax の学習を始めたばかりですが、多くのオンライン コードがパラメータの送信に Get メソッドを使用していることに気付きました。フィルタは文字化けを処理しますが、Get メソッドのフィルタはそれを監視できません。そのため、私は常に Post メソッドを使用することを好みます。ここでは、Ajax の Get メソッドと Post メソッド GET:


コードをコピー

コードは次のとおりです:

function createXMLHttpRequest(){

try
{
// Firefox、Opera 8.0、Safari
xmlHttpRequest =new XMLHttpRequest();
}
catch (e)
{

// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2. XMLHTTP");
}
catch (e)
{

try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("お使いのブラウザは AJAX をサポートしていません。 ");
return false;
}
}
}

}
// リクエスト送信 function
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("GET",url "?" param,true);
xmlHttpRequest.onreadystatechange = processResponse
}
//戻り情報関数
関数processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText;
window.alert(res);
}else{
window.alert("リクエストページ例外");
}
}
}
//認証関数
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("ユーザー名を空にすることはできません" );
document.loginForm.username.focus();
return false;
var url = "Servlet/userLogin_do"; =" userName "&psw=" psw;
sendRequestPost(url,param);
}
}
// -->



POST
:




コードをコピー


コードは次のとおりです:

It can be found that the GET method parses parameters according to the address bar, and post parses parameters according to the param string in sendRequestPost(url,param);. The important thing is that the POST method needs to be added in open (); You need to add xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); after the method. I don’t know why. I am a beginner. If you add it, you can pass parameters. I will study it in the future. .