Ajax从入门到精通
.png)
AJAX无刷新交互
目录（单击跳转对应目录）
1.初步认识AJAX............................................................ 1
1.1AJAX原理和优点...................................................... 1
1.2实际使用............................................................ 2
1.3怎么解决问题的...................................................... 2
1.4三个经典案例........................................................ 2
2.返回数据................................................................. 8
2.1具体数据............................................................ 8
3.具体DEMO............................................................... 15
3.1请求遮罩展示效果的实现............................................. 15
3.2省市区联动......................................................... 17
3.3实现黄金价格每五秒变动............................................. 20
3.4AJAX实现聊天室..................................................... 22
1.初步认识AJAX
1.1AJAX原理和优点
①简单认识
A.Asynchronous Javascript And XM:异步的 JavaScript 和 XML
B.是七个技术的综合（js/xml/xstl/xhtml/dom/MmlHttpRequest/css）,ajax是一个综合剂
C.ajax是一个与服务器端语言无关的技术（php/java/.net网站都可以用）
D.可以直接用的技术：灯箱遮罩效果/日程表
E.ajax可以给客户端返回三种格式的数据（文本格式/xml/json）
②为什么使用它
A.页面无刷新的动态数据交换[其他技术flash/java applet/iframe/ajax]（数据是整体提交的/整个页面有刷新：如果页面局部要求时时刷新，另一个部分又要输入数据就有问题/用户体验查/占带宽）
③基本原理
A.传统的:一个请求对应一个响应
A页面发帖—>请求—>服务器—>响应—>A页面
B.ajax：创建ajax引擎对象[浏览器]（XmlHttpRequest）
A页面发帖—>请求—>委托XmlHttpRequest对象去请求—>服务器—>响应—>XmlHttpRequest对象—>A页面
C.为什么通过委托XmlHttpRequest对象就可以异步呢？就像现实中老师讲课，如果老师自己买东西了，学生就不能听课了。
如果老师委托"助理:XmlHttpRequest对象"去买面包，老师就可以继续讲课，学生可以继续听课。
1.2实际使用
①谷歌的邮件/地图/日期/股票/动态数据更新。各大门户网站都在用
1.3怎么解决问题的
①动态加载数据[地址薄选择]，按需取数据。
②改善用户体验（输入内容前提示/带进度条文件上传...）
③电子商务应用（购物车/邮件订阅...）
④访问第三方服务（访问搜索服务/rss阅读器）
⑤数据的局部刷新
1.4三个经典案例
①使用ajax完成用户名的验证（无刷新验证用户名）
A.实现了无刷新发送请求验证数据了。目前返回的是页面代码（后面要在指定div区域返回页面）管理业这么写可以实现单纯的返回数据。
用户名不可以用
用户名可以用
B.使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是从缓存取数据。
—>解决之道url后代一个总是变化的参数，比如当前时间。/或者在服务器慧松结果的时候禁用缓存。no-cache
C.边输入边提示 οnkeyup="checkName" 在姓名栏加上即可，确定就是请求量过大。
D.post方式的请求，在前面的方式中稍微修改即可。最好用post方式，安全/避免乱码
注册页面
用户名字： 用户密码： 用户邮箱：
用户名字： 用户密码： 用户邮箱：
var myXmlHttpRequest;//设置成全局才都能访问
//创建ajax引擎
function createXmlHttpRequest(){
var xmlHttpRequest;
if(window.ActiveXObject){
alert("IE");
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
//alert("谷歌");
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
//回调函数
function deal(){
//alert("处理函数被调用"+myXmlHttpRequest.readyState);
//我要取出从Admin页面返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值,根据返回信息的格式而定
//alert("服务器返回"+myXmlHttpRequest.responseText);
$("#myInfo").attr("value", myXmlHttpRequest.responseText);
}
}
$(document).ready(function() {
$("#checkName").click(function() {
myXmlHttpRequest=createXmlHttpRequest();
if(myXmlHttpRequest){
//alert("创建ajax引擎成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数标识请求的方式get/post
//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)
//第三个参数true表示使用异步机制,如果是false表示不是异步处理
/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();
alert(url); */
/* //打开一个请求
myXmlHttpRequest.open("get",url, true);
//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称
myXmlHttpRequest.onreadystatechange=deal;
//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据
myXmlHttpRequest.send(null); */
var url="/ByBasicProject/OnlineChat/Admin.jsp";
//这是要发送的数据
var data="name="+$("#name").val();
myXmlHttpRequest.open("post",url, true);
//指定urlencoded来发送的数据,这句话必须
myXmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=deal;
myXmlHttpRequest.send(data);
}
});
});
注册处理页面
用户名不可以用
用户名可以用
注册页面
用户名字： 用户密码： 用户邮箱：
用户名字： 用户密码： 用户邮箱：
var myXmlHttpRequest;//设置成全局才都能访问
//创建ajax引擎
function createXmlHttpRequest() {
var xmlHttpRequest;
if (window.ActiveXObject) {
alert("IE");
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//alert("谷歌");
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
//回调函数
function deal() {
//alert("处理函数被调用"+myXmlHttpRequest.readyState);
//我要取出从Admin页面返回的数据
if (myXmlHttpRequest.readyState == 4) {
//取出值,根据返回信息的格式而定
//alert("服务器返回"+myXmlHttpRequest.responseText);
//$("#myInfo").attr("value", myXmlHttpRequest.responseText);
//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好
document.getElementById("detail").innerHTML = myXmlHttpRequest.responseText;
}
}
$(document)
.ready(
function() {
$("#checkName")
.click(
function() {
myXmlHttpRequest = createXmlHttpRequest();
if (myXmlHttpRequest) {
//alert("创建ajax引擎成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数标识请求的方式get/post
//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)
//第三个参数true表示使用异步机制,如果是false表示不是异步处理
/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();
alert(url); */
/* //打开一个请求
myXmlHttpRequest.open("get",url, true);
//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称
myXmlHttpRequest.onreadystatechange=deal;
//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据
myXmlHttpRequest.send(null); */
var url = "/ByBasicProject/OnlineChat/Admin.jsp";
//这是要发送的数据
var data = "name="
+ $("#name").val();
myXmlHttpRequest.open("post",
url, true);
//指定urlencoded来发送的数据,这句话必须
myXmlHttpRequest
.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
//调用deal函数
myXmlHttpRequest.onreadystatechange = deal;
myXmlHttpRequest.send(data);
}
});
});
2.返回数据
2.1具体数据
①文本Text(Html格式）
A.可以直接用
document.getElementById("detail").innerHTML = myXmlHttpRequest.responseText;/不用减少jsp代码了
②xml格式
A.首先要建立xml结尾的文件
B.访问xml文件位置即为url
C.访问到的数据一开始拿到是object
D.需要用myResponse.getElementsByTagName("yfb")[0].firstChild.nodeValue;这种方式得到值
E.把内容粘贴到文本框或者div内都可以的
F.优点：通用的格式/数据可以根据标记获取/利用dom完全掌握文档
支持部
研发部
注册页面
用户名字： 用户密码： 用户邮箱：
用户名字： 用户密码： 用户邮箱：
var myXmlHttpRequest;//设置成全局才都能访问
//创建ajax引擎
function createXmlHttpRequest() {
var xmlHttpRequest;
if (window.ActiveXObject) {
alert("IE");
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//alert("谷歌");
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
//回调函数
function deal() {
//alert("处理函数被调用"+myXmlHttpRequest.readyState);
//我要取出从Admin页面返回的数据
if (myXmlHttpRequest.readyState == 4) {
//取出值,根据返回信息的格式而定
//alert("服务器返回"+myXmlHttpRequest.responseText);
//$("#myInfo").attr("value", myXmlHttpRequest.responseText);
//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好
var myResponse=myXmlHttpRequest.responseXML;
//返回是object需要解析才能设置到div
var zzb=myResponse.getElementsByTagName("zzb")[0].firstChild.nodeValue;
var yfb=myResponse.getElementsByTagName("yfb")[0].firstChild.nodeValue;
$("#detail").append(zzb+"
");
$("#detail").append(yfb);
}
}
$(document)
.ready(
function() {
$("#checkName")
.click(
function() {
myXmlHttpRequest = createXmlHttpRequest();
if (myXmlHttpRequest) {
//alert("创建ajax引擎成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数标识请求的方式get/post
//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)
//第三个参数true表示使用异步机制,如果是false表示不是异步处理
/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();
alert(url); */
/* //打开一个请求
myXmlHttpRequest.open("get",url, true);
//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称
myXmlHttpRequest.onreadystatechange=deal;
//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据
myXmlHttpRequest.send(null); */
var url = "/ByBasicProject/OnlineChat/Admin.xml";
//这是要发送的数据
var data = "name="
+ $("#name").val();
myXmlHttpRequest.open("post",
url, true);
//指定urlencoded来发送的数据,这句话必须
myXmlHttpRequest
.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
//调用deal函数
myXmlHttpRequest.onreadystatechange = deal;
myXmlHttpRequest.send(data);
}
});
});
③json格式：javaScript Object Notation/是js的原生格式
A.json属性值也可以继续是json对象,属性值也可以是一个方法/利于调用
B.字符串转成json对象如何？
var jsonStr="{'name':'蘑菇头'}";
var tempJsonObject=eval("("+jsonStr+")");
alert(tempJsonObject.name);
C.传输格式和xml很相似，但是更灵巧，不仅可以写在js结尾的，写在txt也可以的，那个更利于编写写那个。大部分都是json格式
{
"name" : "陈翔",
"age" : 26,
"country" : "中国",
"address":{"city":"合肥","provice":"安徽"}
}
注册页面
用户名字： 用户密码： 用户邮箱：
用户名字： 用户密码： 用户邮箱：
var myXmlHttpRequest;//设置成全局才都能访问
//创建ajax引擎
function createXmlHttpRequest() {
var xmlHttpRequest;
if (window.ActiveXObject) {
alert("IE");
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//alert("谷歌");
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
//回调函数
function deal() {
//alert("处理函数被调用"+myXmlHttpRequest.readyState);
//我要取出从Admin页面返回的数据
if (myXmlHttpRequest.readyState == 4) {
//取出值,根据返回信息的格式而定
//alert("服务器返回"+myXmlHttpRequest.responseText);
//$("#myInfo").attr("value", myXmlHttpRequest.responseText);
//为了不更改jsp页面,用div的innerHtml直接接受数据展示更好
//var myResponse=myXmlHttpRequest.responseText;
var jsonObject=eval("("+myXmlHttpRequest.responseText+")");
var name=jsonObject.name;
var country=jsonObject.country;
$("#detail").append(name);
$("#detail").append(country);
}
}
$(document)
.ready(
function() {
$("#checkName")
.click(
function() {
myXmlHttpRequest = createXmlHttpRequest();
if (myXmlHttpRequest) {
//alert("创建ajax引擎成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数标识请求的方式get/post
//第二个指定url,对哪个页面发出ajax请求(本质仍然是http请,但是无刷新了)
//第三个参数true表示使用异步机制,如果是false表示不是异步处理
/* var url="/ByBasicProject/OnlineChat/Admin.jsp?name="+$("#name").val();
alert(url); */
/* //打开一个请求
myXmlHttpRequest.open("get",url, true);
//指定回调函数,作用很大,在指定区域展示回来的页面,deal是个函数的名称
myXmlHttpRequest.onreadystatechange=deal;
//开始发送请求,如果是get请求填写null即可。如果是post请求则填入实际数据
myXmlHttpRequest.send(null); */
var url = "/ByBasicProject/OnlineChat/Admin.js";
//这是要发送的数据
var data = "name="
+ $("#name").val();
myXmlHttpRequest.open("post",
url, true);
//指定urlencoded来发送的数据,这句话必须
myXmlHttpRequest
.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
//调用deal函数
myXmlHttpRequest.onreadystatechange = deal;
myXmlHttpRequest.send(data);
}
});
});
3.具体DEMO
3.1请求遮罩展示效果的实现
①实现简单的遮罩效果（jquery+ajax的局部提交才可以的）
②实现排期跟进更新和登记的遮罩效果。
注册页面
.shade{
margin: 0;
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
outline: 0;
opacity: 0.5;
background: #CDC9C9;
display: none;
}
.show{
display: none;
position: absolute;
top: 15%;
left: 20%;
width: 55%;
height: 55%;
padding: 20px;
border: 5px solid #1C86EE;
background-color: yellow;
z-index: 1002;
overflow: auto;
}
$("#checkName").click(function() {
//使用load方法处理ajax
var url = "/ProblemMessageSelect.action";
$("#hiddenShowDiv").load(url, null);
$("#hiddenShowDiv").show();
$("#hiddenShadeDiv").show();
});
$("#hiddenShadeDiv").click(function() {
//刷新下当前页面,达到清除展示div的作用,返回原来页面
//有更好的方法empty()可以改进
location.reload();
});
3.2省市区联动
①省的表，市的表关联一个省id外键，区的表关联一个市的id外键—>建议使用三张表，
不建议使用（自连接）。第八集23分钟
②省变化使得区改变为默认
③数据连接数据库
请求页面
---省---
浙江
江苏
---城市---
---区---
function getCity(){
//切换省之前把区置为初始选择状态
var url = "/ByBasicProject/OnlineChat/Admin.jsp";
var sendData = {
'省' : $("#省").val(),
};
$("#市").load(url, sendData);
}
function getArea(){
var url = "/ByBasicProject/OnlineChat/Admin.jsp";
var sendData = {
'市' : $("#市").val()
};
$("#区").load(url, sendData);
}
处理页面
绍兴
宁波
嘉兴
丽水
台州
南京
无锡
徐州
常州
苏州
越城区
柯桥区
上虞区
玄武区
秦淮区
建邺区
鼓楼区
栖霞区
鄞州区
3.3实现黄金价格每五秒变动
请求页面
每个五秒去更新一次数据
市场
最新价格
涨跌
伦敦
788
102
台湾
854
-103
美国
1024
168
function updatePrice() {
var url = "/ByBasicProject/OnlineChat/Admin.jsp";
var sendData = {
'台湾' : $("#台湾").text(),
'伦敦' : $("#伦敦").text(),
'美国' : $("#美国").text()
};
$("#myBody").load(url, sendData);
}
setInterval("updatePrice()", 5000);
处理页面
每个五秒去更新一次数据
市场
最新价格
涨跌
欢迎登陆
用户姓名
用户密码
function updatePrice() {
var url = "/ByBasicProject/OnlineChat/FriendList.jsp";
var sendData ={
'name' : $("#name").val()
};
$("#myBody").load(url, sendData);
}
好友列表
好友列表
- 陈翔
- 蘑菇头
- 润土
- 123
- liu19911009
聊天室(正在和聊天)
$("#发送").click(function() { //数据发送给指定页面 var url = "/SendMessage.action"; var sendData = { 'content' : $("#sendMessage").val(), 'sender':$("#name").val(), 'receiver':$("#tempName").val() }; $("#sendMessage").val(""); $("#divTextArea").load(url, sendData); }); function getAllMessage(){ var url = "/getAllMessage.action"; var sendData = { 'content' : $("#sendMessage").val(), 'sender':$("#name").val(), 'receiver':$("#tempName").val() }; $("#divTextArea").load(url, sendData); } setInterval("getAllMessage()", 5000); 聊天页面 ${change.sender} ${change.content}
（图片来源网络，侵删）
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
