jQuery中ajax学习记录

喜欢ヅ旅行 2022-06-06 12:51 239阅读 0赞

不得不说，jQuery真的是一个特别好用的轻量级JS框架，帮助我们轻松方便的实现一些应用，在一定程度上减少代码量，改变我们编写JavaScript的习惯．昨天巩固了一下jQuery.ajax()，所以来做个笔记，进行总结一下．

### 1. load(url,\[data\],\[\]callback) ###

载入远程的HTML文件代码并且插入到DOM中．

*  **url(string):**请求的HTML页面的URL地址
 *  **data(Map):**发送到服务器的key/value数据
 *  **callback(Callback):**请求完成时的回调函数

这个方法默认使用GET方式来传递的，如果［data］参数有传递数据进去，就会自动转换为ＰＯＳＴ方式．  
这个方法可以动态加载一些文件，从远程获取一些数据

$("input[type=button]").click(function () { 
                    /*发送的参数形式必须是Json格式*/
         　　 let send = {
       "username":$("#username").val
          }
                              　　　　　　　　　$("div").load("propcess.php",send,function(data){ 
                  alert(data);
         })
     })

此段代码就是当我们点击button按钮的时候，就会在div元素中加载propcess.php文件，send是要请求的数据，function是一个回调函数．

**注意：**

１．添加**+Math.random**是为了适应各种浏览器下，比如IE浏览器的缓存特别严重，添上它之后会避免此项问题，在我们改动数据后，会及时加载改动数据．
         ２． 所有ajax请求必须在服务器下完成．我的是127.0.0.1+*地址．

３．［data］一般用json格式，这样比较方便获取．

function (responseText, textStatus, XMLHttpRequest){ 
        this;//在这里this指向的是当前的DOM对象
        //alert(responseText);//请求返回的内容
        //alert(textStatus);//请求状态：success，error
        //alert(XMLHttpRequest);//XMLHttpRequest对象
        });

### 2.jQuery.get(url,\[data\],\[callback\],\[dataType\]) ###

使用GET方式来进行异步请求(POST请求和GET类似)

**参数解析**

*  **url(String):**发送请求的URL地址．
 *  **data(map):**要发送给服务器的数据，以key/value的键值对形式表示，会做为jQueryString附加到请求URL中．
 *  **callback(Function):**　载入成功回调函数（只有Response的返回是success时才调用该方法）．
 *  **dataType(string):**客户端请求的数据类型(JSON,XML.ect)

$("input[type=button]").click(function () { 
          /*$.get(url, senddata, Callback, datatype){}*/
        $.get("text?data="+Math.random(),function (data) 　　　　　　　　{ 
                        $(".load").html(data);
                    })
      })

上段代码展示的是用GET请求text文件里的数据，然后将请求到的数据动态加载到l类名为.load的DIV中．

### ３.jQuery.post(url,\[data\],\[callback\],\[dataType\]) ###

(post和get类似，所以就不详细记录了)．

### ４.jquery.getScript(url,\[callback\]) ###

通过GET方式请求载入并执行一个JS文件．  
**参数解析**  
\- **url (String) :** 待载入 JS 文件地址。  
\- **callback (Function) :** (可选) 成功载入后回调函数。  
1.2 版本之前，getScript只能调用同域js文件，1.2中我们可以跨域调用．注意：Safari2或者更早的版本不能在全局作用域中同步执行脚本．如果通过getScript加入脚本，需要加入延时函数．  
此方法可以用在当编辑器只有focus()的时候才去加载编辑器需要的js文件．  
加载并执行AjaxEvent.js

$.getScript("AjaxEvent.js", function(){ 
    　　　　alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
    });

### ５.jQuery　Ajax事件 ###

其实无论是.get還是.post请求，最底层都是通过ajax完成的．  
Ajax请求会产生若干不同的时间，我们可以订阅这些事件并在其中处理我们的逻辑．在jQuery有局部和全局事件两种．

**局部事件**：每次在ajax请求时在方法内定义的．

$.ajax({
                beforeSend: function(){
                // Handle the beforeSend event
                },
                complete: function(){
                // Handle the complete event
                }
                // ...
    });

**全局事件**：每次的ajax请求都会触发，它会像DOM中的所有元素广播，上面的getScript()实例中加载脚本就是全局Ajax事件．

$("#loading").bind("ajaxSend", function(){ 
            $(this).show();
            }).bind("ajaxComplete", function(){ 
            $(this).hide();
    });
    或者：
     $("#loading").ajaxStart(function(){ 
            $(this).show();
    });

我们一般用的都是局部事件，当然用全局的时候，想要将全局事件禁用，只需要设置gobal选项false就行：

$.ajax({
            url: "test.html",
            global: false,// 禁用全局Ajax事件.
            // ...
    });

代码示例：

$("input[type=button]").click(function () { 
       let url = "propcess.php";
       let sendData = {
       "username": $("#username").val()}
       $.ajax({
             url: url,
           　type: "post",
             data: sendData,
             success: function () { 
                  if (data === "true") {
                     $("div").html("用户名可以使用");
                   } else {
                     $("div").html("用户名不可使用");
                        }
               　　}
             })
      })

### ６.jquery.ajax(options) ###

通过http请求加载远程数据．  
$.ajax()返回其创建的XMLHttorequest对象．大多数情况下，无需操作该对象，但特殊情况下可以手动终止请求．  
**注意：**

*  当设置datatype类型为＂script＂的时候，所有远程post请求都会转化为GET方式．
 *  1.2版本中，可以跨域加载JSON数据，使用时将数据类型设置为JSONP．
 *  常用的ajax参数  
    　  
    　 url，type，timeout，async，cache（设为false时，不会从浏览器缓存中加载请求信息），complete（请求完成后回调函数），contentType（发送信息至服务器时内容编码类型），beforeSend ，success ，complete ，error（后面会详细记录.）

### ７．ajax中的error ###

在ajax请求不到信息时，我们肯定要给客户返回一个错误信息．所以我们就要处理抛出的错误．

function (XMLHttpRequest, textStatus, errorThrown) { 
         // 通常情况下textStatus和errorThown只有其中一个有值 
          this; // the options for this ajax request
     }

实例代码：

$("input").click(function () { 
        $.ajax({
              url: "example4.php?" + Math.random(),
              type: "get",
              timeout: 1000,//请求时间
              success: function (data) { 
             　　　　　　 $("div").html(data);
             　　　　 },
              error: function (jqXHR, textStatus, errorThrow) { 
    /* alert("textStatus:"+textStatus); 　 alert("errorThrow:"+errorThrow)*/
           if (errorThrow === "Not Found") {
               $("span").html("你请求的地址不存在");
          }
           if (textStatus === timeout) {
               $("span").html("请求超时，请重新刷新页面")
                  }
                }
          }
    });
          $(document).ajaxError(function () { 
                    $("span").html("ajax请求发生错误");
    });//全局代码

**其他整理**

#### serialize()与serializeArray() ####

**serialize()**:序列表格内容为字符串．  
**serializeArray()**:序列化表格元素（返回JSON数据结构数据）  
**代码实例**

$("input[type=button]").click(function () { 
        let data = $("form").serialize();//获取表单数据，只能在form标签上用
         alert(data);
         $.ajax({
                url: "example3.php?" + Math.random(),
                type: "post",
                data: data,
                success: function (data) { 
                        //.....
                        }
                    })
                })

**运行结果**  
![表单][SouthEast]

![点击提交之后][SouthEast 1]

也就是讲，可以将表单或者表格中的数据以JSON格式提取出来．

**eval()方法**

let a = '[1,2,3,4]';
        alert(typeof(a));//string类型
    
        let b=eval(a);//将字符串解析成一个js代码
        alert(b[0]);
    
        let c='alert("hello")';
        alert(eval(c))//运行结果hello

用此方法来处理字符串，将其转化成数组形式，在解析ajax数据信息的时候非常有用．

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

就先到这，后续再进行补充．

[SouthEast]: /images/20220606/f29098f0eca3434ab3dafdbcf6cba78f.png
[SouthEast 1]: /images/20220606/cca70f5094a04579947c066a6639d84a.png