jsのAJAX復習
11293 ワード
非同期インタラクションと同期インタラクション
Ajaxとは?
Ajaxの動作原理.
Ajaxに含まれる技術:
Ajaxの欠陥:
AjaxのコアXMLHttpRequestオブジェクト:
XMLHttpRequestオブジェクトメソッド:
XMLHttpRequestオブジェクトのプロパティ:
要求を送信するプロパティとメソッド(重要)は、次の3つのキーを使用します.
受け入れる--メソッドとプロパティの説明:
Ajaxの具体的な使用:
Ajax ， 。
： ， ， 。
： ， 。
：
： ， ， 。
： ， ， 。
Ajaxとは?
Ajax (Asynchronous JavaScript and Xml) 。
， Ajax。
Ajaxの動作原理.
Ajax JavaScript XmlHttpRequest。 Internet Explorer5 ， 。 ，XmlHttpRequest JavaScript ， 。
Ajax 。Ajax ， - - - 。
Ajax 。Ajax JavaScript ， 。 。
Ajax ， 。 ， JavaScript Ajax HTTP ， ， ， Ajax 。
Ajax， Jsp， ， 。
Ajaxに含まれる技術:
Ajax ， ， JavaScript，XHtml CSS，Dom，Xml XmlHttpRequest 。
： 。Ajax 。
Xml( ) 。AJAX ，XML 。
XHTML（eXtended Hypertext Markup Language, ） CSS（Cascading Style Sheet, ） 。
DOM（Document Object Model, ） 。
XMLHTTP XMLHttpRequest 。
JavaScript 。
Ajaxの欠陥:
Ajax ， ：
AJAX Javascript AJAX ， 。IE5.0 、Mozilla1.0、NetScape7 ，Mozilla AJAX， XMLHttpRequest 。 ， AJAX 。
AJAX ， ， ； 。 “ ”。
FLASH、Java Applet 。
AjaxのコアXMLHttpRequestオブジェクト:
XMLHttpRequest XMLHTTP ， ，AJAX ， ， ； 、 。
XMLHttpRequest IE5 ActiveX 。 W3C 。
XMLHttpRequest ( )：
Internet Explorer XMLHttpRequest ActiveX 。
（Firefox、Safari、Opera…） JavaScript 。
XMLHttpRequest ， XMLHttpRequest ， 。
：
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
XMLHttpRequestオブジェクトメソッド:
abort()： 。
getAllResponseHeader()： HTTP key/value 。
getResponseHeader("headerLabel")： 。
open("method","url")： ，method GET，POST。url url url。 3 。
send(content)： 。
setRequestHeader("label","value")： 。 open() 。
XMLHttpRequestオブジェクトのプロパティ:
onreadystatechange： 。
readyState： ：
0=
1=
2=
3=
4=
responseText： 。
responseXML： DOM Xml 。
status： ， 404=“ ”，200=“ ”。
statusText： 。
要求を送信するプロパティとメソッド(重要)は、次の3つのキーを使用します.
openreadystatechange 。
， 。
Ajax ， 。 XMLHttpRequest readyState 。 readyState 。
readyState readystatechange ， 。
open(method, url, asynch) 。
XMLHttpRequest open Ajax 。
method： ， “GET” ”POST” 。 ， ， GET( GET URL ， 2000 )。 ， POST。
， XMLHttpRequest URL。 ， 。 URL ， URL ， 。
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
url： ， 。 。
asynch： ， true( )。 true， ， 。 false， ， ， Ajax 。
send(data) 。
open Ajax 。send 。
data： 。
GET ， ， send null ：request.send(null);
send() ， open() POST， ， null.
Ajax GET ：
// Ajax
var xmlHttpReq = createXmlHttpRequest();
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
}
xmlHttpReq.open("post","/webLogic/test_test.do",true);
setRequestHeader(header,value)：
， 。 (metadata)。 GET POST。
Ajax ， setRequestHeader 。
header： ; value： 。
POST ， “Content-type” “application/x-www-form-urlencoded”. ， URL 。
open() .
Ajax POST ：
var xmlHttpReq = createXmlHttpRequest();
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
}
xmlHttpReq.open("post","/webLogic/test_test.do",true);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpReq.send("username="+" "+"&pwd="+"123");
受け入れる--メソッドとプロパティの説明:
XMLHttpRequest 。 Ajax ，XMLHttpRequest ：
readyState
readyState Ajax 。 。
0 。 open
1 。 open ， send
2 。send 。
3 。
4 。
readyState ， readystatechange 。 onreadystatechange ， readyState 。
readyState 。 ， ， readyState 4
status
。 ， 。
：
404 (not found)
403 (forbidden)
500 (internal service error)
200 (ok)
304 (not modified)( 304 ， )
XMLHttpRequest ， status 。 200 304 ，
responseText
XMLHttpRequest responseText 。 HTML,XML ， 。
readyState 4 , responseText ， Ajax 。
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
responseXML
XML， responseXML 。
， responseXML 。 MIME text/xml。
Ajaxの具体的な使用:
AJAX Request/Server ， ：
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
HTTP 。 XMLHttpRequest open send 。 http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null)
，open send 。send Post ， 。
: Post ， setRequestHeader ， MIME 。 ：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
， send ， ：
name=value&anothername=othervalue&so=on
//
function sendRequest(){
//
var chatMsg=input.value;
var url="chatServlet.do?charMsg="+chatMsg;
//
XMLHttpReq.open("POST",url,true);
// MiME , POST ，
// "Content-type" "application/x-www-form-urlencoded".
// ， URL 。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// , readystatechange ,
//onreadystatechange
XMLHttpReq.onreadystatechange=processResponse;
//
XMLHttpReq.send(null);
}
：
。
， XMLHttpRequest readyState ， 。 ，readyState 4 ， ， 。 ：
if (http_request.readyState == 4) {
// ，
} else {
// ，
}
， HTTP ， 。 W3C 。 ，200 。
if (http_request.status == 200) {
// ，
} else {
//
}
， ：
responseText： ；
responseXML： XML ， DOM 。
function processResponse(){
if(XMLHttpReq.readyState==4){ // 4
if(XMLHttpReq.status==200){ // ，
document.getElementById("chatArea").value=XMLHttpReq.responseText;
}
}
}
。
。
：
var xmlHttpReq = createXmlHttpRequest();
xmlHttpReq.onreadystatechange=function(){
// 4
if(xmlHttpReq.readyState==4){
//200
if(xmlHttpReq.status==200){
// div action
document.getElementById("info").innerHTML=xmlHttpReq.responseText;
}
}
}
// get ，
xmlHttpReq.open("post","/webLogic/test_test.do?username=aaa",true);
//post
// xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// xmlHttpReq.send("username="+"1111111"+"&pwd="+"123");// post
//get send(null)，
xmlHttpReq.send(null);