jQurey中ajax的简单介绍及使用

jQurey中ajax的简单介绍及使用

JQurey概述
jQurey是一款js框架，封装了JS操作，简化开发，提高开发效率
jQuery框架也是JS代码写出来的，就是一个JS文件
由第三方厂商做出来的，免费开源。
提供了大量的方法，以前需要编写多行代码的功能，现在一行代码就可以实现
程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。

AJAX概述
AJAX是一种异步请求技术，浏览器和服务器并行操作，即浏览器是通过页面向后台发送数据，而不是以表单方式提交给服务器。特点是用户在使用过程中感受不到浏览器已经向后台发送数据，并且已经返回数据。

常用在注册账号时提示该账号已注册，搜索框的自动补全，页面局部刷新等。

工作流程

1. 用户在浏览器由JS创建一个XMLHttpRequest对象
2. 所有的请求由这个XMLHttpRequest对象发送给服务器
3. 在服务器处理数据，并返回数据
4. 在回调函数中得到从服务器返回的数据，使用HTML和CSS语言进行渲染

JQurey大大的简便了ajax的异步请求开发

语法	说明
$.get(url, [data], [callback], [type])	传统的get方法异步访问服务器
$.post(url, [data], [callback], [type])	传统的post方法异步访问服务器
$.ajax(url, [settings])	参数最全的ajax的访问方法
$.get(url, [settings])	JQurey3.0新增的get方法
$.post(url, [settings])	JQurey3.0新增的post方法

[ ] 代表可选参数

通常我们经常使用以下几个属性

GET或POST参数	说明
url	服务器访问地址或接口
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
callback	回调函数，回调函数的参数就是服务器返回的数据
type	服务器返回的数据类型 取值：xml, html, script, json, text

$.ajax({键:值,键:值}) 属性名称	说明
url	服务器访问地址或接口
async	请求方式：默认是异步，取值是true，设置为false表示同步
method	GET或POST方法（put和delete方法也可以使用，但是仅部分浏览器支持）
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
dataType	服务器返回的数据类型 取值：xml, html, script, json, text
success	回调函数，回调函数的参数就是服务器返回的数据
error	服务器出现异常的回调函数，参数是XMLHttpRequest对象

简单演示

$(function () {
	$.get({
	    url: "/department/depList",		//请求地址
	    dataType: "json",				//相应数据
	    success: function (departmentList) {	//回调函数，参数可以自由指定
	        for (var i = 0; i < departmentList.length; i++) {
                var dep = departmentList[i];
                alert(dep.name)
            }
	    }
	});
});

页面加载成功后

循环展示了所有科室

想使用哪种请求方式进行数据交互就看个人喜好了，如果只是简单的ajax请求，直接$.get()或者$.post()比较简单点，如果需要涉及更多的参数则使用最全的$.ajax()方法。

当然ajax不局限于全局加载时使用，同样也可以绑定事件等其他使用方法，可以实现页面的局部刷新。