ajax学习笔记

来源：互联网发布：小视频软件app 编辑：程序博客网时间：2024/06/13 05:38

有点乱，可以戳原文：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=3a[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

原文：http://www.ido321.com/1512.html

0 0