刚刚学习Ajax 这里简单地对jquery的Ajax进行一下总结

刚刚学习Ajax 这里简单地对jquery的Ajax进行一下总结

1.概述
　　 ajax（Asynchronous JavaScript and XML）异步的javascript和xml，是JS 语言 和 服务端 交互的手段。
　　ajax的出现我觉得是为了满足日益发展的社会的需要，没有ajax之前，前台与后台的交互都是同步的，每次后台传回来的数据要想更新在前台界面上，都需要刷新界面。
优点：

1. 不需要插件的支持，原生 js 就可以使用
2. 用户体验好（不需要刷新页面就可以更新数据）
3. 减轻服务端和带宽的负担
   缺点：
4. 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
5. 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）

2.ajax的状态码
0 => 创建 ajax 对象成功
1 => 配置请求信息成功
2 => 响应已经回到浏览器
3 => 浏览器正在解析响应体
4 => 响应体解析完毕可以使用了
在一个 HTTP 请求的响应报文中的状态行会有一个响应状态码 100 ~ 199 表示连接继续 200 ~ 299 各种成功 300 ~ 399 重定向 400 ~ 499 客户端错误 500 ~ 599 服务端错误 100 ~ 199
1开头的一般我们看不到，因为表示请求继续
100： 继续请求，前面的一部分内容服务端已经接受到了，正在等待后续内容
101： 请求者已经准备切换协议，服务器页表示同意
200 ~ 299
2 开头的都是表示成功，本次请求成功了，只不过不一样的状态码有不一样的含义（语义化）
200： 标准请求成功（一般表示服务端提供的是网页）
201： 创建成功（一般是注册的时候，表示新用户信息已经添加到数据库）
203： 表示服务器已经成功处理了请求，但是返回的信息可能来自另一源
204： 服务端已经成功处理了请求，但是没有任何数据返回
300 ~ 399
3 开头也是成功的一种，但是一般表示重定向
301： 永久重定向
302： 临时重定向
304： 使用的是缓存的数据
305： 使用代理
400 ~ 499
4 开头表示客户端出现错误了
400： 请求的语法服务端不认识
401： 未授权（你要登录的网站需要授权登录）
403： 服务器拒绝了你的请求
404： 服务器找不到你请求的 URL
407： 你的代理没有授权
408： 请求超时
410： 你请求的数据已经被服务端永久删除
500 ~ 599
5 开头的表示服务端出现了错误
500： 服务器内部错误
503： 服务器当前不可用（过载或者维护）
505： 请求的协议服务器不支持

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

jquery中ajax的各种实现方式

(1)$.ajax({…})

(2)$.get(…)

(3)$.post(…)

在这里插入代码片
$(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中填写的内容。
（2）$.get(…)
　　　　 这种ajax的实现方式就是将上一种的ajax进行了封装。看一下参数。
　　　　 $.get(url,data，success)。不多介绍了，和上面的参数是一样的，单数注意，这里的参数就不是对象了，就是一些类型的参数，回调函数等等。\ast \ast （3）$.post(…)**
　　　　直接看参数$.post(url, data, success)。

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