ajax学习笔记
有点乱，可以戳原文：http://www.ido321.com/1512.html
一、js原生发送Ajax请求
关于Ajax的简单介绍，可以戳此：DOM笔记（五）：JavaScript的常见事件和Ajax小结
"content-type" content="text/html;charset=utf-8">
demo
"div1">
下面是ajax加载的内容
"ajaxcontent">
对于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：
'a'];
$sec = $_POST['b'];
echo "a=",$fir,'
','b=',$sec;
?>
加载前
加载后
二、JQuery的Ajax请求方式
1、load(url.param,callback)：向url发送一个带可选参数param的Ajax请求，可指定一个回调函数。
| url | 必选，Ajax请求地址（字符串） |
| param | 可选，指定请求所带的参数（字符串|对象|数组）；若指定为对象或者数组（键值对方式），则发起POST请求，若为字符串，则发起GET请求。 |
| callback（response,status,xhr） | 可选，请求完成时调用的函数。 额外的参数可选
|
"content-type" content="text/html;charset=utf-8">
demo
"div1">
下面是ajax加载的内容
"ajaxcontent">
效果同上类似。load()也可以直接加载xml、html或者html的某个片段内容。
"content-type" content="text/html;charset=utf-8">
demo
"div1">
下面是ajax加载的内容
"ajaxcontent">
加载ajaxhtml.html中 id是ajaxhtml的片段。ajaxhtml.html如下
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>ajaxtitle> head> <body> <div id="div1"> <p>下面是ajax要加载的内容p> <p id="ajaxhtml">demo.html文件中请求了这里的数据p> div> body> html>
| url | 必选，Ajax请求地址（字符串） |
| param | 可选，指定请求所带的参数（字符串|对象|数组） |
| callback（response,status,xhr） | 可选，请求完成时调用的函数。 额外的参数可选
|
| type | 可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。 可能的类型：
|
界面采用上面的，修改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( ''
+index+'-->'+item ); }); }); });
json数据
' {"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( ''
+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+"
"+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>Singleoption> <option>Single2option> select> <select name="multiple" multiple="multiple"> <option selected="selected">Multipleoption> <option>Multiple2option> <option selected="selected">Multiple3option> 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