jquery与ajax一起,JQuery：Ajax

最底层最全面JQuery实现

核心参数：url，ajax请求的网址

一系列的callback函数，按执行顺序依次为：

beforeSend：$.ajax()方法调用之后，ajax请求发送之前，一般用于提示或防重复提交

success：ajax请求成功完成，客户端获得请求结果

error：服务器端未能成功返回请求结果。推荐总是使用，弹出错误提示(尤其是开发调试时)

complete：无论成功失败，Ajax请求完成之后，通常用于恢复DOM状态

以上详见下文

其他一些参数，按使用频率由高到低排列：

method/type：GET/POST/PUT/DELETE……

data：提交到服务器的对象

contentType：request的类型，默认JQuery会自行转换，也就是说无论url参数格式的字符串，还是JSON格式的对象，都无须特别声明

dataType：response的类型，默认由JQuery自动解析，可指定为：text/html/json……

cache：是否缓存请求结果，默认true

async：是否异步，默认为true，强烈不推荐更改为false

success中的data

如果返回的是JSON，直接将其作为对象使用，比如：

success: function (data) {

console.log('name：' + data.name);

}

如果返回的是HTML片段，data被视为string类型。

可以直接将其作为html()内容嵌入到当前页面：

success: function (data) {

$('div#ajaxContainer').html(data);

}

但是，有时候我们可能需要在返回的HTML片段上绑定事件等……这时候，有一个小技巧：

var $data = $(data); //直接将data转换成JQuery对象

然后根据HTML片段的结构：

如果data是闭合的、有根节点的：

@DateTime.Now

我是board内容页

可以使用find()查找data中的HTML元素

$data.find('h1').click(function () {

否则，比如：

@DateTime.Now

我是board内容页

只能使用siblings()，感觉好像有点奇怪？

$data.siblings('h1').click(function () {

@想一想@：不把data转换成JQuery对象，直接html()填充，然后绑定事件，行不行？

注意避免一些常见的错误：(演示)

将事件绑定写在$.ajax()之外：因为Ajax是异步执行的

或者success()

分离data和$data

有关error

和原生的JavaScript处理Ajax不同，

error是当服务器返回错误代码信息时触发，比如：

写错了url，404

服务器宕机了没响应

服务器bug抛异常

error的回调函数可以有三个参数：

jqXHR：核心

textStatus：error code对应的文本描述

errorThrown：字符串

建议总是将error处理函数附上

服务器端：

区分Ajax和普通HTML请求

错误页面重定向500的statusCode

禁止重复提交

a标签不能disabled

回调函数中的this

注意：异步和callback。比较这两种写法的区别：

alert('加载开始！');

$('div').load("/WebApi/GetLatestChats", function (data) {

alert('加载中……');

});

alert('加载结束！');

三个常用的Ajax回调函数参数：responseText, textStatus, jqXHR(XmlHttpRequest)

console.log('responseText:' + responseText);

console.log('textStatus:' + textStatus);

console.log('jqXHR:' + jqXHR);

$.get()：获取数据，自定义callback函数处理

$.get("/Problem/Posts", function (data) {

//等同于$("#comments").load("/Problem/Posts");

//$("#comments").html(data);

//还可以做其他处理

alert(data);

})

$.post()：同get，但使用POST发起请求，通常会要求带data。通常我们使用：

把testform表单里面的所有数据序列化，效果类似于表单提交

$("#formId").serialize()

获取form表单数据，或者使用自定义的对象格式：

//传到后台Model绑定成IList

{ 'contents[]': ["oh, my God", "how smart!"] }

简写

get()

post()

原生JS代码写Ajax

//获得ajax请求的核心对象

var xmlhttp = new XMLHttpRequest();

//GET: 请求方法，还可以是POST等

//"/Problem/Posts"：Ajax请求的地址

//true: 异步执行

xmlhttp.open("GET", "/Problem/Posts", true);

//参数可选，通常POST时使用

xmlhttp.send("name=fg&password=1234");

通过xmlhttp.responseText可以获取请求返回数据，但因为Ajax的异步执行，我们需要使用特定事件的callback函数，如：

xmlhttp.onreadystatechange = function () {

//readyState标记XMLHttpRequest的状态

//0: 请求未初始化

//1: 服务器连接已建立

//2: 请求已接收

//3: 请求处理中

//4: 请求已完成，且响应已就绪

if (xmlhttp.readyState == 3) {

alert(xmlhttp.readyState + ":" + xmlhttp.responseText);

}

}

xmlhttp.onloadend = function () {

document.getElementById("comments").appendChild(xmlhttp.responseText);

}

xmlhttp.addEventListener("load", function () {

console.log(this.responseText);

})