1. Ajax

1.1 概述

1.1.1 介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

总结：
局部刷新-异步访问

1.1.2 Ajax原理介绍

1）同步:
当用户发起请求时,如果这时服务器正忙,那么用户处于等待的状态,同时不可以做其他的操作.

2）异步:
当用户发起请求时,如果遇到服务器正忙,这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通.

3）Ajax异步原理
3.1）常规同步的调用方式：
在这里插入图片描述
3.2）Ajax异步调用：

说明:
Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现.

在这里插入图片描述

1.2 Ajax的种类

以jQuery为例

1.2.1 get请求

/**
 * $.get(url地址,提交数据,回调函数,返回值类型)
 */
 $.get("/访问地址",function(result){
 }

1.2.2 post请求

在这里插入图片描述

1.2.3 $.ajax类型

在这里插入图片描述

1.2.4 补充

1）getJSON类型：
在这里插入图片描述

要求返回值必须为JSON

2）带参数的请求：
2.1）字符串拼接

/**
* 参数说明: 
 * 	语法: key=value&key2=value2....
 * 	例如: id=1&name=tom
 * 
 */
$.get("/findAjaxUser",'id=1&name=tom',function(result){
	console.log("ajax请求成功!!!")
})

2.2）JS对象

/**
* 参数说明: 
 * 	语法: {key:value,key2:value2.....}
 * 	例如: {id:1,name='tom'}
 * 
 */
$.get("/findAjaxUser",{id:1,name='tom'},function(result){
	console.log("ajax请求成功!!!")
})