学习AJAX
2016-04-05 09:45
405 查看
1.含义
AJAX（Asynchronous JavaScript and XML）异步的JavaScript和xml
AJAX 是与服务器交换数据并更新部分网页的技术。无需加载整个网页。
2.XMLHttpRequest
是AJAX的基础，用于在后台同服务器交换数据。
3.AJAX主要设计到的内容
整体过程比较固定：
1）创建一个XMLHttpRequest对象(异步数据读取)
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequst;}
else{xmlhttp=ActiveXObject("Microsoft.XMLHTTP");}
2) 请求
xmlhttp.open("GET",url,true); or POST,url是要访问的服务器端的一个地址。
xmlhttp.send();
3) onreadystatechange 当请求就绪，就开始执行这个里面的函数
xmlhttp.onreadystatechange=state_change;
4)具体修改的过程，即响应
function state_change(){
if(xmlhttp.redayState==4 && xmlhttp.status==200){
document.getElementById("").innerHTML=xmlhttp.responseText;
}
}
注：AJAX的readyState有四个取值：
请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪
AJAX的status有二个取值：
200--"OK"
404--"未找到页面"
注:响应属性有两个：
requestText 获得字符串形式的响应数据。
requestXML 获得 XML 形式的响应数据。
跟open中url会一致
4.AJAX数据传输主要有三种格式：
-XML
-JSON
-HTML
1）采用HTML，一般是存储在responseText中。
2）采用XML，一般是存储在responseXML中。
3）采用JSON，
1)HTML流程
var aNodes=document.getElementsByTagName("a");
aNodes[i].onclick=function(){
var xmlhttp=new XMLHttpRequest();
var method="GET";
var url=this.href;
xmlhttp.open(method,url);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
document.getElementById("details").innerHTML=xmlhttp.responseText;
}
}
}
return false;
2）XML通用的数据传输格式
通过xmlhttp.responseXML，获取之后--》先解析：
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
按照XML文件中的格式标签
--》解析之后创建节点
var aNode=document.creatElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href="mailto:"+email;
var h2Node=document.creatElement("h2");
h2.appendChild(aNode);
var aNode2=document.creatElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href=website;
上述是按照如下格式创建的
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com</a>
*/
--》最后到你要显示的区域去显示
var detailsNode=document.getElementById("details");
detailsNode.innerHTML="";//显示下一个之前清空一下
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
3）JSON
本身的形式是键值对：
var jsonObject={
"name":"atguigu",
"age":12,
"address":{"city":"BeiJing","school":"尚硅谷"},
"teaching":function(){
alert("JavaEE,Android...");
}
};
jsonObject.teaching();
json实际是一个文本字符串，可以用responseText读出字符串结果，然后用eval把读出的字符串
转换成javascript（JSON对象）
eval作用举例：
var jsonStr="{'name':'atguigu'}";
eval("alert('hello eval')");
eval转换json对象：
var jsonStr="{'name':'atguigu'}";
var jsonStr1=eval("("+jsonStr+")");//注意格式
alert(jsonStr1.name);
5.用jQuary写AJAX,方便之处在于，它封装了很多函数。
load():能载入远程的HTML代码,感觉上是类似innerHTML,向某个节点写内容。
load(url)
load(url,args),args写的是json格式，url后面加参数默认用GET方法，args上传函数用的是POST方法
load(url,args,回调函数)
jQuery写的一个例子：
<script type="text/javascript" src="scripts/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
$("#content").load(url);
return false;
});
});
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
<div id="content"></div>
get(),post()，getJSON()方法。
-->此后，就可以在后台构建JSON对象，前端获取即可。
-->然后可以通过加入jar包，jackson的jar包就可以更方便的构建json对象。
-->可以采用方法：ObjectMapper mapper=new ObjectMapper();
String jsonStr=mapper.writeValueAsString(customer);
System.out.println(jsonStr);//这就是JSON格式
-->当加入注解时：org.codehaus.jackson.annotate.JsonIgnore
@JsonIgnore//这个往往会忽略customer中不是getter的属性
AJAX（Asynchronous JavaScript and XML）异步的JavaScript和xml
AJAX 是与服务器交换数据并更新部分网页的技术。无需加载整个网页。
2.XMLHttpRequest
是AJAX的基础，用于在后台同服务器交换数据。
3.AJAX主要设计到的内容
整体过程比较固定：
1）创建一个XMLHttpRequest对象(异步数据读取)
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequst;}
else{xmlhttp=ActiveXObject("Microsoft.XMLHTTP");}
2) 请求
xmlhttp.open("GET",url,true); or POST,url是要访问的服务器端的一个地址。
xmlhttp.send();
3) onreadystatechange 当请求就绪，就开始执行这个里面的函数
xmlhttp.onreadystatechange=state_change;
4)具体修改的过程，即响应
function state_change(){
if(xmlhttp.redayState==4 && xmlhttp.status==200){
document.getElementById("").innerHTML=xmlhttp.responseText;
}
}
注：AJAX的readyState有四个取值：
请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪
AJAX的status有二个取值：
200--"OK"
404--"未找到页面"
注:响应属性有两个：
requestText 获得字符串形式的响应数据。
requestXML 获得 XML 形式的响应数据。
跟open中url会一致
4.AJAX数据传输主要有三种格式：
-XML
-JSON
-HTML
1）采用HTML，一般是存储在responseText中。
2）采用XML，一般是存储在responseXML中。
3）采用JSON，
1)HTML流程
var aNodes=document.getElementsByTagName("a");
aNodes[i].onclick=function(){
var xmlhttp=new XMLHttpRequest();
var method="GET";
var url=this.href;
xmlhttp.open(method,url);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
document.getElementById("details").innerHTML=xmlhttp.responseText;
}
}
}
return false;
2）XML通用的数据传输格式
通过xmlhttp.responseXML，获取之后--》先解析：
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
按照XML文件中的格式标签
--》解析之后创建节点
var aNode=document.creatElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href="mailto:"+email;
var h2Node=document.creatElement("h2");
h2.appendChild(aNode);
var aNode2=document.creatElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href=website;
上述是按照如下格式创建的
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com</a>
*/
--》最后到你要显示的区域去显示
var detailsNode=document.getElementById("details");
detailsNode.innerHTML="";//显示下一个之前清空一下
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
3）JSON
本身的形式是键值对：
var jsonObject={
"name":"atguigu",
"age":12,
"address":{"city":"BeiJing","school":"尚硅谷"},
"teaching":function(){
alert("JavaEE,Android...");
}
};
jsonObject.teaching();
json实际是一个文本字符串，可以用responseText读出字符串结果，然后用eval把读出的字符串
转换成javascript（JSON对象）
eval作用举例：
var jsonStr="{'name':'atguigu'}";
eval("alert('hello eval')");
eval转换json对象：
var jsonStr="{'name':'atguigu'}";
var jsonStr1=eval("("+jsonStr+")");//注意格式
alert(jsonStr1.name);
5.用jQuary写AJAX,方便之处在于，它封装了很多函数。
load():能载入远程的HTML代码,感觉上是类似innerHTML,向某个节点写内容。
load(url)
load(url,args),args写的是json格式，url后面加参数默认用GET方法，args上传函数用的是POST方法
load(url,args,回调函数)
jQuery写的一个例子：
<script type="text/javascript" src="scripts/jquery-1.7.2.js">
</script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
$("#content").load(url);
return false;
});
});
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
<div id="content"></div>
get(),post()，getJSON()方法。
-->此后，就可以在后台构建JSON对象，前端获取即可。
-->然后可以通过加入jar包，jackson的jar包就可以更方便的构建json对象。
-->可以采用方法：ObjectMapper mapper=new ObjectMapper();
String jsonStr=mapper.writeValueAsString(customer);
System.out.println(jsonStr);//这就是JSON格式
-->当加入注解时：org.codehaus.jackson.annotate.JsonIgnore
@JsonIgnore//这个往往会忽略customer中不是getter的属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DECODE函数
- VS2013单元测试 的安装、创建与执行
- 客户端域用户时钟同步
- js实现网页在线聊天功能（四）
- android中的color使用总结
- 苏州Uber优步司机奖励政策（4月2日~4月3日）
- Linux命令:screen
- JavaScript进阶基础二
- Win10预览版14251怎么升级到14295系统?
- Eclipse快捷键
- Linux编译安装Darwin Streaming Server 6.0.3
- js实现网页在线聊天功能（三）
- Canvas的save和restore
- Android 避免内存溢出的方案总结
- Android中资源文件的Shape使用总结
- solrCloud的两种部署方式
- 设计一个简单的socket通信协议
- QT failed to load platform plugin
- 【51单片机】蜂鸣器
- 番茄工作法