Ajaxの迅速な理解(3)
今日Ajaxの最も基本的な流れを学びました.JavaScriptクラスライブラリは一切使用されていません.今、前回の内容を別の方法で実現します.XMLHTTPRequestオブジェクトでAJAXの非同期データインタラクションを行います.不器用だけど実用的.他は変わらないjs.私たちはもう一つのjsを作成してもいいです.
コード注釈が詳しいので、くどくどしません.
//
// XMLHTTPRequest AJAX
var xmlhttp;
function verify(){
//1. dom
//document.getElementBuId("userName") dom , HTML , <input>
//.value value
var userName = document.getElementById("userName").value;
//2. XMLHttpRequest
// XMLHttpRequest
// IE
if(window.XMLHttpRequest){
// FireFox,Mozillar,opera,safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
// mozillar bug
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml")
}
}else if(window.ActiveXObject){
// IE5,IE5.5,IE6(IE7,IE8)
// XMLHTTPRequest , js
//
var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
// ,
// , , ,
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
// XMLHttpRequest
// if(!xmlhttp){
// alert("XMLHttpRequest !");
// return;
// }else{
// //alert(xmlhttp);
// alert(xmlhttp.readyState);
// }
//2
//
// , , ,
xmlhttp.onreadystatechange = callback;
//3
// http 。 http 。 get post
// url ,get url
// ,true
//GET
//xmlhttp.open("GET","AJAXServer?name="+userName,true);
//POST
xmlhttp.open("POST","AJAXServer",true);
//POST http
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST
xmlhttp.send("name="+userName);
//4 ,
// ,send
// ,send
//GET
//xmlhttp.send(null);
}
//
function callback(){
// alert(xmlhttp.readyState);
//5
//
if(xmlhttp.readyState==4){
// http 、
if(xmlhttp.status==200){
//
//
var responseText = xmlhttp.responseText;
//
// dom div
var divNode = document.getElementById("result");
// html
divNode.innerHTML=responseText;
}else
{
alert(" ");
}
}
}
コード注釈が詳しいので、くどくどしません.