Ajax学习笔记Word文档格式.docx
《Ajax学习笔记Word文档格式.docx》由会员分享，可在线阅读，更多相关《Ajax学习笔记Word文档格式.docx（11页珍藏版）》请在冰豆网上搜索。
//切记在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
升级会员 