jQuery简化Ajax步骤

A  使用JQuery 的load( ) 方法

使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：

客户端（14-1.html ）：

< html >

< head >

< title > jQuery简化Ajax步骤 < /title >

<script language="javascript" src="jquery.min.js"></script>

< script   language = " javascript " >

function   startRequest() {

$( " #target " ) . load ( " 14-1.aspx " ) ;

}

</script>

< /head >

< body >

< input type = " button " value = " 测试异步通讯 " onClick = " startRequest() " >

< br > < br >

< div id = " target " > < /div >

< /body >

< /html >

服务器端（14-1.aspx ）：

<%@   Page   Language="C#"   ContentType="text/html"   ResponseEncoding="gb2312"   %>

<%@   Import   Namespace="System.Data"   %>

<%

Response . Write( " 异步测试成功，很高兴 " );

%>

注意：如果服务器端返回的是XML 格式的数据，在客户端也会自动实现正确显示。

 

B  使用JQuery 的 $.get( ) 和 $.post( ) 方法

客户端（14-5.html ）：

< html >

< head >

< title > GET   VS.   POST < /title >

<script language="javascript" src="jquery.min.js"></script>

< script   language = " javascript " >

function   createQueryString() {

var   firstName   =   encodeURI($( " #firstName " ) . val()) ;

var   birthday   =   encodeURI($( " #birthday " ) . val()) ;

/ / 组合成对象的形式

var   queryString   =   { firstName : firstName,birthday : birthday } ;

return   queryString ;

}

function   doRequestUsingGET() {

$ . get( " 14-5.aspx " ,createQueryString(),

/ / 发送GET请求

function (data) {

$( " #serverResponse " ) . html(decodeURI(data)) ;

}

) ;

}

function   doRequestUsingPOST() {

$ . post( " 14-5.aspx " ,createQueryString(),

/ / 发送POST请求

function (data) {

$( " #serverResponse " ) . html(decodeURI(data)) ;

}

) ;

}

</script>

< /head >

< body >

< h2 > 输入姓名和生日 < /h2 >

< form >

< input type = " text " id = " firstName "   / > < br >

< input type = " text " id = " birthday "   / >

< /form >

< form >

< input type = " button " value = " GET " onclick = " doRequestUsingGET(); "   / > < br >

< input type = " button " value = " POST " onclick = " doRequestUsingPOST(); "   / >

< /form >

< div id = " serverResponse " > < /div >

< /body >

< /html >

服务器端（14-5.aspx ）：

<%@   Page   Language="C#"   ContentType="text/html"   ResponseEncoding="gb2312"   %>

<%@   Import   Namespace="System.Data"   %>

<%

if ( Request . HttpMethod   = =   " POST " )

Response . Write( " POST:   "   +   Request [ " firstName " ]   +   " ,   your   birthday   is   "   +   Request [ " birthday " ]);

else   if ( Request . HttpMethod   = =   " GET " )

Response . Write( " GET:   "   +   Request [ " firstName " ]   +   " ,   your   birthday   is   "   +   Request [ " birthday " ]);

%>

 

 

C  使用JQuery 的 $.ajax( ) 方法

客户端（14-6.html ）：

< html >

< head >

< title > $.ajax()方法 < /title >

<script language="javascript" src="jquery.min.js"></script>

< script   language = " javascript " >

function   createQueryString() {

/ / 必须两次编码才能解决中文问题

var   firstName   =   encodeURI(encodeURI($( " #firstName " ) . val())) ;

var   birthday   =   encodeURI(encodeURI($( " #birthday " ) . val())) ;

/ / 组合成对象的形式

var   queryString   =   " firstName= " + firstName + " &birthday= " + birthday ;

return   queryString ;

}

function   doRequestUsingGET() {

$ . ajax( {

type :   " GET " ,

url :   " 14-5.aspx " ,

data :   createQueryString(),

success :   function (data) {

$( " #serverResponse " ) . html(decodeURI(data)) ;

}

} ) ;

}

function   doRequestUsingPOST() {

$ . ajax( {

type :   " POST " ,

url :   " 14-5.aspx " ,

data :   createQueryString(),

success :   function (data) {

$( " #serverResponse " ) . html(decodeURI(data)) ;

}

} ) ;

}

</script>

< /head >

< body >

< h2 > 输入姓名和生日 < /h2 >

< form >

< input type = " text " id = " firstName "   / > < br >

< input type = " text " id = " birthday "   / >

< /form >

< form >

< input type = " button " value = " GET " onclick = " doRequestUsingGET(); "   / > < br >

< input type = " button " value = " POST " onclick = " doRequestUsingPOST(); "   / >

< /form >

< div id = " serverResponse " > < /div >

< /body >

< /html >

服务器端（14-5.aspx ）：

<%@   Page   Language="C#"   ContentType="text/html"   ResponseEncoding="gb2312"   %>

<%@   Import   Namespace="System.Data"   %>

<%

if ( Request . HttpMethod   = =   " POST " )

Response . Write( " POST:   "   +   Request [ " firstName " ]   +   " ,   your   birthday   is   "   +   Request [ " birthday " ]);

else   if ( Request . HttpMethod   = =   " GET " )

Response . Write( " GET:   "   +   Request [ " firstName " ]   +   " ,   your   birthday   is   "   +   Request [ " birthday " ]);

%>

$.ajax( options )方法的参数非常地多，涉及Ajax 的方方面面，需要自己多多参考和实践。

 

注意：如果需要传递中文数据，必须进行两次encodeURI( ) 编码。

 

作者： XuGang   网名：钢钢

出处： http://xugang.cnblogs.com