Ajax深入学习笔记
最近在学习ajax,下面整理了一下学习的内容,以便巩固用。 同步和异步同步的意思就是客户端提交表单,发起请求后需要一直等待服务器端的响应,收到服务器端的响应后需要重新载入页面。 Ajax的基本操作步骤Ajax指异步的JavaScript和XML,JS无需等待服务器响应,而是在继续执行脚本内容,响应就绪后对响应进行处理。若是同步,则JS代码会收到服务器的响应后再继续执行。 1. 创建XMLHttpRequest对象 var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求 3.服务器响应 if(xhr.status>=200 && xhr.status<300 || xhr.status=304){
//do something
}else{
alert("request was unsuccessful: "+xhr.status);
}
4.异步处理 xhr.onreadystatechange=function(){
if(xhr.readyStatus==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
//do something
}else{
alert("request was unsuccessful: "+xhr.status);
}
}
};
5.终止异步 要想把ajax学得透彻,了解HTTP协议还是很有必要的。 HTTP头部浏览器在发送XHR请求的同时也会默认发送一些头部信息,浏览器能够显示的字符集(Accept-charset)、当前页面设置的任何Cookie等。也可以自定义发送信息,通过调用XHR.setRequestHeader(header,value)向请求添加头部。该方法应当放在open之后send之前。 1. GET请求 function addURLPara(url,name,value){
url += (url.indexOf("?") == -1 ? "?":"&");
url += encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
2.POST请求 function submitData(){
var xhr = createXHR();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
//do something
}else{
alert("request was unsuccessful: "+xhr.status);
}
};
}
xhr.open("post","url",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //表单提交时的内容类型,如果提交的是表单数据必须要写这个
var form = document.getElementById("user-info");
xhr.send(serialize(form));//表单序列化
}
使用该方式必须设置自定义请求头部信息Content-Type,以说明请求的内容类型。这样服务器就会根据请求的内容类型来解析表单中的数据。 在来看看新一代的XHR即XHR2级对象又提供了哪些方法吧。 XHR2级对象1. FormData类型 方式二: 2. overrideMimeType(“text/xml”)方法 3.超时设定(IE8+支持) 那么我们通过XHR对象传递的数据都有哪些格式呢?下面再来看看常用的几种数据格式。 传送的数据格式1.XMLXML是一种数据格式,在异步应用程序中常有以下两种用法: 客户端发送请求 2. json**json基本概念和格式 当需要在客户端和服务器端之间传递大量数据时,使用Jason格式的数据会很灵活,便于解析。 "name":value
注意名称有引号,当value为字符串时也应该加引号。
{
"staff":[ {"name":"anna","age":20},{"name":"mike","age":10},{"name":"lily","age":30} ] }
最外层的大括号{}表示这是一个json对象。 **在JS中解析json (1)使用eval()解析 var jsondata='{"staff":[{"name":"anna","age":20},{"name":"mike","age":10},{"name":"lily","age":30}]}'; //注意这个json字符串要放到同一行;服务器端的返回的数据应该写成这样一个json对象字符串
var jsonobj=eval('('+jsondata+')'); //eval使用这种方式解析
alert(jsonobj.staff[0].name);
采用eval,不仅会解析成一个JavaScript对象,还会执行json字符串中的方法,例如把”age”:20改为”age”:alert(“hello”),则会执行这个alert语句。 (2)使用JSON.parse()解析 var jsonobj=JSON.parse(jsondata);
使用这种方式解析不会执行json字符串中的方法,会报错,json字符串语法不合法。 由于eval方法不会检查语法,这样很危险,如果接收的json数据中包含恶意代码会被执行。 检查json语法的格式化校验在线工具:jsonlint.com readyStateChange事件补充说明该事件的作用是提供了与文档或元素的加载状态有关的信息。支持该事件的对象都有一个readyState属性。该属性有如下几个值: jQuery中的AjaxjQuery提供了三个层次的ajax方法,位于最底层的$.ajax()、第二层的$.load()、$.get()、$.post(),以及第三层的$.getScript()、$.getJson()。 1. $(‘selector’).load(url,data,function)方法 $('#result').load('ajax/test.html #container');
调用方式为:$ele.load(url,function)即可将响应的html片段写入ele元素中。 回调函数会在HTML 已经被插入完时被调用,在每个匹配的元素上被调用一次,并且 this始终指向当前正在处理的 DOM 元素。 默认使用 GET 方式 , 如果data参数提供一个对象,那么使用 POST 方式。 2.$.get(url,function,type)和$.post() <form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" >
</div>
//JS代码为
<script> $(function(){ $("#send").click(function(){ $.get("get1.php",{username:$('#username').val(),content:$('#content').val()},function(data){ $("#resText").html(data); }); }) }); </script>
当返回数据为XML文档时,可以像解析html文档一样解析其中的元素,先用$(data)将返回文档变成一个jQuery对象(data就相当于html DOM树中的document结点),然后可以使用jQuery中的相关方法获取到树中结点的值,再构造成html格式的字符串然后通过html()方法写入网页中。 post方法与get结构相同,其区别有一下几个: 3. $.getScript(url,[callback])和$.getJson(url,[data],[callback]) $.getScript用来加载JavaScript文件(有时候没有必要一次性加载完所有js文件,需要的时候再加载)。加载完后会自动执行。 $.getJson用于加载json文件,和$.getScript的函数结构一样。补充一点就是回调函数的参数data是获取到的Json文件对象。可使用全局方法$.each(data,function(index/key,ele/value))来遍历集合data(可为数组或对象)中的元素。 4. $ajax() $("#save").click(function(){
$.ajax({
type:"POST",url:"serverjson.php",data:{ //传送给服务器的数据
name:$("#staffName").val(),number:$("#staffNumber").val(),sex:$("#staffSex").val(),job:$("#staffJob").val()
},dataType:"json",//期望服务器发送会的数据格式
//请求成功的回调函数,data为返回的数据
success:function(data){
if(data.success){
$("#createResult").html(data.msg);
}else{
$("#createResult").html("出现错误:"+data.msg);
}
},//请求失败的回调函数,参数为XHR对象
error:function(jqXHR){
alert("发生错误:"+jqXHR.status);
}
})
})
所有jQuery的Ajax方法都返回一个XMLHTTPRequest对象的超集, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |