原生とjQueryのajaxの使い方は詳しく説明します。
Ajax概要
Ajaxは(Aynchronous(非同期)JavaScript And Xmlの略語)と考えられています。現在のページを更新する必要なくブラウザとサーバとの通信を許可する技術をAjaxといいます。
同期とは、送信者がデータを送信した後、受信者が反応したら次のパケットを送信する通信方式です。
非同期とは、送信者がデータを送信した後、受信者の応答を待たずに次のパケットを送信する通信方式をいう。
AJAXの欠陥
AJAXはJavaScriptとAJAXエンジンを大量に使っていますが、これはブラウザのサポート次第です。IE 5.0以上、Mozilla 1.0、NetScape 7および以上のバージョンはサポートされていますが、MozilaもAJAXをサポートしていますが、XMLHttpRequestを提供する方式は違います。ですから、AJAXを使うプログラムは各ブラウザに対する互換性をテストしなければなりません。
AJAXはページの内容を更新する時はページ全体を更新していませんので、ページの後退機能は無効です。現在のデータが古いのか、それともすでに更新されたのか、よく分からないユーザーもいます。これは明らかな位置でユーザーに「データが更新された」と警告する必要があります。
対流メディアのサポートはFLASHほど良くない。
いくつかのハンドヘルド(携帯電話、PDAなど)はまだAjaxをサポートしていません。
formデータの順序:
Ajaxは(Aynchronous(非同期)JavaScript And Xmlの略語)と考えられています。現在のページを更新する必要なくブラウザとサーバとの通信を許可する技術をAjaxといいます。
同期とは、送信者がデータを送信した後、受信者が反応したら次のパケットを送信する通信方式です。
非同期とは、送信者がデータを送信した後、受信者の応答を待たずに次のパケットを送信する通信方式をいう。
AJAXの欠陥
AJAXはJavaScriptとAJAXエンジンを大量に使っていますが、これはブラウザのサポート次第です。IE 5.0以上、Mozilla 1.0、NetScape 7および以上のバージョンはサポートされていますが、MozilaもAJAXをサポートしていますが、XMLHttpRequestを提供する方式は違います。ですから、AJAXを使うプログラムは各ブラウザに対する互換性をテストしなければなりません。
AJAXはページの内容を更新する時はページ全体を更新していませんので、ページの後退機能は無効です。現在のデータが古いのか、それともすでに更新されたのか、よく分からないユーザーもいます。これは明らかな位置でユーザーに「データが更新された」と警告する必要があります。
対流メディアのサポートはFLASHほど良くない。
いくつかのハンドヘルド(携帯電話、PDAなど)はまだAjaxをサポートしていません。
formデータの順序:
$('#submit').click(function(){
$('#form').serialize(); // input name, ;eg:name=yang
$('#form').serializeArray(); // input name, ;eg:[object]
// : name
// jQuery
JSON.parse() //json json
JSON.stringify() //json json
});
jQueryのajax方法:
$.ajax({
url:'/comm/test1.php',
type:'POST', //GET
async:true, // false,
data:{
name:'yang',age:25
},
timeout:5000, //
dataType:'json', // :json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log(xhr)
console.log(' ')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log(' ')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log(' ')
}
})
オリジナルのajaxメソッド:
$('#send').click(function(){
// 5 , readyState
//0: ,send ;
//1: ,send ;
//2: ,send ;
//3: ;
//4: ;
var data = 'name=yang';
var xhr = new XMLHttpRequest(); // ajax
xhr.onreadystatechange = function(event){ // ajax
if(xhr.readyState == 4){ //4
if(xhr.status == 200){ //200
console.log(xhr)
}
}
};
xhr.open('POST','url',true); // , : , : , : ,true
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //
xhr.send(data); //
});