ajax详细

 

1.概述

　　 ajax（Asynchronous JavaScript and XML）异步的javascript和xml。

　　ajax的出现我觉得是纯粹为了满足日益发展的社会的需要，没有ajax之前，前台与后台的交互都是同步的，每次后台传回来的数据要想更新在前台界面上，都需要刷新界面，例如做一个登录功能，用户输入用户名和密码，传到后台验证，如果后台验证完毕之后传回账户名或密码错误，那么前台就要刷新界面，再提示出错误信息，这种用户体验太过于刺激，目前的用户绝对享受不了，于是，踏着轻快的步伐，ajax来了，第一个使用ajax的浏览器引擎是IE，是从IE5开始，没错，这个作为web开发的程序猿最仇恨的浏览器引领了好多新科技。这样一来，用户的体验直接爆表了。

 

 

2.ajax解释

　　ajax有两种实现方式，其实原理都是应用的javascript。第一种是原生的ajax，就是用原生的javascript实现的，这种方式应用的很少，但是能体现出ajax的实现原理，我在这里就不做过多的陈述了，有兴趣的小伙伴可以自己去查找一些资料。今天着重要说的是js的一个nb的封装库实现的ajax，没错，就是jqury，这个库实在是太好了，爱不释手啊，为什么这么多js的封装库，但是jquery最流行呢，因为它免费啊！免费的东西我们在用的时候，感觉到很爽，开个玩笑，jquery之所以流行主要的原因是因为它是一个轻量级的js封装库，而且封装的也非常好，但是也跟免费有一点关系。还有一些常用的js封装库，例如ReactJS、Angular、vue.js、Meteor、Ember.js。

　　jquery实现的ajax有三种表现形式：

　　 (1)$.ajax({...})

　　(2)$.get(...)

　　(3)$.post(...)

　　 没错，$就是jquery中的万能符号，以上是列出了三种实现方式，其实可以看出来，后面的两个是根据请求方式命名的，在请求方式中，有七种请求，get、post、delete、head、put、trace、options、connet，除了get和post之外，有的浏览器就不支持其它，这里就不说其它的实现方式了。

　　开整......

 

3.ajax的各种实现方式中参数的讲解

　　（1）$.ajax({...})

　　　　　　先来看一段代码

$(function () {
    $.ajax({
        url: "test.json",
        type: "get",
        cache: false,
        async: false,
　　　　 data: null,
        beforeSend: function (request) {
            console.log(request);
            console.log("请求之前");
        },
        complete: function (request, testStatus) {
            console.log("\n");
            console.log("请求完成");
            console.log(request);
            console.log(testStatus);
        },
        success: function (data,textStatus, request) {
            console.log("\n");
            console.log("请求成功");
            console.log(data);
        },
        error: function (request, textStatus, errorThrown) {
            console.log("\n");
            console.log("请求出错");
            console.log(request);
            console.log(textStatus);
            console.log(errorThrown);
        },
        dataType: "json",
        dataFilter: function (data, type) {
            console.log("\n");
            console.log("拦截成功");
            console.log("拦截的数据为："+data);
            console.log("拦截的数据类型为："+type);
        }
    })
});

　　　　　　这就是ajax请求的示例代码，可以看到，好像参数很多啊，没事，咱们慢慢来说

　　　　　 url：请求的地址，上面的代码是我模拟的json数据，单独挡在了test.json中，当我们向服务器进行请求时，把这个url换成对应的url就行，注意，url后面是一个字符串，我刚开始学习ajax的时候就是总忘写那对双引号。

　　　　   type：请求的类型，就是get请求还是post请求，当然，也可以为其它，但是前提是浏览器必须也得支持。默认为get。

　　　　   cache：请求时是否使用浏览器缓存的数据，默认为true，即开启缓存。当dataType为xml时，默认为false。

　　　　   data: 请求的数据，如果是get方式请求，就是拼接在url问号后面的参数，post请求就是在请求参数中的内容。

　　　　   async：是否开启异步请求，默认为true，我认为，把这个改为false的，都是脑袋里有炮，既然都用ajax了，寻求的就是异步的那种快感。

　　　　   beforeSend：这里的value为一个函数，就是当请求之前执行的函数，这个函数里有一个参数，就是XMLHttpRequest，这个是一些请求的信息，如果此函数返回false，此次请求就会被取消。

　　　　   complete：当请求处理完成之后（success执行完之后）执行的函数，参数为XMLHttpRequest和textStatus，第一个参数和之前的相同，第二个参数为请求的状态，即error或者success。

　　　　   success：请求成功执行的函数，参数为data、textStatus、XMLHttpRequest，data就是请求回来的数据。

　　　　   error: 当请求失败时执行的函数，参数为XMLHttpRequest， textStatus、errorThrown，error打印出来的信息就像是java抛出来异常的打印堆栈的信息。

　　　　   dataType：期望被请求方返回的数据类型，常见的有html、xml、json、jsoup、text、script。

　　　　   dataFilter：这个是拦截器，和servlet中的filter是一样的，回拦截到被请求方返回的数据，data就是被拦截的数据，而type就是dataType中填写的内容。

　　　　   关于第一种ajax的讲解就有目前这些，其实这里面的参数不知这些，但是我列举出来的都是一些常用的。

　　（2）$.get(...)

　　　　  这种ajax的实现方式就是将上一种的ajax进行了封装。看一下参数。

　　　　  $.get(url, data，success)。

　　　　  不多介绍了，和上面的参数是一样的，单数注意，这里的参数就不是对象了，就是一些类型的参数，回调函数等等。

　　（3）$.post(...)

　　　　直接看参数$.post(url, data, success)。

 

4.总结

　　ajax在处理这种异步交互的时候真的很好用，而且还特别灵活，当学会了$.ajax实现方式后，再学剩下的两种实现方式真的很简单，不管学习前台还是后台的程序猿都需要会使用。多看，多用吧。