jQuery-Ajax

2019-06-05

jQuery封装了Ajax的交互过程，用户无需使用XMLHttpRequest对象的原生方法，即可轻松实现Ajax应用。

load方法

通过Ajax请求从服务器加载数据载入到指定元素中。如果没有参数传递，则采用GET方式发送请求；反之自动转换为POST方式。

$("选择器").load(url,data,function(data,status,xhr)) 

参数	描述
url	服务器地址
data	可选。发送到服务器的数据。其格式为json 注意：如要传递数组元素，可使用如下语法： { 'choices[]': ["Jon", "Susan"]}
function(data,status,xhr)	可选。请求完成时运行的函数。 参数： data: 服务器的响应数据 status : 响应状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） xhr : 包含XMLHttpRequest

getScript方法

通过get请求载入并执行外部的JavaScript文件。

$.getScript(url,function(data,status)); 

参数	描述
url	目标JS文件路径。可以跨域调用。
function(data,status)	可选。请求成功后执行的回调函数。 参数： data : 服务器响应数据 status : 响应状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

get/post方法

通过get/post方式向服务器发送Ajax请求。

  $.get(url,data,function(data,status,xhr),dataType)
  $.post(url,data,function(data,status,xhr),dataType)  

参数	描述
url	必需。服务器地址。
data	可选。发送到服务器的数据。如果参数是中文，必须使用encodeURI进行转码，在客户端接收时，使用decodeURI进行解码。
function(data,status,xhr)	可选。请求成功时运行的函数。 参数： data – 服务器响应数据 status – 响应状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） xhr - 包含 XMLHttpRequest对象
dataType	可选。服务器响应的数据类型。 默认jQuery将智能判断。 可能的类型："xml"、"html"、"text"、"script"、"json"、"jsonp"

getJSON方法

使用get请求来获得 JSON 数据

  $.getJSON(url,data,function(data,status,xhr){
  
  });

ajax方法

ajax方法是jQuery实现Ajax的底层方法。是get()、post()等方法的基础。

$.ajax({
    参数名1:参数值1,
    参数名2:参数值2,
      … …
});

参数名	类型	描述
url	String	发送请求的地址（默认为当前页面）
type	String	数据请求方式（post或get），默认为get
data	String 或Object	发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方法，那么，该字符串将附在url后面。 必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType	String	服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为： html:返回纯文本的HTML信息，包含Script标记会在插入页面时被执行 script:返回纯文本JavaScript代码 text:返回纯文本字符串 xml:返回可被jQuery处理的XML文档 json:返回JSON格式的数据
beforeSend	Function	回调函数。在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件
complete	Function	回调函数，请求完成后调用。该函数无论数据发送成功或失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，包含成功或错误代码的字符串。
success	Function	回调函数，请求成功后调用。该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，另一个是strStatus，用于描述成功状态的字符串。
error	Function	回调函数，请求失败后调用。该函数有三个参数，一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject
timeout	Number	请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup（）方法中的同样设置
global	Boolean	是否响应全局事件，默认true响应，false则全局事件$.ajaxStart等将不响应，
async	Boolean	默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
cache	Boolean	是否进行缓存，true表示进行缓存，false表示不进行页面缓存。默认值: true。

$.ajax({
      url:服务器地址,
      type:请求类型get或post,默认为get
      cache:是否缓存true/false,
      dataType:服务器返回数据的类型，缺省可自动判断，默认text,
      data:向服务器发送的请求参数{key:value},
      success:function(response){},　请求成功返回时的回
      调函数,形参response获取服务器的返回值
      error:function(xhr,status){}失败时的回调函数，形参 
      status是状态信息，xhr是当前的异步对象
  });

设置Ajax全局选项

在页面中有时需要多次调用.ajaxSetup()方法设置全局性的Ajax默认选项。

$.ajaxSetup({参数名1:参数值1,参数名2:参数值2});  

Ajax全局事件

事件名称	参数	功能描述
ajaxComplete(callback)	callback	Ajax请求完成时执行，即使请求并未成功。该方法会在每个Ajax请求完成时触发。
ajaxError(callback)	callback	Ajax请求发生错误时执行，其中捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)	callback	Ajax请求开始时执行
ajaxStart(callback)	callback	Ajax请求发送前执行。无论在何时发送 Ajax 请求，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStart 事件。在此时，由 .ajaxStart() 方法注册的任何函数都会被执行。
ajaxStop(callback)	callback	Ajax请求结束时执行。当 AJAX 请求完成时，jQuery 会检查是否存在更多的 AJAX 请求。如果没有其他请求正在等待运行，ajaxStop()方法会运行指定的函数。
ajaxSuccess(callback)	callback	Ajax请求成功时执行

表单序列化

jQuery的serialize方法可以自动将提交的表单元素值转换成url参数(参数1=值1&参数2=值2) 。

$("表单选择器").serialize()

JSON应用

方式一：使用eval函数

eval("(" + 字符串 + ")")

方式二：使用JSON对象

JSON.parse(字符串);//将字符串解析为JSON

JSON.stringify(JSON对象);//将JSON解析为字符串

方式三：使用jQuery

$.parseJSON(字符串)

FormData对象

通过FormData对象可以组装一组用Ajax发送的键/值对。可以更灵活向服务器发送表单数据。

语法格式一 ：通过FormData对象发送表单数据

var fd = new FormData(表单元素引用);

语法格式二：通过FormData对象发送任意键值对

var fd = new FormData();

fd.append(键,值);