Ajax最常用法介绍

最新推荐文章于 2021-09-03 09:34:33 发布

cwangjie11nic

最新推荐文章于 2021-09-03 09:34:33 发布

阅读量364

点赞数

分类专栏： javaScript 文章标签： javaScript Ajax Ajax的最常用法介绍 jQuery中Ajax的最常用格式 Ajax介绍

本文链接：https://blog.csdn.net/cwangjie/article/details/81141623

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文只介绍jQuery中Ajax的最常用格式，如果你想了解原生的Ajax介绍，请移步廖雪峰关于Ajax的介绍。

1、什么是Ajax

Ajax是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

怎么读？我们大多数程序员习惯读成：阿贾克斯。因为这是个缩写，我觉得按大部分人的读法就行了，毕竟不是一个英文单词。这里采用广泛的、识别度高的读法（关于读法我有很多想法，这里不展开了）。

Ajax是用于：前端页面向后端接口请求数据，然后获得响应。

2、为什么要用Ajax

这里我们要比较一下，如果不用Ajax会怎么样？如果不用Ajax，那我们就用form表单的形式发送请求到服务器。如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就可以用Ajax发送这个新请求。可以在同一个页面中发送多个Ajax请求，而且互不干扰，这就实现了局部刷新。

3、jQuery中Ajax的最常用格式

jQuery中Ajax的用法，是目前Ajax所有用法中最常见的，而且，在使用其他js框架的时候，比如Vue，很多人也习惯用jQuery中Ajax的用法，因为真的太好用了。不过用的时候，一定要先引入jQuery，文末提供了 jquery-3.2.1.min.js 的下载链接。

下面是本文的重点：

alert(1);                       //这里是为了说明async属性，见下面介绍
jQuery.ajax({
	url:"请求服务器的接口地址",
	type:'post',                //也可以是get,post最常用
	data:{                      //data里面就是请求这个url后面带的参数列表
		'name':'lily',
            'sex':'girl',
            'age':12
	},
        async:true,                 //基本都是默认不写（true），这里是为了说明async属性，见下面介绍    
	dataType:'json',            //在现在的项目中，json格式也是最常用的
	success:function(data){     //data就是服务器返回的数据，一般都是json格式
		alert('成功！');        //这里写请求成功之后你自己处理数据的代码
	},
	error:function(){
		alert('错误！');        //这是请求错误的时候，你自己处理的代码
	}
});
alert(2);                      //这里也是为了说明async属性，见下面介绍

3.1 请注意书写的格式

jQuery.ajax({})中，都是json格式key-value。其中value可以是字符串，如url；可以是布尔值，如async；也可以是一个json，如data；也可以是函数，如success；当然还可以是数字。

3.2 关于url、type、data等后面的内容，我注释写的很清楚，所以这里不说了，除了async。

3.3 关于Ajax中的async

之所以说async属性，是为了让我们更好的理解什么是异步，为啥可以实现局部刷新。

当async值为true，也就是说可以异步请求，那么当程序执行完alert(1)之后，可以形象的理解，程序会生成一个分支，这个分支去执行Ajax中的内容，主程序继续往下执行alert(2)，所以当async值为true时，我们看到弹出1后，立马弹出2。

当async值为false，也就是说不可以异步请求，那么当程序执行完alert(1)之后，程序继续向下去执行Ajax中的内容，等执行完Ajax中的内容后，才会继续往下执行alert(2)，所以当async值为false时，我们看到弹出1后，要等Ajax执行完，才能弹出2。

学过后端语言的朋友可能会说，当async值为true时，不就是执行两个线程吗？我说：你是对的！多线程就是同一个程序中多个执行路径。Ajax确实实现了多线程。