jQuery基础——Ajax

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这次讲讲Ajax。

Ajax简介

Ajax，全称“Asynchronous JavaScript and XML”，也就是“异步的JavaScript和XML”。

Ajax核心是通过JS的XMLHttpRequest对象，以异步的方式向服务器发送请求数据，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据操作。

Ajax的优势：能够刷新指定的页面区域，而不是刷新整个页面，从而减少客户端和服务器端之间传输的数据量，提高页面速度，提高用户体验。

Ajax方法

Ajax下面有很多方法，下面展开详细说说。

load()方法

这个方法有啥用呢？

解析出Ajax请求中服务器返回的数据，然后将其插入到指定的元素中。

语法：$().load(url, data, fn)

url是Ajax请求地址，是必选参数；data表示发送到服务器的数据，是可选参数；fn表示请求完成之后的回调函数，是可选参数。

由于浏览器安全限制，大多数的Ajax请求遵循着“同源策略”，也就是说跨域请求会被拦截——Ajax请求无法从不同的域、子域或协议中获取数据。

普通情况

一般情况下，load()方法都是用于加载某一个文件的内容，例如：txt、html、php文件。

传递数据

通常情况下，我们可以使用load()方法向服务器发送数据，也就是通过data向服务器发送数据。

如果data省略，就会采用get()方式向服务器发起请求；如果data不省略，就会采用post()方法向服务器发起请求。

注意：data一般是“键值对”的格式。

get和post的区别：

一般来说，get和post都能够向服务器获取数据。

但是，post方法一般更加安全，而get方法安全性略低。

回调函数

load()方法中的第三个参数就是一个回调函数，表示请求完成之后执行的代码。

语法：

$().load(url, data, function(response, status, xhr) { ... })

response表示“请求后返回的内容”，status表示“请求状态”，xhr表示“XMLHttpRequest对象”。

特别注意

1.在load()方法中，不管Ajax请求是否成功，只要请求完成了，回调函数（fn）都会被触发。

2.load()方法一般只会用到第一个，很少会用第二、第三个。

3.load()方法一般用来向服务器请求静态的数据文件。在实际开发中，如果需要传递参数给服务器，应该使用$.get()方法、$.post()方法、$.ajax()方法。

$.get()方法

作用：向服务器发送请求获取数据。

语法：$.get(url, data, fn, type)

注意，这里的方法调用的对象，是jQuery，而不是通过选择器获取到的JQ对象。

url，必选参数，请求地址。

data，可选参数，请求数据。

fn，可选参数，请求成功后的回调函数。

type，可选参数，服务器返回的内容格式。

注意，这里的fn是请求成功后的回调，不是请求完成后的回调。

参数type返回的内容格式：text、html、xml、json、Script、default。

$.post()方法

上面说过，post和get方法的区别其实不大，这里再说一下区别：

get方法安全性低，不适合大数据量。

post方法则没有以上问题。

OK，下面开始介绍$.post()方法。

语法：$.post(url, data, fn, type)

参数同get()方法，这里不再重复。

$.getJSON()方法

获取服务器中JSON格式的数据。

语法：

$.getJSON(url, data, function(data) { ... })

$.getJSON()是一个全局方法，是直接定义在JQ对象下的方法。

url不作解析，重点说说data。

可以看出一共有两个data，只不过第一个data是getJSON()方法里面的一个参数，而第二个data则是回调函数里面的参数。

第一个data跟之前的是一样的，都是发送到服务器端的数据，数据也是按照键值对的形式来传递的；第二个data表示请求成功后返回的数据。

$.getScript()方法

这是一个用于动态加载JS的方法。

当网站需要加载大量的JS文件时，动态加载JS是一个比较好的优化性能手段。

语法：$.getScript(url, fn)

参数解读参考上述文案。

优势：

异步跨域加载JS文件。

需要的时候再加载，减少服务器和客户端的负担，加快页面响应。

第二个优点是不是跟页面懒加载很像？

疑问：每次执行调用JS文件的时候，是不是都回去请求一次这个JS文件？这不是压力更大吗？

其实$.getScript()方法是对Ajax()方法的一个封装，可以使用Ajax()方法的缓存来将http装填从200改为304，从而使用客户端的缓存。

$.ajaxSetup({

        cache: true

})

这个ajax()方法是啥？

$.ajax()方法

其实上面介绍的五种方法都是纠结$.ajax()方法实现的，只不过这些方法性能更好而已（因为ajax()方法封装了很多功能）。

语法：$.ajax(options)

这里的options在之前说过了，有人想起来吗？

这个options其实就是一个对象，内部采用键值对的形式传值。

常用的参数：

使用$.ajax()代替$.getJSON()：

$.ajax({

        url: "getJSON()中的URL",

        type: "get",

        dataType: "json",

        success: function(data) { ... }

})

是不是很麻烦？

所以说，术业有专攻。

写在最后

短短两千字，是无法表达出ajax的魅力的，如果需要深究，建议多去看书籍。

一些基础的知识也没有提到，没有什么基础学起来是比较费劲的。