jquery操作DOM

8.1 jQuery框架中的Ajax简介

Ajax技术的核心是XMLHTTPRequest对象，该对象是Ajax实现的关键，发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。

jQuery框架对Ajax操作进行了封装，在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。

8.2 jQuery框架中的Ajax网络请求

jQuery框架中为我们提供的发送网络请求方法主要有：

• load方法
• ajax方法
• get方法
• post方法
• getScript方法
• getJSON方法

① load方法

语法 jQ.load(url,[data],[callback])
参数

• url 资源的请求路径
• data 发送请求时提交的参数，支持查询字符串和JSON对象格式
• callback 加载完成的回调函数，3形参为：响应体 + 状态 + 请求对象

说明该方法请求远程的资源，并插入到选中的jQ实例对象中。

注意

• 默认发送GET请求，如果传递参数(JSON对象)则发送POST请求。
• 支持对返回的数据进行筛选

代码示例

1 //01 直接加载文件中的数据
2 //默认发送的是GET请求
3 //$("#demo").load("php/test.html");
4 //02 加载文件中的数据，获取其中的某一部分（进行筛选）
5 //$("#demo").load("php/test.html span");
6 //参数在请求体中进行传递
7 $("#demo").load("php/test.html span",{"namme":"zs"});

② ajax方法

语法 $.ajax(url,[settings]) | $.ajax(settings)

常用参数说明

• url 资源的请求路径
• data 发送请求时提交的参数，支持查询字符串和JSON对象格式
• async 是否异步发送网络请求
• cache 是否进行缓存处理
• context 指定回调函数中的this指针
• dataType 预期服务器返回的数据类型
• timeout 请求的超时时间
• beforeSend 请求发送前执行的回调函数
• complete 请求完成后执行的回调函数
• error 请求失败执行的回调函数
• success 请求成功执行的回调函数

说明该方法是jQuery框架中最底层的Ajax实现，用于发送网络请求。
注意

• 最简单的情况下，$.ajax()可以不带任何参数直接使用。
• 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。

• 8.1 jQuery框架中的Ajax简介

  Ajax技术的核心是XMLHTTPRequest对象，该对象是Ajax实现的关键，发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。

  jQuery框架对Ajax操作进行了封装，在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。

  8.2 jQuery框架中的Ajax网络请求

  jQuery框架中为我们提供的发送网络请求方法主要有：

  • load方法
  • ajax方法
  • get方法
  • post方法
  • getScript方法
  • getJSON方法

  ① load方法

  语法 jQ.load(url,[data],[callback])
参数

  • url 资源的请求路径
  • data 发送请求时提交的参数，支持查询字符串和JSON对象格式
  • callback 加载完成的回调函数，3形参为：响应体 + 状态 + 请求对象

  说明该方法请求远程的资源，并插入到选中的jQ实例对象中。

  注意

  • 默认发送GET请求，如果传递参数(JSON对象)则发送POST请求。
  • 支持对返回的数据进行筛选

  代码示例

  1 //01 直接加载文件中的数据
  2 //默认发送的是GET请求
  3 //$("#demo").load("php/test.html");
  4 //02 加载文件中的数据，获取其中的某一部分（进行筛选）
  5 //$("#demo").load("php/test.html span");
  6 //参数在请求体中进行传递
  7 $("#demo").load("php/test.html span",{"namme":"zs"});

  ② ajax方法

  语法 $.ajax(url,[settings]) | $.ajax(settings)

  常用参数说明

  • url 资源的请求路径
  • data 发送请求时提交的参数，支持查询字符串和JSON对象格式
  • async 是否异步发送网络请求
  • cache 是否进行缓存处理
  • context 指定回调函数中的this指针
  • dataType 预期服务器返回的数据类型
  • timeout 请求的超时时间
  • beforeSend 请求发送前执行的回调函数
  • complete 请求完成后执行的回调函数
  • error 请求失败执行的回调函数
  • success 请求成功执行的回调函数

  说明该方法是jQuery框架中最底层的Ajax实现，用于发送网络请求。
  注意

  • 最简单的情况下，$.ajax()可以不带任何参数直接使用。
  • 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。

  • 代码示例

     1 $.ajax({
     2             "url":"php/03-ajax.php",  //设置请求路径
     3             "type":"get", //设置请求方法，不区分大小写
     4             "success":function (res,status,xhr) {  
     5                 //请求成功的回调
     6                 $("#demo").html(res); //获取响应状态码
     7                 console.log(status);  //获取请求的状态
     8                 console.log(xhr);     //获取请求对象本身
     9                 console.log(this);    //获取上下文
    10             },
    11             "error":function (res) {
    12                 //请求失败的回调函数
    13                 console.log("失败");
    14                 console.log(res);
    15             },  
    16             //"data":"name=ls"    //参数：查询字符串形式
    17             "data":{"name":"ls"}, //参数：JSON对象形式
    18             "timeout":10，        //设置请求超时的时间 
    19             statusText：timeout
    20             "context":obj,    //设置回调函数中this的指向
    21             "complete":function (res) {
    22                 console.log("请求完成");
    23                 console.log(res);
    24             }
    25         });

    ③ get和post方法

    语法
[1]$.get(url,[data],[callback]，[type])
[2]$.post(url,[data],[callback]，[type])

    参数

    • url 资源的请求路径
    • data 发送请求时提交的参数
    • callback 请求成功的回调函数
    • type 服务器端返回内容的格式：包括xml、html、json、script等

    GET和POST对比

    • GET请求参数跟在URL后，POST请求参数作为请求体发送。
    • GET请求对参数大小有限制，而POST请求理论上不受限制。
    • GET请求的数据会被浏览器缓存，存在严重的安全性问题。
    • 服务器端读取数据的方式不同。在PHP中，区分为$_GET和$_POST。

    代码示例

     1  //发送请求获取服务器返回的文本,把div的内容替换掉
     2  //第一个参数:url请求路径(必传)
     3  //第二个参数:参数 支持两种形式[查询字符串][JSON对象]
     4  //第三个参数:success(response,status,xhr)
     5  //         请求成功的回调
     6  //         response:服务器返回的响应体
     7  //         status:状态说明[success-error]
     8  //         xhr:请求对象
     9  //第四个参数:预期返回的数据类型:json|script|jsonP等
    10  $.get("php/03-get.php",{"param1":"value1"},
    11      function (response,status,xhr) {
    12      console.log(response);
    13      console.log(status);
    14      console.log(xhr);
    15  })
    16 //注意点:GET请求请求路径一样会缓存,POST请求不会缓存
    17  $.post("php/04-post.php",{"param1":"value1"},
    18      function (response,status,xhr) {
    19      console.log(response);
    20      console.log(status);
    21      console.log(xhr);
    22  }) 

    ④ getScript和getJson方法

    jQuery框架提供了getScript和getJson方法来直接加载js文件和JSON数据

    语法

    [1] $.getScript(url,[callBack])
[2] $.getJson(url,[callBack])

    说明

    • getScript方法用于加载js文件，并自动执行。
    • getJson方法用于加载JSON数据。

    代码示例

    1 $.getScript("test.js", function(){
    2      //加载完成后执行的回调函数
    3       alert("加载并执行JS文件");
    4 });

    8.3 jQuery框架中的Ajax事件方法

    jQuery框架中除了提供上述方法来发送网络请求外，还提供了一些事件方法来对调用Ajax方法过程中的HTTP请求进行精细控制。通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。jQuery的Ajax全局事件方法如下：

    [1] ajaxStart(callBack) =>检测到网络请求开始发送会触发，1次
    [2] ajaxStop(callBack) =>检测到网络请求结束会触发，1次
    [3] ajaxSend(callBack) =>检测到网络请求开始发送会触发，N次
    [4] ajaxComplete(callBack)=>检测到网络请求结束会触发，N次
    [5] ajaxError(callBack) => 网络请求失败会触发
    [6] ajaxSuccess(callBack) => 网络请求成功会触发

     1 $(document).ajaxStart(function () {
     2      console.log("第一个已经开始+++++");
     3      $("#demoID").show(1000);
     4 })
     5 $(document).ajaxStop(function () {
     6      console.log("最后一个已经结束+++++");
     7      $("#demoID").hide(1000);
     8 })
     9 $(document).ajaxSend(function () {
    10      console.log("开始发送网络请求___");
    11 })
    12 $(document).ajaxComplete(function () {
    13     console.log("发送网络请求完成___");
    14 })
    15 $.ajax({ //发送网络请求--A
    16     "url":"php/06-other.php",
    17     "type":"GET",
    18     "success":function (res,status,xhr) {
    19           console.log("网络请求成功--1");
    20       }
    21 })
    22 $.ajax({  //发送网络请求--B
    23     "url":"php/06-other.php",
    24     "type":"GET",
    25     "success":function (res,status,xhr) {
    26           console.log("网络请求成功--2");
    27       }
    28 })
    29 $(document).ajaxError(function () {
    30     console.log("请求失败");
    31 })
    32 $(document).ajaxSuccess(function () {
    33     console.log("请求成功");
    34 })

    8.4 jQuery框架中的序列化方法

    在开发的时候，经常需要把表单中的数据作为网络请求的参数，如果一个一个的获取再拼接成查询字符串那么相当的麻烦，jQuery框架中为我们提供了两个对应的方法，可以方便解决该需求。

    serialize方法能够将DOM元素内容序列化为查询字符串。
    serializeArray方法可以将DOM元素序列化后返回JSON格式的数据。

    代码示例

     1 <body>
     2 <form>
     3     <input type="text" name="username" id="demo1">
     4     <input type="text" name="password" id="demo2">
     5 </form>
     6 <button>按钮</button>
     7 <script>
     8     $("button").click(function () {
     9         $.ajax({
    10             "url":"php/07-get.php",
    11             //"data":"username="+$("#demo1").val()+"&password=" +$("#demo2").val(),
    12             "data":$("form").serialize(),
    13             "success":function (res) {
    14                 console.log(res);
    15             }
    16         })
    17         //把表单中的key-value按照固定的格式拼接为查询字符串:username=lisi&password=abcd
    18         console.log($("form").serialize());
    19         console.log($("form").serializeArray());
    20         //[{"username":"zhangsan"},{"password":"123"}];
    21     })
    22 </script>
    23 </body>