ajax data传json数据_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实现方式后，再学剩下的两种实现方式真的很简单，不管学习前台还是后台的程序猿都需要会使用。多看，多用吧。