ajax学习笔记

浏览数：21 / 时间：2015年06月09日

有点乱，可以戳原文：http://www.ido321.com/1512.html

一、js原生发送Ajax请求

关于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;
?>

加载前

加载后

二、JQuery的Ajax请求方式

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

url

必选，Ajax请求地址（字符串）

param

可选，指定请求所带的参数（字符串|对象|数组）；若指定为对象或者数组（键值对方式），则发起POST请求，若为字符串，则发起GET请求。

callback（response,status,xhr）

可选，请求完成时调用的函数。
额外的参数可选

response – 包含来自请求的结果数据
status – 包含请求的状态（”success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr – 包含 XMLHttpRequest 对象

<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>

结果：

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

url	必选，Ajax请求地址（字符串）
param	可选，指定请求所带的参数（字符串\|对象\|数组）
callback（response,status,xhr）	可选，请求完成时调用的函数。额外的参数可选 response – 包含来自请求的结果数据 status – 包含请求的状态（”success”, “notmodified”, “error”, “timeout” 或 “parsererror”） xhr – 包含 XMLHttpRequest 对象
type	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型： “xml” “html” “text” “script” “json” “jsonp”

界面采用上面的，修改js

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

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

$.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;
?>

结果

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

$.ajax(options)或者$.ajax(url[,options])：返回一个xhr实例。options是一个对象，用于定义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、事件类型

事件名称	类型	说明
ajaxStart	全局	当Ajax请求开始时触发
beforeSend	局部	发起请求前触发，可在发送请求之前修改xhr实例或者return false 取消请求
ajaxSend	全局	发起请求前触发，可在发送请求之前修改xhr实例
success	局部	请求返回一个成功响应时调用
ajaxSuccess	全局	请求返回一个成功响应时调用
error	局部	请求返回一个错误响应时调用
ajaxError	全局	请求返回一个错误响应时调用
complete	局部	请求结束时调用
ajaxComplete	全局	请求结束时调用
ajaxStop	全局	请求结束并且没有其它并发的请求处于激活状态时调用

$(‘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 + " ");
});

输出：