Ajax学习笔记Word文档格式.docx
《Ajax学习笔记Word文档格式.docx》由会员分享,可在线阅读,更多相关《Ajax学习笔记Word文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
![Ajax学习笔记Word文档格式.docx](https://file1.bdocx.com/fileroot1/2023-2/4/b8519cde-3895-4079-a320-8d32d4e88a31/b8519cde-3895-4079-a320-8d32d4e88a311.gif)
//切记在callback后面不要加"
()"
哦;
7,//回调函数
functioncallback(data){
alert(data)
//将服务器返回的数据动态的显示在页面上
//找到保存结果信息的节点
varresultObj=$("
#result"
//动态的改变页面中的div节点的内容就被动态改变了
resultObj.html(data);
//html向页面写东西;
}
第八讲:
第九讲:
1,常见的Ajax的框架:
extjquerydojoDWRmootoolsrico...
2,jquery是一个轻量级的框架,只是javascript和前台Ajax应用前台页面的开发;
第十讲:
1,例子:
请求-->
javascript->
ajax发送到后台->
后台调用ajax中的回调函数将数据发送到js->
获取页面中的一个dom对象->
将返回的数据赋给对象;
html页面:
<
html>
head>
title>
用户名校验ajax实例<
/title>
scriptlanguage="
javascript"
type="
text/javascript"
src="
jslib/jquery.js"
>
<
/script>
jslib/verfiy.js"
/head>
body>
<
inputtype="
text"
id="
userName"
/>
button"
value="
校验"
onclick="
verify()"
//这个div用于存放服务器返回的信息,开始为空,id属性定义时为了利用dom的方式找到某一个节点,进行操作;
divid="
result"
/div>
/body>
/html>
verify.js文件的源代码:
//定义用户名校验的方法:
functionverify(){
//Jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法;
varjqueryObj=$("
//获取节点的值
varuserName=jqueryObj.val();
//将得到的值向后台发送;
我们用get方法向后台发送
$.get("
//回调函数
functioncallback(data){
//找到保存结果信息的节点
varresultObj=$("
//Ajax请求通常是异步的
//动态的改变页面中div节点中的内容
resultObj.html(data);
//这句话的意思是将返回的信息写回到页面中;
}
//如果不用Jquery框架的话,我们要写的js代码如下:
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
varuserName=document.getElementById("
).value;
//创建XMLHTTPRequest对象,这是XMLHTTPRequest对象五部使用中最复杂的一步,
//需要针对IE和其他类型的浏览器建立这个对象的不同的方式写不同的代码
if(window.XMLHttpRequest){
//针对Firefox,Mozillal,Opera,safari,ie7以上
varxmlhttp=newXMLHttpRequest();
//针对某些特定版本的Mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("
text/xml"
}
}elseif(window.ActiveXObject){
//针对IE6,IE5
//连个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
varactivexName=["
MSXML2.XMLHTTP"
"
Microsoft.XMLHTTP"
];
for(vari=0;
li<
activexName.length;
i++){
try{
varxmlhttp=newActiveXObject(activexName[i]);
break;
}catch(e){
//不写任何东西,当有异常发生后,捕获后,程序继续向下执行;
}
}
//确认XMLHttpRequest对象创建成功
if(!
xmlhttp){
alert("
XMLHttpRequest对象创建失败@!
!
}else{
alert(xmlhttp);
//注册回调函数
//注册回调函数时,只需要函数名,不要加括号;
xmlhttp.onreadystatechange=callback;
//设置连接信息,第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post;
第二个参数表示请求的url地址,get方式请求的参数也在url中,第三个参数表示采用异步还是同步方式交互,true表示异步;
xmlhttp.open("
GET"
name="
+userName,true);
//发送数据,开始和服务器端进行交互,同步方式下,send这句话会在服务器端数据回来后才执行完,异步方式下,send是在立即执行;
xmlhttp.send(null);
//因为get方式下,数据放在了url中,所以这里添null;
//回调函数
functioncallback(){
//接受响应数据
//判断对象的状态是否交互完成
if(xmlhttp.readyState==4){//表示和服务器端的交互已经完成
//判断http的交互是否成功
if(xmlhttp.status==200){//200叫做http的响应码;
表示页面响应成功;
//获取服务器端返回的数据
//获取服务器端输出的纯文本数据
varresponseText=xmlhttp.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素节点
vardivNode=document.getElementById("
//设置元素节点中的html内容
divNode.innerHTML=responseText;
//以上代码是昨天jquery实现的底层实现方式
3,//通过POST方式和服务器端进行交互
//POST方式请求的代码
POST"
AJAXServer"
true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("
Content-Type"
application/x-www-form-urlencoded"
//POST方式发送数据
xmlhttp.send("
+userName);
........
第十四讲:
利用XHR接受与处理XML数据
1,总结---AJAX应用的五个步骤
1,建立XMLHttpRequest对象
2,设置回调函数
3,使用Open方法与服务器建立链接
4,向服务器端发送数据
5,在回调函数针对不同响应状态进行处理;
第十五讲:
点评学员问题与JQuery处理
1,ajax里面接受的是一个javascript里面的对象;
2,在javascript当中,一个简单的对象的定义方法
varobj={name:
123"
age:
20};
3,采用JQuery的方式完成xml和服务器端的交互;
e.g.varobj={name:
//使用jquery的XMLHTTPrequest对象get请求的封装
$.ajax({
type:
//http请求方式
url:
"
AJAXXMLServer"
//服务器端url地址
data:
+userName,//发送给服务器端的数据
dataType:
xml"
//高速JQuery返回的数据格式
success:
callback//定义交互完成,并且服务器正确返回数据时调用的回调函数.
});
//接受服务器端返回的数据,需要将data这个dom对象中的数据解析出来,首先需要将dom的对象转换成JQuery的对象。
varjqueryObj=$(data);
//获取message节点
varmessage=jqueryObj.children();
//获取文本内容
vartext=message.text();
//将服务器端返回的数据动态的显示在页面上
//动态的改变页面中div节点中的内容
resultObj.html(text);
第十六讲:
解决XHR与图片缓存问题
1,防止浏览器读取缓存的方法:
varurlo="
+$("
).val();
url=convertURL(url);
$.get(url,null,function(data){
$("
).html(data);
});
//给url地址增加时间戳,骗过浏览器,不读取缓存;
functionconvertURL(url){
//获取时间戳
vartimestamp=(newDate()).valueOf();
//将时间戳信息拼接到url上
//url="
if(url.indexOf("
?
)>
=0){
url=url+"
&
t="
+timestamp;
}else{
url=url+"?
t="+timestamp;
returnurl;
第十八讲:
1,在AJAX中我们主要用dom动态的去修改HTML的内容;
2,html中的文本信息,都是dom树中的文本节点;
3,html中的注释信息,同样是一个节点,我们把它称作注释节点;
4,html标签中的属性对应于dom树中的属性节点,它包含在dom中的元素内;
因为它既没有父亲也没有子孙,所以它包含在对应的dom元素节点中;
5,document被称为dom树的根节点,并且它不对应于页面中的任何内容;
6,html节点我们把它叫做根元素节点;
第十九讲:
1,css中要想定位窗口的位置,那么必须加上以下属性:
position:
absolute;
//绝对定位
top:
100px;
left:
350px;
2,JQuery如何操作css代码
//1,找到窗口对应的div节点
varwinNode=$("
#win"
//再用$之前一定要把jquery的库文件引进来;
//2,修改节点的css值,让矿口显示出来
winNode.css("
display"
block"
//jquery中提供了css()方法,用来执行css代码;
3,背景色的方式:
background-color:
blue;
第二十一讲:
1,css例子:
#title{
//控制标题的背景色
background-color:
color:
yellow;
padding-left:
3px;
#close{
margin-left:
150px;
cursor:
pointer;
//这个表示当鼠标指到该dom元素时显示为小手型;
2,注册页面装载时执行的方法
$(document).ready(function(){
varuls=$("
ul"
varulNode=$(this);
ulNode.children("
li"
第二十二讲:
1,
第二十三讲:
1,完2014-09-05下午:
1919