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()，且传递参数为对象的情况)

---

继续学习Asp.Net MVC 使用 Ajax(二)