ajax初探

最近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添加到项目中即可.