Ajax基礎(chǔ)
一.Ajax的關(guān)鍵技術(shù)：
1.使用XHTML(HTML)和CSS構(gòu)建標(biāo)準(zhǔn)化的展示層
2.使用DOM進(jìn)行動(dòng)態(tài)顯示和交互
3.使用XML和XSLT進(jìn)行數(shù)據(jù)交換和操縱
4.使用XMLHttpRequest異步獲取數(shù)據(jù)
5.使用JavaScript將所有元素綁定在一起
二.javascript語(yǔ)法(是一種弱類型的解釋型的語(yǔ)言)
1.基礎(chǔ)語(yǔ)法:
<script type="text/javascript"> function init(){
var age=22; //語(yǔ)句可以加”;”,也可以不加,但是好的編程習(xí)慣最好加
alert("age"+age+","+typeof age);
/*數(shù)據(jù)類型:1.未定義（Undefined），變量未定義;2.空（Null），變量未初始化
3.字符串（String），可以放在單引號(hào)或雙引號(hào)中;4.數(shù)值（Number），可以表示整數(shù)、浮點(diǎn)數(shù)
5.布爾型（Boolean），true或false;6.對(duì)象（Object） */
var color=new Array(); /* 也可以是 var cloor=[]; */
color[0]="hello"; color[1]=12;
for(var i=0;i<color.length;i++){ alert(color[i]); } //任何的類型最好用var
}
window.onload=init; </script> //等待所有的頁(yè)面元素都加載再load javascript
2.函數(shù):函數(shù)也是對(duì)象
<script type="text/javascript">
function Person(){ this.age=22; this.name="name"; //this綁定以后才能調(diào)用到
this.sayHello=function(){ alert("world "+this.name); }} //內(nèi)部方法的定義
var person=new Person(); //創(chuàng)建對(duì)象實(shí)例
person.sayHello(); alert(person.age); window.onload=person.sayHello();</script>
三.DOM基礎(chǔ):Document Object Model
1.類型:元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn)
2.基本的DOM方法:
實(shí)例: <body><h1>hello h1</h1> //為了跨瀏覽器節(jié)點(diǎn)寫在一起
<form id="form" action=""
><input id="txt1" type="text" name="text1" value="123"
></form> </body>
Javascript: function dom(){
var txt1=document.getElementById("txt1"); alert(typeof txt1); //返回值為對(duì)象
var inputs=document.getElementsByTagName("input");alert("len= "+inputs.length);
for(var i=0;i<inputs.length;i++){ var value=inputs[i].getAttribute("value");
var val=inputs[i].setAttribute("value","145"); } }
3.重要DOM屬性;
function node(){ var form=document.getElementById("form");
var firstChild= form.firstChild.getAttribute("value"); alert("first="+firstChild);
var lastChild= form.lastChild.getAttribute("value"); alert("last="+lastChild);
var sibling= form.firstChild.nextSibling.getAttribute("value");
alert("parentNode type="+form.parentNode.nodeType);
/* nodeTpye屬性用來區(qū)分節(jié)點(diǎn)的類型,元素為1,屬性為2,文本節(jié)點(diǎn)是3 */
alert(form.parentNode.childNodes[0].nodeValue);} /* nodeValue只對(duì)文本節(jié)點(diǎn)有效 */
4.改變網(wǎng)頁(yè)結(jié)構(gòu)的DOM方法:實(shí)例(改變頁(yè)面的顯示圖片)
Html:
<body> <h1 align="center"> Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img id="topHat" src="topHat.gif" /> <br />
<input id="bt" type="button" value="Hocus!" onClick="showRabbit()"/></p>
</form> </body>
簡(jiǎn)便的方法一:
<script type="text/javascript">
function showRabbit(){ var topHat=document.getElementById("topHat");
topHat.setAttribute("src","rabbit-hat.gif");
var button=document.getElementById("bt");
button.setAttribute("value","back"); button.onclick=hiddenRabbit; }
function hiddenRabbit(){ var topHat=document.getElementById("topHat");
topHat.setAttribute("src","topHat.gif");
var button=document.getElementById("bt");
button.setAttribute("value","Hocus!"); button.onclick=showRabbit; }
</script> //javascript方法的轉(zhuǎn)換
復(fù)雜的方法二：
function showRabbit(){
var topHat=document.getElementById("topHat");
var newImage =document.createElement("img");
newImage.setAttribute("src","rabbit-hat.gif");
var imgParent=topHat.parentNode;
imgParent.insertBefore(newImage,topHat);
imgParent.removeChild(topHat);
var button=document.getElementById("bt");
button.setAttribute("value","back");
button.onclick=hiddenRabbit; }
appendChild(node)：把新建的節(jié)點(diǎn)插入到節(jié)點(diǎn)樹的最后節(jié)點(diǎn)下，成為這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)
createTextNode(text)：創(chuàng)建文本節(jié)點(diǎn)
四．使用Ajax發(fā)送異步請(qǐng)求 XMLHttpRequest
1．Html:<body> <table align="center"> <h2>enter location data</h2>
<tr> <th align="left">zipcode:</th>
<td><input id="zipcode" type="text" name="zipcode" onblur="processZipData()"> </td> </tr> //鼠標(biāo)離開時(shí)調(diào)用的函數(shù)
<tr> <th align="left">city:</th>
<td><input id="city" type="text" name="city"></td> </tr>
<tr> <th align="left">province:</th>
<td><input id="province" type="text" name="province"></td></tr> </table></body>
2．Javascript: <script type="text/javascript">
var request=false;
function createRequest(){ //創(chuàng)建跨瀏覽器的XMLHttpRequest
try{ request=new XMLHttpRequest();
}catch(e){ try{ request=new ActiveXObject("Msxm12.XMLHTTP");
}catch(e1){ try{ request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){ request=false; } } } if(!request)alert("error"); }
function processZipData(){ createRequest();
var zipcode=document.getElementById("zipcode").value;
var url="zipcode.jsp?zipcode="+escape(zipcode);//轉(zhuǎn)義不能用明文正確發(fā)送任何字符
request.open("GET",url,true); //建立到服務(wù)器的新請(qǐng)求
request.onreadystatechange=updatePage;//服務(wù)器完成請(qǐng)求后，然后調(diào)用指定任何方法
request.send(null); } //向服務(wù)器發(fā)送請(qǐng)求
function updatePage(){
if(request.readyState==4){ if(request.status==200){
var response=request.responseText.split(","); 用，號(hào)分割成對(duì)象數(shù)組
document.getElementById("city").value=response[0];
document.getElementById("province").value=response[1];
} } } </script>
3．服務(wù)器端測(cè)試代碼：<%Map<String,String> datas=new HashMap<String,String>();
datas.put("123","Hefei,Anhui");
String zipcode=request.getParameter("zipcode");String data=datas.get(zipcode);
if(data==null){data="error,error";}out.print(data); %>
五：在請(qǐng)求和響應(yīng)中使用XML
1．修改的javascript: function updatePage(){
if(request.readyState==4){ if(request.status==200){
var response= request.responseXML;
var city=response.getElementsByTagName("city")[0].firstChild.nodeValue;
var province=response.getElementsByTagName("province")[0].firstChild.nodeValue;
document.getElementById("city").value=city;
document.getElementById("province").value=province; } } }
XMLHttpRequest對(duì)象提供了一個(gè)屬性responseXML，它能以DOM Document的形式獲取服務(wù)器的XML響應(yīng)
2.修改的服務(wù)器代碼：<%
Map<String,String> datas=new HashMap<String,String>();
String location1="<location>"+"<city>Hefei</city>"+"<province>Anhui</province>"
+"</location>";
String error="<location>"+"<city>error</city>"+"<province>errors</province>"
+"</location>";
datas.put("123",location1); String zipcode=request.getParameter("zipcode");
String data=datas.get(zipcode); if(data==null){ data=error; }
response.setContentType("text/xml;charset=UTF-8"); out.print(data);%>
//需要增加的返回的代碼格式
六．使用JSON進(jìn)行數(shù)據(jù)傳輸
1．JSON (JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成。它是基于JavaScript 的。
2．Javascript:
function updatePage(){ // eval()函數(shù)將來源輸入無條件地視為表達(dá)式進(jìn)行解析，返回對(duì)象
if(request.readyState==4){ if(request.status==200){
var response=eval("("+request.responseText+")");
document.getElementById("city").value=response.city;
document.getElementById("province").value=response.province;
} } }
3.服務(wù)器端：<%Map<String,String>datas=new HashMap<String,String>();
String location1="{'city':'hefei','province':'anhui'}";
String error="{'city':'error','province':'error'}";
datas.put("123",location1); String zipcode=request.getParameter("zipcode");
String data=datas.get(zipcode);
if(data==null){ data=error; } out.print(data); %>
將JSON數(shù)據(jù)賦值給變量：
var company = { “employees": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
]}；