ajax学习笔记
|
有点乱，可以戳原文：http://www.52php.cn/article/p-fkrasfov-bd.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)
{
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,255)">false);
</script>
</html>
对于get请求，send()不带参数，或者设置null。若send()要带参数，则必须为post请求，还需要设置请求头 xhr.open('POST',128)">'./ajaxdemo.php');
xhr.setRequestHeader("Content-Type",128)">"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,128)">'<br/>',128)">'b=',$sec;
?>
加载前
加载后
二、JQuery的Ajax请求方式 1、load(url.param,callback)：向url发送一个带可选参数param的Ajax请求，可指定一个回调函数。
"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="text/javascript">
$('#ajaxcontent').load('./ajaxdemo.php',{a:342,b:'test'});
</script>
</html>
效果同上类似。load()也可以直接加载xml、html或者html的某个片段内容。 './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</bodydiv id="div1">
p>下面是ajax要加载的内容p ="ajaxhtml">demo.html文件中请求了这里的数据div>
>
结果：
2、$.get/post(url,param,callback,type)：向url发送带参数的get请求，返回xhr实例
界面采用上面的，修改js $('#btn').on(function(){
$.get('./demo.txt',255)">function(res)
{
$('#ajaxcontent').text(res)
});
});
从demo.txt中加载一段文本，保存为utf-8编码，不然中文会乱码 $.post()形式和$.get()基本一样，不再赘述。 3、$.getJSON(url,callback)：向url发起GET请求，把响应结果转为JSON字符串，传递给callback。返回xhr实例。相当于在$.get()中，type指定为json. function(){
$.getJSON(function(res)
{
$.each(res,255)">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 function(){
$.ajax({
url:'json',success:function(res){
$.each(res,item)
{
$("#ajaxcontent").append(
'-->'+item
);
});
}
});
});
对于没有指定的ajax参数，则使用默认值。如果发起很多相似的ajax请求，则可用$.ajaxSetup(options)设置默认值，options同$.ajax()中的options 三、Ajax事件 1、事件类型
'body').on('ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete',255)">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",128)">"block");
});
$("#txt").ajaxComplete("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>Single2select="multiple" multiple="multiple"option selected="selected">Multiple>Multiple2>Multiple3><br/>
input type="checkbox" ="check" value="check1"/> check1
="check2" checked="checked"/> check2
="radio" ="radio1" /> radio1
="radio2"/> radio2
>
console.dir($('form').serializeArray());
jQuery.each( $('form').serializeArray(),255)">function(i,field){
$("#ajaxcontent").append(field.value + " ");
});
输出： Single Multiple Multiple3 check2 radio1
原文：http://www.52php.cn/article/p-fkrasfov-bd.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |