Ajax基础
一.Ajax的关键技术：
1.使用XHTML(HTML)和CSS构建标准化的展示层
2.使用DOM进行动态显示和交互
3.使用XML和XSLT进行数据交换和操纵
4.使用XMLHttpRequest异步获取数据
5.使用JavaScript将所有元素绑定在一起
二.javascript语法(是一种弱类型的解释型的语言)
1.基础语法:
<script type="text/javascript"> function init(){
var age=22; //语句可以加”;”,也可以不加,但是好的编程习惯最好加
alert("age"+age+","+typeof age);
/*数据类型:1.未定义（Undefined），变量未定义;2.空（Null），变量未初始化
3.字符串（String），可以放在单引号或双引号中;4.数值（Number），可以表示整数、浮点数
5.布尔型（Boolean），true或false;6.对象（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> //等待所有的页面元素都加载再load javascript
2.函数:函数也是对象
<script type="text/javascript">
function Person(){ this.age=22; this.name="name"; //this绑定以后才能调用到
this.sayHello=function(){ alert("world "+this.name); }} //内部方法的定义
var person=new Person(); //创建对象实例
person.sayHello(); alert(person.age); window.onload=person.sayHello();</script>
三.DOM基础:Document Object Model
1.类型:元素节点,属性节点,文本节点
2.基本的DOM方法:
实例: <body><h1>hello h1</h1> //为了跨浏览器节点写在一起
<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); //返回值为对象
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属性用来区分节点的类型,元素为1,属性为2,文本节点是3 */
alert(form.parentNode.childNodes[0].nodeValue);} /* nodeValue只对文本节点有效 */
4.改变网页结构的DOM方法:实例(改变页面的显示图片)
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>
简便的方法一:
<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方法的转换
复杂的方法二：
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)：把新建的节点插入到节点树的最后节点下，成为这个节点的子节点
createTextNode(text)：创建文本节点
四．使用Ajax发送异步请求 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> //鼠标离开时调用的函数
<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(){ //创建跨浏览器的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);//转义不能用明文正确发送任何字符
request.open("GET",url,true); //建立到服务器的新请求
request.onreadystatechange=updatePage;//服务器完成请求后，然后调用指定任何方法
request.send(null); } //向服务器发送请求
function updatePage(){
if(request.readyState==4){ if(request.status==200){
var response=request.responseText.split(","); 用，号分割成对象数组
document.getElementById("city").value=response[0];
document.getElementById("province").value=response[1];
} } } </script>
3．服务器端测试代码：<%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); %>
五：在请求和响应中使用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对象提供了一个属性responseXML，它能以DOM Document的形式获取服务器的XML响应
2.修改的服务器代码：<%
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进行数据传输
1．JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。它是基于JavaScript 的。
2．Javascript:
function updatePage(){ // eval()函数将来源输入无条件地视为表达式进行解析，返回对象
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.服务器端：<%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数据赋值给变量：
var company = { “employees": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
]}；