最近2天研究Ajax,并使用到Jquery组件,收获不少.
1.ajax的好处.
传统的B/S模式,如果涉及到客户端何服务器交互,往往都会页面刷新,出现白屏,而ajax的好处在于,可以与服务器交互,但却不会引起整个页面的回发.这样做的好处一是可以给客户更好的体验(避免出现白屏),还有就是可以减少页面数据的传送,比如页面有个Gridview控件,传统模式下如果回发,则不管有没有变化,所有的数据都传送回客户端.
2.ajax的原理其实很简单,利用XmlHttpRequest对象给请求服务器地址,利用异步模式(一般为异步),等待服务器返回数据,然后处理.XmlHttpRequest发送请求的方式有get和post2种,get将请求附在url后,post则在send方法中传递.
具体过程如下:
var xmlhttprequest;
function CreateXmlHttpRequest()
{
//create xmlhttprequest object,consider differences between broswer
if(window.ActivexObject)
{
//IE
xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function test()
{
CreateXmlHttpRequest();
var url = "test.aspx?id=123";
xmlhttprequest.open("GET",url,true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback()
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//处理服务器返回数据
}
}
}
当然服务器返回的数据形式可以是string,或者xml,或者Json等.
3.jquery组件实际就是一个.js文件,其中封装了许多javascript的东东,应用jquery编写javascript代码.简化了许多操作,而且不用考虑浏览器的兼容性.jquery操作手册可以帮组我们了解具体的各个操作.
如.
页面的Load事件用jquery表示为:$(document).ready(function(){//****});
调用某个元素:$("#id") //id为元素的id,相当于document.getElemntById("id");
调用某类标记:$("p")//调用段落标记,相当于document.getElementByTagName("p");
选中下选框的项:$("#select1").val("op1"); //op1为某选项的value
ajax调用(用post方式):$.post(url,key/value pair,callback,type);
4.jquery在vs中编码也很方便,且有智能提示,下载并安装VS90SP1-KB958502-x86.exe,并下载jquery-1[1].3.2-vsdoc2.js添加到项目中即可.