认识AJAX及函数使用
一、什么是AJAX
Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是,如果没有Ajax技术,改变网页的一小部分(哪怕是一行文字、一张图片)都需要重新加载一次整个页面,而有了Ajax之后,就可以实现在网页不跳转不刷新的情况下,在网页后台提交数据,部分更新页面内容。二、AJAX的原声写法
1.XMLHttpRequest对象
XMLHttpRequest 对象用于在后台与服务器交换数据,能够在不重新加载页面的情况下更新网页,在页面已加载后从服务器请求数据,在页面已加载后从
服务器接收数据,在后台向服务器发送数据。所以XMLHttpRequest对象是Ajax技术的核心所在。
2.实现流程
创建 XMLHttpRequest对象——>打开请求地址,初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。
废话不多说,直接上代码
var xmlhttp;
:
function loadXMLDoc(url) {
xmlhttp = null;
if (window.XMLHttpRequest){
//code for all new beowsers
xmlhttp = new XMLHttpRequest();//here is creat XMLHttpRequest object
} else if (window.ActiveXObject){
//code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp){
xmlhttp.open("GET",url,true); //request mode and request address
xmlhttp.send(null); //send request
xmlhttp.onreadystatechange = state_Change; //monitor callback fun
} else {
alert("Your browser dose not support XMLHTTP");
}
}
// statr_Change callback function
function state_Change() {
if(xmlhttp.readyState == 4&&xmlhttp.status == 200) {
// to hide these two conditions is to express the succ of the request 4 = "loaded", 200 = OK
var data = xmlhttp.responseText;
} else {
alert("Problem resrieving XML data");
}
}
3.原声写法中的注意点
(1).open()的第三个参数中使用了“true”,该参数规定请求是否异步处理,默认是异步。
true表示脚本会在send()方法之后继续执行,而不等来自服务器的相应。
(2).关于readyState
(3).关于status由服务器返回的HTTP状态代码,200 表示成功,404 表示 “Not Found”错误。当readyState小于 3 的 时候读取这一属性会导致一个异常。(后面有http状态码详细解读)
Jquery中的AJAX
Jquery对原声Ajax做了很好的封装,使用起来非常非常的月贴(舒服),比如$ajax,$get,$post,$getjson等根据不用需要进行调用,写法简洁明了,但是为兼顾哥哥方法在这里我以一个通用的方法$ajax为例做一个简单的分析,按照下面的模式写好各个参数,就能成功进行Ajax请求了,可能在实际中使用$POST,$GET这两个方法比较多,废话少说,看下面代码如何用jquery写ajax:
3.原声写法中的注意点
(1).open()的第三个参数中使用了“true”,该参数规定请求是否异步处理,默认是异步。
true表示脚本会在send()方法之后继续执行,而不等来自服务器的相应。
(2).关于readyState
(3).关于status由服务器返回的HTTP状态代码,200 表示成功,404 表示 “Not Found”错误。当readyState小于 3 的 时候读取这一属性会导致一个异常。(后面有http状态码详细解读)
Jquery中的AJAX
Jquery对原声Ajax做了很好的封装,使用起来非常非常的月贴(舒服),比如$ajax,$get,$post,$getjson等根据不用需要进行调用,写法简洁明了,但是为兼顾哥哥方法在这里我以一个通用的方法$ajax为例做一个简单的分析,按照下面的模式写好各个参数,就能成功进行Ajax请求了,可能在实际中使用$POST,$GET这两个方法比较多,废话少说,看下面代码如何用jquery写ajax:
$.ajax({
type:'', // Request mode: get or post
url:'', //request url
async:"", // Whether to support asynchronous refresh,default true
data:"", // need submit data
dataType:"", //the type if data retured bt the server
success:function(data){
//the callback function after the request,data is by the sercer returned
},
error:function(data){
//the callback function is error,
}
})
四、GET or POST?
作为Ajax最常用的两种数据提交方式,GET和POST有着自己的特点和使用场景,正确区分GET和POST的不同根据实际需求进行选用在开发中十分重要,简单是关键!!!
关键点:
1.传递数据的方式不同:get是直接把请求数据放在url的后面,是可见的,post的请求数据不会显示在url中,是不可见得。
2.数据长度和数据类型的差异:get有数据长度的限制,且数据类型只允许ASCII(ASCII是英文American Standard Code for Information Interchange的缩写。ASCII码是目前计算机最通用的编码标准,方便网站站长程序猿ASCII码查询)字符,post在这两方面都没有限制。
3.安全性的差异:get不安全,post更安全。(废话,一个安全,一个不安全)
由此得出两者使用的场景:
get使用方便,使用于页面之间非敏感数据的简单传值,post使用较为安全,适用于向服务器发送密码、token等敏感数据。
五、success和complete区别
Jquery封装的Ajax回调函数中,success、error、complete是最常用的三个,其中,success和error很好的区别,一个是请求成功回调用的,另一个是请求失败用的,从字上面就可以so ease 的理解,但是success和complete容易混淆,所以这里我做了一个特别说明:
success:请求成功后回调函数,(我只有在成功后出来)。
complete:请求完成后回调函数(不管成功失败,我都会出来的)。
请注意括号里面的,没错区别就在于括号里面的,也就是说调用的success一定会调用complete,但是调用comlaete不一定会调用success。(状态码404、403、301、302...都会进入到complete,只要没毛病就会调用)
六、XML -> JSON
Ajax中的“x”就是XML。
xml:可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使用其具有结构标记语言。
xml作为一种数据交互格式,广泛用字啊计算机领域,然而,随着json的发展,json以其明显的有事已经“贱贱”的取代了xml成为现在数据交互的格式标准,所以在这里,想强调的是,json现在是主流的!主流的!主流的!交互格式,前后端的交互标准,无论是前端提交后台的数据,还是后台返回给前端的数据,都最好统一成json格式。
七、jquery中封装的ajax方法使用
.ajaxComplete()-------------请求完成时
.ajaxError()-----------请求失败时
.ajaxSend()-------------在Ajax请求发送时附加一个function去执行
.ajaxStart()-----------请求开始时
.ajaxStop()----------请求 结束时
.ajaxSuccess()--------------请求成功时
.load()---------------从服务器加载数据并将返回的html替换到选择的元素中
.Jquery.post()-----------使用HTTP POST请求加载服务器端数据
.serialize()------------将from元素集编码成一个字符串以便提交
.serializeArray()---------------将from元素集编码成一个键值对的数组或对象
.Jquery.param()-----------------创建一个序列化的数组或对象,使得适用于一个URL查询字符串或者AJax请求
.Jquery.getScript()----------------从服务器端加载一个js文件,然后执行它
.Jquery.getJSON()---------------从服务器端加载用json编码过得数据
.Jquery.get()-----------从服务器加载数据简单说其中亮点
四、GET or POST?
作为Ajax最常用的两种数据提交方式,GET和POST有着自己的特点和使用场景,正确区分GET和POST的不同根据实际需求进行选用在开发中十分重要,简单是关键!!!
关键点:
1.传递数据的方式不同:get是直接把请求数据放在url的后面,是可见的,post的请求数据不会显示在url中,是不可见得。
2.数据长度和数据类型的差异:get有数据长度的限制,且数据类型只允许ASCII(ASCII是英文American Standard Code for Information Interchange的缩写。ASCII码是目前计算机最通用的编码标准,方便网站站长程序猿ASCII码查询)字符,post在这两方面都没有限制。
3.安全性的差异:get不安全,post更安全。(废话,一个安全,一个不安全)
由此得出两者使用的场景:
get使用方便,使用于页面之间非敏感数据的简单传值,post使用较为安全,适用于向服务器发送密码、token等敏感数据。
五、success和complete区别
Jquery封装的Ajax回调函数中,success、error、complete是最常用的三个,其中,success和error很好的区别,一个是请求成功回调用的,另一个是请求失败用的,从字上面就可以so ease 的理解,但是success和complete容易混淆,所以这里我做了一个特别说明:
success:请求成功后回调函数,(我只有在成功后出来)。
complete:请求完成后回调函数(不管成功失败,我都会出来的)。
请注意括号里面的,没错区别就在于括号里面的,也就是说调用的success一定会调用complete,但是调用comlaete不一定会调用success。(状态码404、403、301、302...都会进入到complete,只要没毛病就会调用)
六、XML -> JSON
Ajax中的“x”就是XML。
xml:可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使用其具有结构标记语言。
xml作为一种数据交互格式,广泛用字啊计算机领域,然而,随着json的发展,json以其明显的有事已经“贱贱”的取代了xml成为现在数据交互的格式标准,所以在这里,想强调的是,json现在是主流的!主流的!主流的!交互格式,前后端的交互标准,无论是前端提交后台的数据,还是后台返回给前端的数据,都最好统一成json格式。
七、jquery中封装的ajax方法使用
.ajaxComplete()-------------请求完成时
.ajaxError()-----------请求失败时
.ajaxSend()-------------在Ajax请求发送时附加一个function去执行
.ajaxStart()-----------请求开始时
.ajaxStop()----------请求 结束时
.ajaxSuccess()--------------请求成功时
.load()---------------从服务器加载数据并将返回的html替换到选择的元素中
.Jquery.post()-----------使用HTTP POST请求加载服务器端数据
.serialize()------------将from元素集编码成一个字符串以便提交
.serializeArray()---------------将from元素集编码成一个键值对的数组或对象
.Jquery.param()-----------------创建一个序列化的数组或对象,使得适用于一个URL查询字符串或者AJax请求
.Jquery.getScript()----------------从服务器端加载一个js文件,然后执行它
.Jquery.getJSON()---------------从服务器端加载用json编码过得数据
.Jquery.get()-----------从服务器加载数据简单说其中亮点
ajaxstar和ajaxstop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="test/jquery.js"></script>
</head>
<body>
<div class="trigger">trigger</div>
<div class="result"></div>
<div class="log1"></div>
<div class="log2"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){ //在此就不写注释了,字面上都是可以看懂的 嘻嘻
$('.log1').ajaxStart(function(){
$(this).text('start handler');
});
$('.log2').ajaxStop(function(){
$(this).text("ajax stop");
});
$('.trigger').click(function(){
$('.result').load('xxxx.html')
})
})
</script>
</html>
WEB前端互动交流群 434623999