jQuery06--jQuery AJAX

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 1.2k | 阅读时长 ≈ 4

jQuery AJAX技术学习笔记

jQuery AJAX技术

AJAX简介

AJAX是英文词组Asynchronous JavaScrip and XML的首字母缩写。
是一种可以和服务器异步交互数据的网页开发技术。使用AJAX技术可以再不重新加载整个页面的前提下，直接更新当前页面中的指定内容。
AJAX是由多种当前主流的技术组合而成，包含如下内容

  • 使用XTHML和CSS进行标准化表达
  • 使用DOM实现动态展示和交互。
  • 使用XMLHttpRequest实现异步数据获取。
  • 使用JavaScript绑定所有技术综合应用。

AJAX 常用方法

load（）
该方法可以向服务器端发送数据获取请求，并将已获取到的数据加载到指定的HTML元素中，语法格式为

1
$（selector）.load（URL，［data ］［，callback］）
  • URL：该参数用于规定需要获取数据的URL地址，可以是文本、XML、JSON数据
  • data：该参数用于规定与请求一起发送给服务器的字符串，该字符串以键/对结合的形式组成。
  • callback：该参数用于规定load（）方法完成后需要执行的函数。
    1、常规使用
    例如将文件test.txt的内容加载到id=“demo”的段落元素中$（“#demo”）.load（“test.txt”）；
    jQuery将使用.innerHTML属性将指定元素中的所有内容更新为test.txt的文本内容。如果只需要加载的文件中的某个HTML元素，则可以在URL参数中追加选择器，来筛选需要加载的元素。
    例如
    1
    $（“#demo”）.load（“test.txt div.style”）；
    表示将test.txt中的class=“style”的元素加载到id=“demo”的段落元素中。
    需要注意的是，以上两种情况的选择器都必须是在网页文档中实际存在的HTML元素，否则请求将不会被发出。

2、回调函数的使用
该方法中的可选参数callback 规定的数据下载完成后需要执行的回调函数，该函数包含三个参数，语法格式为

1
2
3
$（selector）.load（URL，［data］，function（response，status，xhr）{
//回调函数内部代码
}）；
  • response：该参数为调用成功时的结果内容。
  • status：该参数为调用的状态。例如“success”或“error”等
  • xhr：该参数表示XMLHttpRequest对象

jQuery AJAX get（）方法

该方法用于通过HTTP GET请求从服务器端获取数据，语法格式为

1
$（selector）.get（URL，［data］，［success］，［datatype］）；
  • URL：该参数用于规定请求的URL地址
  • data：刚才说，用于规定于请求一起发送给服务器的字符串，该字符串以键/值结合的形式组成。
  • success：该参数用于规定请求成功后需要执行的函数，如果没有该参数，这返回的数据将被忽略。
  • datatype：该参数用于规定从服务器端获取的数据类型。例如XML、JSON、HTML等
    如果没有数据需要发送给服务器，也无需处理获取的数据，可以只使用参数URL。
    例如$.get（“demo.php”）；
    表示向demo.php请求数据，但是获取到的数据将被忽略，不做任何处理。

jQuery AJAX post（）方法

该方法通过HTTP POST 请求从服务器端获取数据，语法格式为

1
$（selector）.post（URL，［data］，［success］，［datatype］）；

参数同上
post（）与get（）方法的区别在于请求方式不同，而代码格式基本一致，因此这里不再去更多的例子。在实际开发中，如果只是获取数据或查询结果，建议使用get（）方法。如果需要更新资源信息，建议使用post（）方法。还可以根据以下两点考虑选用post（）还是get（）

HTTP GET请求只能向服务器发送1024字节的数据；HTTP POST请求可以向服务器发送大量数据（理论上无限制根据浏览器的类型上限稍微有不同）。
HTTP GET请求提交的数据将明文显示在URL上；通过HTTP POST（）请求提交的数据会被放在HTTP包的包体中，更为安全。
AJAX ajax（）方法
该方法是最为完整的AJAX请求方法，包含了一系列参数的配置，可供开发者自定义更为灵活的个性化要求。事实上load（）、get（）、post（）方法均为ajax（）方法的简化版，当简化版无法解决某些设置要求的时候可以选择使用ajax（）方法。
语法格式为

1
2
3
4
5
6
7
8
7
$.ajax（{
name1:value1；
name2:value2；
…
nameN：value Ｎ
}
）；

该方法内部有一个或多个名称/值组成，这些参数的数量、顺序以及值均可以由开发者根据实际开发需求自定义。

-------------本文结束感谢您的阅读-------------