jquery与ajax的应用

jquery与ajax的应用

ref url: http://www.cnblogs.com/talk/archive/2011/03/29/FB.html

ajax的不足 

 

1. 各个浏览器对XMLHttpRequest对象的支持度不足(兼容性问题)

2. 破坏浏览器的前进,后退功能。

3. 对搜索引擎支持不足。

4. 调试工具支持不足。

 

 

XMLHttpRequest对象的属性和方法

1.readyState属性

状态：0 代表未初始化。

        1 代表准备发送。

        2 已发送但还没收到响应

        3 正在接收

        4 接收完成

2.responseText属性

    包含客户端接收到的HTTP响应的文本内容。

    当readyState=4时，responseText才包含完整的响应信息。

    当readyState=3时，responseText包含未完整的响应信息。

    当readyState<3时，responseText为空字符串。

 

3.responseXML属性

    当readyState=4,并且响应头部的Content-Type的MIME类型为XML(text/xml或application/xml)时,该属性有值并且被解析成一个XML文档。

    其它情况为null,包括回传的XML文档不良或未完成响应回传。

 

4.status及statusText属性（描述http状态代码,及代码文本）

    当readyState>2,才能访问，否则出现异常。

5.onreadystatechange事件

     当readyState属性发生变化时触发此事件，用于触发回调函数。

 

6.open方法

     open(method, uri, async, username, password) 用来进行初始化工作

     返回值：得到一个包含send()方法的对象

     method：必须。用于指定HTTP方法如GET,POST,PUT....。按规定必须大写。

     uri：请求发送到服务器相应的URI.自动解析成绝对地址。

     async：请求是否异步，默认为true.

     调用open后，readystate状态为1.

 

7.send方法

     调用open 方法后，可以调用send()方法来发送请求。

     当open 中async=true时，send()方法调用后立即返回，否则会中断直到请求返回。

     send(data)

     data：可选。此处还有疑问。。

 

8.abort()方法

     该方法可以暂停一个HttpRequest请求或者HttpResponse的接收，并且将XMLHttpRequest的状态设置为初始化。

 

 

9.setRequestHeader(header,value)方法

     该方法用来设置请求的头部信息。在调用open()后调用这个方法。否则将得到一个异常。

10.getResponseHeader()方法

      当readystate>2时，该方法用来检索响应的头部信息。否则返回一个空字符串。

      getAllResponseHeaders()方法返回所有的HttpResponse头部信息。

 

 一个XMLHttpRequest例子

View Code

< script type = " javascript/text " >
var  xmlHttp
// 判断是否IE
if (window.ActiveXObject){
   try {
       xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
   } catch (e){
   xmlHttp = false ;
   }
}
else {
    try {
    xmlHttp = new  XMLHttpRequest();
} catch (e){
    xmlHttp = false ;
}
}

if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0 ){
   xmlHttp.open( " GET " ,  " test.php? " content = " +content,true);
   //设置回调函数
   xmlHttp.onreadystatechange=recall();
   xmlHttp.send(null);
}

function recall(){
 if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    xmlResponse = xmlHttp.responseXML;
    //xml处理
    myXml = xmlResponse.documnetElement;
    content = myXml.firstChild.data;
    //处理部分
   }
}else{
  alert(xmlHttp.statusText);
}
}


</script>

   

 jquery中的Ajax

 

 

1.load(url,data,function(

responseText, textStatus, XMLHttpRequest

){}) 方法(一般用于加载静态html文件到dom结点，是jquery对象的函数)

 用途：用于载入远程的HTML方法并插入到dom中。

 url:目标url地址。格式 "url"或者"url selector"。可以起筛选作用。

 data:可选。格式{name: "value",name: "value"}，如果没有则使用get方法，如果有使用post方法。

 callback:可选。无论请求成功或者失败都会调用。

     responseText：返回的内容。

     textstatus：返回状态

     XMLHTTPReques：XMLHTTPReques对象

实例：

test.html

< div  class ="comment" >
< h6 > 李四： </ h6 >
< p  class ="para" > 地板. </ p >
</ div >
< div  class ="comment" >
< h6 > 张三： </ h6 >
< p  class ="para" > 沙发. </ p >
</ div > 

 新建一个test2.html

View Code

< input  type ="button"  id  ="send"  value ="Ajax获取" />
< div  class ="comment" > 已有评论： </ div >
< div  id ="resText" ></ div >

 jquery代码如下：

View Code

$( function (){
  $( " #send " ).click( function (){
     $( " #resText " ).load( " test.html " );
});
});

 $(function(){}); = jQuery(function(){}); =  jQuery(document).ready(function(){})}); 在dom加载完成后执行的代码。

 

 

 

2.两个全局方法

 $.get(url,data,function(){data,textStatus},type) ;

 $.post(url,data,function(){data,textStatus},type) ;

 用途：当需要传递一些参数给服务器中的页面时使用。

 url:目标url地址

 data:可选。格式{name: "value",name: "value"}，会作为QueryString附加到请求的url中。

 callback:可选。只有当Response返回状态为success才调用。

       data：返回的内容，可以是xml,json,html片段。

      textstatus：返回状态success,error,notmodified,timeout
type:可选。 客户端请求的类型xml,json,html等。

 $.get()与$.post区别

1. 请求参数区别。

2. 数据大小的区别。

3. 安全性。

实例：

 

View Code

// $.get html文本
$( " #send " ).click( function (){
  $.get( " get1.php " ,{username : $( " #username " ).val(),content : $( " #content " ).val()}, function (data,textStatus){$( " #resText " ).html(data);})
 });

// $.get xml文本
$ function (){
 $( " #send " ).click( function (){
  $.get( " get2.php " ,{username : $( " #username " ).val(),content : $( " #content " ).val()}, function (data,textStatus){
  var  username  =  $(data).find( " comment " ).attr( " username " );
var  content  =  $(data).find( " comment content " ).text();
var  textHtml  =   " <div class='comment'><h6> " + username + " :</h6><p class='para'> "
+ content + " </p></div> " ;
$( " $resText " ).html(textHtml);
});
 })
}

// $.get json文本
$ function (){
 $( " #send " ).click( function (){
  $.get( " get2.php " ,{username : $( " #username " ).val(),content : $( " #content " ).val()}, function (data,textStatus){
  var  username  =  data.username;
var  content  =  data.content;
var  textHtml  =   " <div class='comment'><h6> " + username + " :</h6><p class='para'> "
+ content + " </p></div> " ;
$( " $resText " ).html(textHtml);
});
 }), " json "
}