Asp.Net MVC 使用 Ajax(一)
Ajax
简单来说Ajax是一个无需重新加载整个网页的情况下，可以更新局部页面或数据的技术（异步的发送接收数据，不会干扰当前页面）。
Ajax工作原理
Ajax使浏览器和服务器之间多了一个Ajax引擎作为中间层。通过Ajax请求服务器时，Ajax会自行判断哪些数据是需要提交到服务器，哪些不需要。只有确定需要从服务器读取新数据时，Ajax引擎才会向服务器提交请求。
Jquery中的Ajax
JQuery 对 Ajax 做了大量的封装，不需要去考虑浏览器兼容性，使用起来也较为方便。
jquery对Ajax一共有三层封装。
- 最底层：
$.ajax()- 第二层：
.load()、$.get()和$.post()- 最高层：
$.getScript()和$.getJSON()方法
$.Ajax()
$.Ajax()是所有Ajax方法中最底层的方法，其他的都是基于$.Ajax()方法的封装，该方法只有一个参数JQueryAjaxSettings（功能键值对）。
$.Ajax参数JQueryAjaxSettings介绍：
| 参数 | 类型 | 说明 |
|---|---|---|
| url | String | 请求的地址 |
| type | String | 请求方式：POST 或 GET，默认 GET |
| timeout | Number | 设置请求超时的时间（毫秒） |
| data | Object或String | 发送到服务器的数据，键值对或字符串 |
| dataType | String | 从服务器返回的数据类型，比如 html、xml、json 等 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数 |
| complete | Function | 请求完成后调用的回调函数 |
| success | Function | 请求成功后调用的回调函数,先执行success再执行complete |
| error | Function | 请求失败时调用的回调函数，先执行error再执行complete |
| global | Boolean | 默认为 true，表示是否触发全局 Ajax |
| cache | Boolean | 设置浏览器缓存响应，默认为 true。如果 dataType类型为 script 或 jsonp 则为 false。 |
| content | DOM | 指定某个元素为与这个请求相关的所有回调函数的上下文。 |
| contentType | String | 指 定 请 求 内 容 的 类 型 。 默 认 为application/x-www-form-urlencoded。 |
| async | Boolean | 是否异步处理。默认为 true，false 为同步处理 |
| processData | Boolean | 默认为 true，数据被处理为 URL 编码格式。如果为 false，则阻止将传入的数据处理为 URL 编码的格式。 |
| dataFilter | Function | 用来筛选响应数据的回调函数。 |
| ifModified | Boolean | 默认为 false，不进行头检测。如果为true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的。 |
| jsonp | String | 指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。 |
| username | String | 在 HTTP 认证请求中使用的用户名 |
| password | String | 在 HTTP 认证请求中使用的密码 |
| scriptCharset | String | 当远程和本地内容使用不同的字符集时，用来设置 script 和 jsonp 请求所使用的字符集。 |
| xhr | Function | 用来提供 XHR 实例自定义实现的回调函数 |
| traditional | Boolean | 默认为 false，不使用传统风格的参数序列化。如为 true，则使用 |
代码示例：
$('button').click(function(){
$.ajax(
{
type:'post',
url:'test',
data:{
url:'hello',
},
dataType:'json',
success:function(data,stutas,xhr){
alert(data);
},
error:function(xhr, textStatus, data)){
alert(data);
}，
complete:function(xhr,textStatus){
alert(textStatus);
}
}
)
});
$.Ajax的回调函数介绍：
- success
Function( Anything data, String textStatus, jqXHR jqXHR )
请求成功后执行的回调函数
| 参数 | 类型 | 说明 |
|---|---|---|
| data | anything | 从服务器返回的数据，并根据dataType参数类型处理后的数据（默认是json） |
| textStatus | string | 描述状态的字符串 |
| jqxhr | jqXHR | XMLHTTPRequest对象 |
- error
Function( jqXHR jqXHR, String textStatus, String errorThrown )
请求失败是执行的回调函数
| 参数 | 类型 | 说明 |
|---|---|---|
| errorThrown | string | HTTP状态的文本部分 |
| textStatus | string | 描述错误信息的字符串 |
| jqxhr | jqXHR | 描述发生错误类型的一个字符串 和 捕获的异常对象 |
- complete
Function( jqXHR jqXHR, String textStatus )
请求完成后执行的回调函数，不管是成功还是失败都执行
| 参数 | 类型 | 说明 |
|---|---|---|
| errorThrown | string | HTTP状态的文本部分 |
| textStatus | string | 描述请求状态的字符串 |
| jqxhr | jqXHR | XMLHTTPRequest对象 |
$.load()
从服务器获取数据并且将返回的HTML代码插入至匹配的元素中。
$(’
Element’).load(url,data,success(responseText,textStatus,XMLHttpRequest))
| 参数 | 类型 | 说明 |
|---|---|---|
| url | string | 必须 请求地址 |
| data | Json或者string | 可选 请求数据 如果是json该load方法是post请求，默认是get请求 |
| success | function | 当请求成功后执行的回调函数 |
| responseText | string | 获得字符串形式的响应数据 |
| textStatus | string | 文本方式返回HTTP状态码 |
| XMLHttpRequest | Object | xhr对象，有多种属性 |
$ .get()和$.post()
.load()一般在获取静态资源时调用，$.get()和$.post()方法在需要和服务器交互数据时调用。
$.get() 方法通过 HTTP GET 请求载入信息。
这是$.ajax GET请求的简写方式。请求成功时可调用回调函数。
$.get(url,data,success(response,status,xhr),dataType)
使用$.get()从服务端获取数据-代码示例
定义model
public class PersonViewModel
{
public int PersonID { get; set; }
public string Name { get; set; }
public string PhoneNum { get; set; }
public bool IsMarried{get;set;}
}
定义Controller Action
public class MyAjaxController : Controller
{
public JsonResult PersonList()
{
IList<PersonViewModel> persons = new List<PersonViewModel>();
for (int i = 0; i < 10; i++)
{
persons.Add(new PersonViewModel() { Name = "name", IsMarried = false, PhoneNum = "1234" + i });
}
return Json(persons,JsonRequestBehavior.AllowGet);
}
}
定义View
$.get('@Url.Action("PersonList", "MyAjax")',function (result) {
$.each(result, function (index, person) {
$('#myDiv').append('<p>Id: ' + person.PersonID + '</p>' +
'<p>Name: ' + person.Name + '</p>');
});
});
//在Jquery1.5版本后，新增了一些事件，可以更好的处理不同结果。
$.get('@Url.Action("PersonList", "MyAjax")')
.done(function (data) {
$.each(data, function (index, person) {
$('#myDiv').append('<p>Id: ' + person.PersonID + '</p>' +
'<p>Id: ' + person.Name + '</p>');
});
})
.fail(function (data) {
alert(data);
});
$.post() 方法通过 HTTP POST 请求从服务器载入数据。
$.post(url,data,success(data, textStatus, jqXHR),dataType)
使用$.post()方法向服务端发送数据-代码示例
定义一个Action
[HttpPost]
public JsonResult ToPersonList(IEnumerable<PersonViewModel> persons)
{
if (persons != null)
return Json(true);
else return Json(false);
}
定义一个View
<script>
var results = { persons : [{ "PersonID": "1", "Name": "Manas" },
{ "PersonID": "2", "Name": "Tester" }] };
$.post('@Url.Action("ToPersonList","MyAjax")',results, function (data) {
alert(data)
});;
//同样也可以使用Jquery1.5版本的新的事件
$.post('@Url.Action("ToPersonList","MyAjax")', results)
.done(function (data) {
alert(data);
})
.fail(function (data) {
alert(data);
})
.always(function (data) {
alert(data);
})
</script>
$.get() $.post()方法都是四个参数，前面三个参数和$.load()一样，最后一个参数dataType:服务器返回的数据格式：xml、html、script、json、jsonp和text。只有第一个参数是必须的，其他都可以为空。
$.get() $.post()都是$.ajax()的一个简写封装，都是只能回调success状态，error，和complete不能被回调。但是在jquery1.5版本上，新加了jqXHR.done() (表示成功), jqXHR.fail() (表示错误), 和 jqXHR.always() 事件，可以实现不同状态的回调。
表单序列化
如果我们有一个复杂的表单，一个一个获取表单数据是一个很琐碎的事。jquery提供了一个表单的序列化方法serialize()，会智能的获取指定表单内的所有元素（包括单选框，复选框，下拉列表等）把表单内容序列化为字符串。此外serializeArray()方法可以把数据整合为键值对的json对象。
如果我们需要多次调用$.ajax方法，并且很多参数都相同，可以使用$.ajaxSetup()方法，它会把一些公共的参数预先设置好，不用每次都设置。
$('form input[type=button]').click(function () {
$.ajaxSetup({
type : 'POST',
url : 'test',
data : $('form').serialize()
});
$.ajax({
success : function (response, status, xhr) {
alert(response);
});
});
在使用 data 属性传递数据的时候，如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式。
(主要是针对无法直接使用表单序列化方法.serialize()，且传递参数为对象的情况)