最近在学习Ajax记录一下自己的学习收获,都是比较基础的内容。
XMLHttpRequest 对象用于在后台与服务器交换数据。
它有以下功能:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据**
前言:
在开始学习Ajax时,我用的是PHP来做为服务器端传递数据,应用的是mac,在安装XAMMP时也研究了一阵,最后安装并测试成功的是以下这个版本。(window版的方法百度很多)
https://www.apachefriends.org/zh_cn/download.html
在安装成功后运行并开始 Apache Web Server,MySQL,ProFTPD,然后在任一浏览器的地址栏中输入
localhost 回车会打开以下页面,证明成功
注:(若MySQL一直无法启动而其他的可以启动,可以查看一下电脑上是否安装了MySQL,mac在安装后会在系统偏好设置最后一行中显示MySQL的图标,点击后进入
当显示MySQL stop时你的XAMMP里面的MySQL才能成功启动)
接下来就正式开始学习Ajax了
AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,在学习Ajax之前要有HTML/XHTML,CSS,JavaScript/DOM的基础。
AJAX = 异步 JavaScript 和 XML
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这就表示Ajax可以在不重新加载整个网页的情况下,对网页的某一部分进行刷新。
传统的网页如果需要更新内容,必需重载整个页面,尤其是在填写表单的时候,如果有错误就要刷新整个页面,让人很头疼。
XMLHttpRequest 是 AJAX 的基础。
那什么是XMLHttpRequest呢 ?它是用于在后台与服务器交换数据的对象。
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象但是IE5,IE6要使用ActiveX 对象。解决方法如下:
Var request=null;
If(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject(“Microsoft.XMLHTTP”);
}
使用Ajax发送请求:
request.open(“POST”,”create.php”,true);
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
//Content-type表示以间值形式发送表单,必须写在open和send中间不然会抛出异常
request.send(“name=小明&sex=男”)
响应请求
responseText: 获得字符串形式的响应数据
responseXML: 获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader(): 获取所有的响应报头
getResponseHeader(): 查询响应中的某个字段的值
readyState属性:
返回成功时得到通知
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已经调用了
2:请求已接收,接收到头信息
3:请求处理中,接收到响应主体
4:请求完成,响应完成
Ajax通过onreadystatechange来监听每次readyState属性变化
request.onreadystatechange=function(){
if(request.readyState===4&&request.state===200){
//do something
}
}
用jQuery来实现Ajax
在实际的应用中,我们常常用到的是使用jQuery的方法来实现Ajax
$.ajax([settings])方法
type:类型,”POST”或”GET”,默认为”GET”
url:发送请求的地址
data:是一个对象,连同请求发送到服务器的数据
dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来只能判断,一般我们采用json格式,可设置为”json”
success:是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串
erro:是一个方法,请求失败时调用此函数,传入xmlhttpRequest对象
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType:"php",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
使用load()方法异步请求数据
使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,调用格式为:
load(url,[data],[callback])
url为加载服务器的地址,
可选项data参数为请求时发送的数据,
callback参数为数据请求成功后,执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("https://www.imooc.com/data/fruit_part.html",function() {
$this.attr("disabled", "true");
});
})
});
</script>
使用getJSON()方法异步加载JSON格式数据
使用getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
$.getJSON(url,[data],[callback])
url参数为请求加载json格式文件的服务器地址,
可选项data参数为请求时发送的数据,
callback参数为数据请求成功后,执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("https://www.imooc.com/data/sport.json",function(){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
使用getScript()方法异步加载并执行js文件
使用getScript()
方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示:
$.getScript(url,[callback])
参数url为服务器请求地址,
可选项callback参数为请求成功后执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this); $.getScript("http://www.imooc.com/data/sport_f.js",function() {
$this.attr("disabled", "true");
});
})
});
</script>
使用get()方法以GET方式从服务器获取数据
使用get()
方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:
$.get(url,[callback])
参数url为服务器请求地址,
可选项callback参数为请求成功后执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function() {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
})
});
</script>
使用post()方法以POST方式从服务器发送数据
与get()
方法相比,post()
方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:
$.post(url,[data],[callback])
参数url为服务器请求地址,
可选项data为向服务器请求时发送的数据为参数格式为key/value方式。
可选项callback参数为请求成功后执行的回调函数。
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("https://www.imooc.com/data/check_f.php",{
name:$("#txtNumber").val()
}
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
使用serialize()方法序列化表单元素值
使用serialize()
方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()
方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:
$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
<script type="text/javascript">
$(function () {
$ajaxSetup({
dataType:"text",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
使用ajaxStart()和ajaxStop()方法
ajaxStart()
和ajaxStop()
方法是绑定Ajax事件。ajaxStart()
方法用于在Ajax请求发出前触发函数,ajaxStop()
方法用于在Ajax请求完成后触发函数。它们的调用格式为:
$(selector).ajaxStart(function())
$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()
方法绑定的函数,请求成功后,执行ajaxStop ()
方法绑定的函数。
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在请求数据...");
});
$("#divload").ajaxStop(function(){
$(this).html("数据请求完成!");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫:" + data.name + "</li>");
$("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}
});
})
});
</script>
以上为自己归纳的Ajax基础知识用法,如有错误请指教