js进阶 14 jquery的ajax有哪些函数和事件（多练）

js进阶 14 jquery的ajax有哪些函数和事件（多练）

一、总结

一句话总结：常用：load、ajax、post、get、getScript()、getJSON()、表单序列化，ajax事件这8个板块。

 

 

二、jquery的ajax有哪些函数和事件

JAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。如果没有jQuery,AJAX编程还是有些难度的。
通过jQuery AJAX方法，能够使用HTTP Get和HTTP Post 从远程服务器上请求文本、HTML、XML或JSON-同时能够把这些外部数据直接载入网页的被选元素中。

---

load()方法

jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法。

• .load()从服务器加载数据，然后把返回到HTML放入匹配元素。

  语法：load(url,data,function(response,status,xhr))

  1.必需的URL参数规定您希望加载的URL。

  2.可选的data参数规定与请求一同发送的查询字符串键/值对集合。

  3.可选的callback参数是load()方法完成后所执行的函数名称

• 回调函数参数含义

  1. responseTxt-包含调用成功时的结果内容

  2. statusTXT-包含调用的状态：可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个，最长见的是：succes成功;error错误

  3. Xhr-经过jQuery封装的XMLHttpRequest对象（保留其本身的所有属性和方法）

get()和post()方法

两种在客户端和服务器端进行请求-响应的常用方法是：GET和POST.
GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

• $.get（URL,callback);

  参数

  1. 第一个参数是我们希望请求的URL;
  2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
• $.post(URL,data,callback);

  参数

  1. 必需的URL参数规定您希望请求的URL。
  2. 可选的data参数规定连同请求发送的数据
  3. 可选的callback参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态
  4. type：返回内容格式,xml,html,script,json,text,_default。

$.getScript()和$.getJSON()方法

$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件

• getScript()通过HTTP GET请求载入并执行javaScript文件。
  1. 语法：$.getScript(url,function(response,status))
  2. response-包含来自请求的结果数据
  3. 3.Status-包含请求的状态（“success”,”error”,”notmodified”,”timeout”或“parsererror”)
• .getJSON(url,data,success(data,status,xhr))
  1. ur必需。规定将请求发送的哪个URL.
  2. data可选。规定连同请求发送到服务器的数据。
  3. function(response,status,xhr)可选。规定当请求成功时运行的函数。

$.ajax()

$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。

• 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

  参数

  1. 第一个参数是我们希望请求的URL;
  2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
• 常用参数：
  1. url默认值：当前页地址。发送请求的地址。
  2. type请求方式(“POST”或”GET”),默认为”GET”。
  3. Success类型：Function请求成功后的回调函数。
  4. error请求失败时调用此函数。
  5. .........

表单序列化

• 语法：$（selector).serialize()

  jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

• serializeArray()序列化表格元素（类似'.serialize()'方法返回JSON数据结构数据。

  ’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

ajax事件

$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。

• ajaxStart()AJAX请求开始时执行函数。
• ajaxStop()AJAX请求结束时执行函数。
• ajaxComplete()AJAX请求完成时执行函数。
• ajaxError()AJAX请求发生错误时执行函数。
• ajaxSuccess()AJAX请求成功时执行函数。
• ajaxSend()AJAX请求发送前执行函数。Ajax事件。

温馨提示

关于JS进阶课程就告一段落，希望经过这个课程的学习，js编写应用能有所提高，所谓学无止境，希望同学们平时多练习，学会查阅资料，学会自学的能力，举一反三。