JQuery 1.4 中的Ajax难点浅析

用$.ajax()时我设置了超时时间为3秒:

1.load()方法

此篇文章旨在记录一些不常使用的便捷功能:

复制代码 代码如下:

(1)load()方法是jquery中最为简单和常用的ajax方法,能远程载入html代码并插入DOM中,它的结构为:

  1. JQ版的Ajax传值写法

$.ajax({
url: “ajaxTable1.aspx”,
cache: false,
error: function(XMLHttpRequest, textStatus, errorThrown) {
//
},
success: function(html) {
//
},
timeout: 3000
});

load(url[,data] [,callback])

ajaxTable1.aspx页面中我通过Thread.Sleep(1000 * 5);
使页面延迟5秒后再继续执行,所以ajax请求会超时,但是此刻会报“错误:
对象不支持此操作”,开始以为自己的脚本有问题,但是找了半天没有发现错误,最后换了JQuery-1.3.1后错误消失,代码正常运行。看来新版本还不稳定。

laod()方法的参数解释

//旧版本的JQ缩写Ajax的写法为
$.ajax({
   data://获取数组的变量
   type://传值方式post或get
   url://传值地址
   contentType:主要设置你发送给服务器的格式
   dataType:设置你收到服务器数据的格式。
   success(data){ 成功时执行的内容 },
   error(data){ 失败时执行的内容 }
});
参数名称 类型 说明
url Sting 请求html页面的URL地址
data[可选] Object 发至服务器的key/value数据
callback[可选] Function 请求完成是的回调函数,无论请求成功或失败

而在新版的写法中,已经可以简化到不用写这么多参数,一条语句就可以搞定,是不是很方便

(2)筛选载入的html文档

  //get方式
  $.post(url:传值地址,{data:传值的变量},function(data){ 成功时执行 },error(data){ 失败时执行 }');
  //post方式
  $.post(url:传值地址,{data:传值的变量},function(data){ 成功时执行 },error(data){ 失败时执行 }');

load()方法的URL参数的语法结构为:“url
selector
”,注意:url和选择器之间有空格。

另外:
在 jquery 的 ajax 中,
contentType都是默认的值:application/x-www-form-urlencoded,这种格式的特点就是,name/value
成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如:
wwwh.baidu.com/q?key=fdsa&lang=zh
这是get , 而 post 请求则是使用请求体,参数不在 url
中,在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
键值对这样组织在一般的情况下是没有什么问题的,这里说的一般是,不带嵌套类型JSON,也就是
简单的JSON,形如这样:

例如:

{
    a: 1,
    b: 2,
    c: 3
}

$(“#restext”).load(“test.html .para”);

但是在一些复杂的情况下就有问题了。 例如在 ajax 中你要传一个复杂的 json
对像,也就说是对象嵌数组,数组中包括对象,兄果你这样传:

(3)传递方式

{
data:{
      a: [{
          x: 2
       }]
    }
}

load()方法的传递方式是根据参数data来自动指定。如没有参数传递,则采用GET方法传递,反之,则自动转换为POST方式。

这个复杂对象, application/x-www-form-urlencoded
这种形式是没有办法将复杂的 JSON
组织成键值对形式(当然也有方案这点可以参考)
,你传进去可以发送请求,但是服务端收到数据为空, 因为 ajax
没有办法知道怎样处理这个数据。

//无参数出传递,则是GET方式

其实http 还可以自定义数据类型,于是就定义一种叫 application/json
的类型。这种类型是 text , 我们 ajax 的复杂JSON数据,用
JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse
进行还原就行了,这样就能处理复杂的对象了。

$(“#resText”).load(“test.php”,function(responseText,textStatus,XMLHttpRequest){

$.ajax({
    dataType:'json',
    contentType:'application/json',
    data: JSON.stringify({a: [{b:1, a:1}]})
})

//回调函数,必须在加载完成才能继续操作

alert(responseText);//请求返回的内容

alert(textStatus);//请求的状态:success,error,notmodified,timeout4种

alert(XMLHttpRequest);//XMLHttpRequest对象

})

//则有参数出传递,则是post方式

$(“#resText”).load(“test.php”,{name:”rain”,age:”22″},function(responseText,textStatus,XMLHttpRequest){

//回调函数,必须在加载完成才能继续操作

})

2.$.get()方法和$.post()方法

load()方法通常用来从WEB服务器上获取获取静态的数据文件,然而这并不能体现AJAX的全部价值。在项目中,如果需要传递一些参数给服务器的页面,那么可以使用$.get()或者$.post()方法或$.ajax()方法。 

* *

(1)$.get()方法是jquery中最为简单和常用的ajax方法,能远程载入html代码并插入DOM中,它的结构为:

$.get(url[,data]
[,callback]
 [,type])

$.get()方法的参数解释

参数名称 类型 说明
url Sting 请求html页面的URL地址
data[可选] Object 发送至服务器的key/value数据会作为JqueryYString附加到请求URL中
callback[可选] Function 请求成功时回调函数(只有当党Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法

type[可选] String 服务器端返回的内容格式,包括xml,html,script,json,text和_default

(2)使用参数

首先,需要确认请求页面的URL地址,代码如下

$(“#resText”).click(function(){

$.get(“get.php” ,{参数},callback)

})

然后,在提交之前,需要获取“姓名”和“内容”的值作为data参数传递给后台。

代码如下

$(“#resText”).click(function(){

$.get(“get.php” ,{

  username:$(“#username”).val();

  content:$(“#content”).val();

},function(data,textStatus){//只有当党Response的返回状态是success才调用该方法

//data    //请求返回的内容,可以是xml文档,json文件,html片段等

//textStatus    //请求的状态:success,error,notmodified,timeout4种

})

})

相关文章