ajax学习笔记

红太狼 2022-08-07 14:43 273阅读 0赞

**有点乱，可以戳原文：[http://www.ido321.com/1512.html][http_www.ido321.com_1512.html]**

**一、js原生发送Ajax请求**

关于Ajax的简单介绍，可以戳此：[DOM笔记（五）：JavaScript的常见事件和Ajax小结][DOM_JavaScript_Ajax]

<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>demo</title>
        </head>
        <body>
            <button id="btn">ajax加载</button>
            <div id="div1">
                <p>下面是ajax加载的内容</p>
                <p id="ajaxcontent"></p>
            </div>
        </body>
        <script type="text/javascript">
            //返回xhr实例
            function createXHR()
            {
                if(window.XMLHttpRequest)
                {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                        return new XMLHttpRequest();
                }
                else
                {
                    // code for IE6, IE5
                    return  new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
    
            //xhr事件处理
            function xhrHandle()
            {
                var xhr = createXHR();
                var res;
                xhr.onreadystatechange=function()
                {
                    if(this.readyState === 4)
                    {
                        if(this.status >= 200  && this.status < 300)
                        {
                            document.getElementById('ajaxcontent').innerHTML = this.responseText;
                        }
                        else
                        {
                            document.getElementById('ajaxcontent').innerHTML ='Error';
                        }
                    }
                }
                xhr.open('GET','./ajaxdemo.php?a=12&b=34');
                xhr.send(null);
            }
            document.getElementById('btn').addEventListener('click',xhrHandle,false);
        </script>
    </html>

对于get请求，send()不带参数，或者设置null。若send()要带参数，则必须为post请求，还需要设置请求头

xhr.open('POST','./ajaxdemo.php');
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");    
    xhr.send('a=56&b=78');

ajaxdemo.php：

<?php
              $fir = $_POST['a'];
              $sec = $_POST['b'];
              echo "a=",$fir,'<br/>','b=',$sec;
    ?>

加载前

[![a1][]][a1 1]

加载后

[![a2][]][a2 1]

**二、JQuery的Ajax请求方式**

1、load(url.param,callback)：向url发送一个带可选参数param的Ajax请求，可指定一个回调函数。

<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>demo</title>
            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        </head>
        <body>
            <div id="div1">
                <p>下面是ajax加载的内容</p>
                <p id="ajaxcontent"></p>
            </div>
        </body>
        <script type="text/javascript">
            $('#ajaxcontent').load('./ajaxdemo.php',{a:342,b:'test'});
        </script>
    </html>

效果同上类似。load()也可以直接加载xml、html或者html的某个片段内容。

<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>demo</title>
            <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        </head>
        <body>
            <div id="div1">
                <p>下面是ajax加载的内容</p>
                <p id="ajaxcontent"></p>
            </div>
        </body>
        <script type="text/javascript">
            $('#ajaxcontent').load('./ajaxhtml.html #ajaxhtml');
        </script>
    </html>

加载ajaxhtml.html中 id是ajaxhtml的片段。ajaxhtml.html如下

<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>ajax</title>
        </head>
        <body>
            <div id="div1">
                <p>下面是ajax要加载的内容</p>
                <p id="ajaxhtml">demo.html文件中请求了这里的数据</p>
            </div>
        </body>
    </html>

结果：

[![a3][]][a3 1]

2、$.get/post(url,param,callback,type)：向url发送带参数的get请求，返回xhr实例

界面采用上面的，修改js

$('#btn').on('click',function(){
                $.get('./demo.txt',function(res)
                {
                    $('#ajaxcontent').text(res)
                });
            });

从demo.txt中加载一段文本，保存为utf-8编码，不然中文会乱码

[![a4][]][a4 1]

$.post()形式和$.get()基本一样，不再赘述。

3、$.getJSON(url,param,callback)：向url发起GET请求，把响应结果转为JSON字符串，传递给callback。返回xhr实例。相当于在$.get()中，type指定为json.

$('#btn').on('click',function(){
                $.getJSON('./ajaxdemo.php',function(res)
                {
                    $.each(res,function(index,item)
                    {
                        $("#ajaxcontent").append(
                            '<p>'+index+'-->'+item
                            );
                    });
                });
            });

json数据

<?php
           $jsondata =' {"name":"dwqs","blog":"http://www.ido321.com","age":21}';
           echo $jsondata;
    ?>

结果

[![a5][]][a5 1]

$.each()用于遍历json对象，方法接受两个参数，第一个是需要遍历的对象集合（JSON对象集合），第二个是用来遍历的方法，这个方法又接受两个参数，第一个是遍历的index，第二个是当前遍历的值。

$.ajax(options)或者$.ajax(url\[,options\])：返回一个xhr实例。options是一个对象，用于定义ajax请求参数。完整的参数列表：[https://api.jquery.com/jQuery.Ajax/][https_api.jquery.com_jQuery.Ajax]

$.get()、$.post()和$.getJSON()都是简写的$.ajax()，其等价于

$.ajax({
    url:url,
    data:data,
    success:callback,
    dataType:dataType
    });

改写上面的demo

$('#btn').on('click',function(){
                $.ajax({
                    url:'./ajaxdemo.php',
                    dataType:'json',
                    success:function(res){
                        $.each(res,function(index,item)
                        {
                            $("#ajaxcontent").append(
                                '<p>'+index+'-->'+item
                            );
                        });
                    }
                });
            });

对于没有指定的ajax参数，则使用默认值。如果发起很多相似的ajax请求，则可用$.ajaxSetup(options)设置默认值，options同$.ajax()中的options

**三、Ajax事件**

1、事件类型

<table style="border-top-style:solid; border-top-width:1px; border-top-color:rgb(221,221,221); border-left-style:solid; border-left-width:1px; border-left-color:rgb(221,221,221); width:815px; margin-bottom:16px; color:rgb(85,85,85); font-family:'Microsoft Yahei','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; line-height:26px"> 
 <tbody> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 事件名称</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 类型</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 说明</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxStart</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 当Ajax请求开始时触发</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> beforeSend</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 局部</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 发起请求前触发，可在发送请求之前修改xhr实例或者return false 取消请求</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxSend</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 发起请求前触发，可在发送请求之前修改xhr实例</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> success</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 局部</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求返回一个成功响应时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxSuccess</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求返回一个成功响应时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> error</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 局部</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求返回一个错误响应时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxError</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求返回一个错误响应时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> complete</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 局部</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求结束时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxComplete</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求结束时调用</td> 
  </tr> 
  <tr> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> ajaxStop</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 全局</td> 
   <td style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-right-width:1px; border-right-color:rgb(221,221,221); padding:5px 10px"> 请求结束并且没有其它并发的请求处于激活状态时调用</td> 
  </tr> 
 </tbody> 
</table>

$('body').on('ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete',function(e){
        console.log(e.type);
    });

2、ajax事件创建器

Ajax提供了6个事件创建器：ajaxComplete(callback)、ajaxSuccess((callback)、ajaxError(callback)、ajaxStart(callback)、ajaxSend(callback)和ajaxStop(callback),callback是回调的事件处理函数，函数上下文是在其上创建的dom元素

$("#txt").ajaxStart(function(){
      $("#wait").css("display","block");
    });
    $("#txt").ajaxComplete(function(){
      $("#wait").css("display","none");
    });

**四、Ajax参数解析**

1、JQuery.param(*object*,*traditional*)：创建数组或对象的序列化表示，object是要进行序列化的数组或对象，*traditional*规定是否使用传统的方式浅层进行序列化（参数序列化）

var params = { width:1900, height:1200 };
    var str = jQuery.param(params);
    $("#results").text(str);

结果

width=1680&height=1050

var myObject = {
         a: {
             one: 1, 
             two: 2, 
             three: 3
         }, 
         b: [1,2,3]
     };
     var str = jQuery.param(myObject);
     var ttt=decodeURIComponent(str);
     $("#ajaxcontent").html(str+"<br/>"+ttt);

结果

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
    a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

2、.serialize()：创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。返回格式化的查询字符串

3、.serializeArray() ：方法通过序列化表单值来创建对象数组（名称和值），此方法返回的是 JSON 对象而非 JSON 字符串。

假设存在一个表单

<form>
         <select name="single">
              <option>Single</option>
              <option>Single2</option>
         </select>
         <select name="multiple" multiple="multiple">
              <option selected="selected">Multiple</option>
              <option>Multiple2</option>
              <option selected="selected">Multiple3</option>
         </select><br/>
         <input type="checkbox" name="check" value="check1"/> check1
         <input type="checkbox" name="check" value="check2" checked="checked"/> check2
         <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
         <input type="radio" name="radio" value="radio2"/> radio2
    </form>

console.dir($('form').serializeArray());
     jQuery.each( $('form').serializeArray(), function(i, field){
          $("#ajaxcontent").append(field.value + " ");
    });

输出：

Single Multiple Multiple3 check2 radio1

[![a6][]][a6 1]

原文：[http://www.ido321.com/1512.html][http_www.ido321.com_1512.html]

[http_www.ido321.com_1512.html]: http://www.ido321.com/1512.html
[DOM_JavaScript_Ajax]: http://www.ido321.com/1327.html
[a1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a1_thumb.png
[a1 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a1.png
[a2]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a2_thumb.png
[a2 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a2.png
[a3]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a3_thumb.png
[a3 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a3.png
[a4]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a4_thumb.png
[a4 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a4.png
[a5]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a5_thumb.png
[a5 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a5.png
[https_api.jquery.com_jQuery.Ajax]: https://api.jquery.com/jQuery.Ajax/
[a6]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a6_thumb.png
[a6 1]: http://ido321.qiniudn.com/wp-content/uploads/2015/04/a6.png