一、什么是Ajax?
AJAX(AsynchronousJavaScriptAndXML)指异步JavaScript及XML。使用Ajax可以解决页面的局部更新。
使用的技术包含:javascript和css
XML不是必选项,还可以使用其他数据格式包括普通文本,JSON等
二、使用步骤:
1.创建Ajax对象
针对不同的浏览器,有3种构造函数:
new XMLHttpRequest ( ); //所有浏览器,除了IE 5和IE 6
new ActiveXObject ("Msxml2.XMLHTTP") // IE
new ActiveXObject("Microsoft.XMLHTTP") // IE老版本
兼容不同浏览器版本的.js文件:
functioncreateXHR(){
varxhr;
if(window.ActiveXObject){//ie
//由于ie有多个不同版本构造函数
//如果某个构造函数不被该支持就抛出异常,我们根据这个特性来实现下的对象创建
try{
xhr=newActiveXObject("Msxml2.XMLHTTP");// IE
}catch(exception){
xhr="Microsoft.XMLHTTP");// IE 老版本
}
}else{//notie
xhr=newXMLHttpRequest(); //所有浏览器,除了IE 5和IE 6
}
returnxhr;
}
2..jsp文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/ajaxUtil.js"></script> </head> <body> <input type="button" onclick="getInnerText()" value="单击"> <p id="myp"></p> <script type="text/javascript"> function getInnerText(){ xhr=createXHR(); //1.打开 xhr.open("GET","getInnerText"); //2.注册回调函数
//告诉事情干完了,如何通知当前页面的对象 xhr.onreadystatechange=function(){ //readyState的属性值(0~4)增加时,都会触发该事件句柄,所以该方法调用了4次 console.log(xhr.readyState); if(xhr.readyState==4){//HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded) if(xhr.status==200){ //responseText:目前为止从服务器接收到的响应体(不包括头部) document.getElementById("myp").innerHTML=xhr.responseText; }else{ document.getElementById("myp").innerHTML="请求错误"; } } } //3.设置头部:如果需要的话,指定额外的请求参数 //xhr.setRequestHeader(); //4.发送请求 xhr.send(null); } </script> </body> </html>
三、ajax的局限:XMLHttpRequest对象第一个版本
1.不能跨域请求---单源策略/同源策略
一个源不能请求另外一个源
源:协议+主机+端口必须完全相同.
协议不同:
Http://localhost:80/sxndajax/index.jsp
https://localhost:80/sxndajax/index.jsp
端口不同:
ttp://localhost:80/sxndajax/index.jsp
http://localhost:8080/sxndajax/index.jsp
2.不能传递文件—不能通过Ajax上传文件
这些限制都是出于安全考虑.
四、响应内容为XML:responseXML
1.responseXML成功的3个条件:
<1>readyState为4;
<2>Content-Type为“text/
xml”、“application
/xml”或任何以“+xml”结尾,表示响应是一个XML文档;
<3>响应体由整齐的、解析没有错误的XML标记组成。
2.
服务器端代码:
//1、写的是xml
response.setContentType("text/xml");
//2、格式良好的xml
PrintWriterout=response.getWriter();
out.write("<date>");
out.write(newDate().toGMTString());
out.write("</date>"); 3.
客户端响应处理代码:
if(xhr.readyState==4){
if(xhr.status==200){
//document.getElementById("myp").innerHTML=xhr.responseText;
//xhr.responseXML是一个Document对象
document.getElementById("myp").innerHTML=xhr.responseXML.childNodes[0].textContent;
}else{
document.getElementById("myp").innerHTML="请求错误";
}
五、JSON(JavaScript Object Notation)
1.什么是JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
2。 为什么用JSON?
<user>
<name>z3</name>
<age>23</age>{“name”:”z3”,”age”:23}
</user>
3.JSON语法:
<1>
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。
<2>
数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
<3>值(value
)可以是双引号括起来的字符串(
string
)、数值(number)、
true
、
false
null
、对象(object)或者数组(array)。这些结构可以嵌套。
<4>
字符串(
string
)
是由
双引号
包围的任意数量Unicode字符的集合,使用
反斜线
转义。一个字符(character)即一个单独的字符串(character string)。
4.JSON格式客户端解析:
4.1服务器响应格式:
// 告诉是json格式
response.setContentType("application/
json");
PrintWriter out=response.getWriter();
out.write("{"name":"z3","age":22}");
4.2客户端解析:
4.2.1借助于浏览器提供的JSON对象:
JSON.parse(xhr.responseText).属性名
xhr.onreadystatechange=function(){
//readyState的属性值(0~4)增加时,所以该方法调用了4次
console.log(xhr.readyState);
if(xhr.readyState==4){
//HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded)
if(xhr.status==200){
//借助于浏览器提供的JSON对象:SON.parse(xhr.responseText).属性名
resTxt="name="+
JSON.parse(xhr.responseText)
.name+",age="+
JSON.parse(xhr.responseText)
.age;
document.getElementById("myp").innerHTML=resTxt;
}else{
document.getElementById("myp").innerHTML="请求错误";
}
}
}
4.2.1借助于浏览器提供的eval对象:
eval("("+xhr.responseText+")").属性名,但
存在安全问题,尽量少用.
xhr.onreadystatechange=function(){ //readyState的属性值(0~4)增加时,所以该方法调用了4次 console.log(xhr.readyState); if(xhr.readyState==4){//HTTP请求的状态,共5个属性值:0(初始化)1(open)2(sent)3(receiving)4(loaded) if(xhr.status==200){ //借助于浏览器提供的eval对象:eval("("+xhr.responseText+")").属性名 resTxt="name="+eval("("+xhr.responseText+")").name+",age="+eval("("+xhr.responseText+")").age; document.getElementById("myp").innerHTML=resTxt; }else{ document.getElementById("myp").innerHTML="请求错误"; } } }
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|