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({...})
先来看一段代码
![c5c57b0e7655238b83e164c07c0ced75.gif](https://i-blog.csdnimg.cn/blog_migrate/63815649a46666ba0db5177537936850.gif)
$(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); } }) });
![c5c57b0e7655238b83e164c07c0ced75.gif](https://i-blog.csdnimg.cn/blog_migrate/63815649a46666ba0db5177537936850.gif)
这就是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实现方式后,再学剩下的两种实现方式真的很简单,不管学习前台还是后台的程序猿都需要会使用。多看,多用吧。