JQ中的Ajax操作导图

一、Ajax知识回顾
   1.Ajax是英文 Asynchronous JavaScript and XML,异步的javascript和xml的简称;
   2.主要用于不刷新或页面跳转的情况下,发送另一个http请求,动态更新当前页面中的数据,
     使用户始终停留在当前页面,提升用户体验;
   3.js原生提供一个对象: XMLHttpRequest()可以完成Ajax的所有操作,但操作很繁琐,且容易出错;
   4.jQuery将常用的Ajax操作进行的封装,提供一套简单的接口,来简化用户的Ajax请求;
   5.Ajax主要涉及二类http请求: GET 和 POST ,GET用于从服务器获取数据,POST用于向服务器发送数据;
   5.原生的Ajax请求,请大家参考前面的课程,这套课程主要是讲述jQuery中的Ajax请求是如何实现的。

----------------------------------------------------------------------------------------

二、load()方法
   1.这是jQuery中最简单的Ajax请求方法,默认为GET请求方式;
   2.语法: load(url[,data,callback]),load(请求的url地址,请求数据,请求成功后回调函数);
           (1).url: 请求的服务器上的资源的url地址,可以是一个txt,html,php....
           (2).data:
                   [1]. GET请求: 无参数或是名值对格式字符串;
                   [2]. POST请求: 对象或数组;
           (3).function(data,statuStr,xhr), function(响应文本,状态字符串(success),xhr对象)
   3.调用: 该方法需要在jQuery对象上调用,回调适用于jQuery集合中每一个元素,例如: $('#box').load(...);
   4.优势:
       (1).自动参数自动判断请求类型是GET还是POST;
       (2).可直接将load()返回值做为DOM元素内容自动插入,省去了append()等DOM操作
   5.返回: 响应的内容;

-----------------------------------------------------------------------------------------

三、$.get()函数
   1.$.get(),用于从服务器上读取内容
   2.语法:$.get(url[,data][,callback][,dataType])
   3.url: 服务器上的url地址,为空表示当前地址;
   4.data:
       (1).查询字符串格式: name=peter&age=88;
       (2).对象字面量: {name:'peter',age:88},自动序列化为上面的查询字符串;
   5.callback: 请求成功的回调函数,function(响应文本,状态字符串,xhr对象),如果不需要回调,可设为null;
   6.dataType: 响应内容类型/应答消息体, html/text/xml/json/script/jsonp;
   7.返回值: 返回xhr对象

-----------------------------------------------------------------------------------------

四、$.getJSON()函数
   1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
   2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
   3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;

-----------------------------------------------------------------------------------------

五、$.getScript()函数
   1. $.getScript()用于动态加载外部的javascript脚本文件;
   2. $.getScript(脚本地址,成功回调);
   3. 可以任何位置加载外部脚本

-----------------------------------------------------------------------------------------

六、$.post()函数
   1. $.post()用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
   2. $.post(url[,data][,callback][,dataType]),参数与$.get()相同
   3. url: http请求的url处理程序;
   4. data: 消息体中的数据,以查询字符串或对象字面量形式提供;
   5. callback: 成功后的回调方法,function(data,status,xhr){...};
   6. dataType: 期望服务器端响应返回的数据格式,如html,json,text,xml,_default...

------------------------------------------------------------------------------------------

七、$.ajax()函数
   1.学完前面的知识,$.ajax()就显得非常简单了;
   2.load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式罢了;
   3.$.ajax()的参数是一个对象,键名对应的属性非常多,并且键名不允许自定义,很多之前我们已经学过了;
   4.尽管参数很多,但实际开发中,经常用到的并不多,大家不必太纠结,有的参数用到了再查手册也不迟;
   5.常用属性:
       (1). url : 请求的url资源地址;
       (2). type: 请求的类型,get / post;
       (3). data: 发送的参数;
       (4). dataType: 响应的数据类型;
       (5). success: 响应成功的回调方法;
   6.该方法是jQuery中Ajax的底层实现,前面的方法或函数其实都在它基础实现的功能封装;
   下面我们将$.post()中的登录验证功能,使用$.ajax()进行改写
------------------------------------------------------------------------------------------