ajax定义
Asynchronous JavaScript and XML,意思是异步JS和XML;
解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了,我去旁边继续执行等结果,后面排队的继续不用等我结果出来再执行。
这是对于ajax的特点来设计的,因为ajax对后端数据的请求需要时间,而这个时间不利用起来就是浪费。当然,如果必须要等前一个的结果怎么办,这就使用到JS中的重要部分——回调函数了,其实回调在JS中应用很多,只是我们对它没有概念而已,像点击事件执行的就是回调(先绑定事件,只有在点击发生时,才会执行)。那么ajax也一样,先请求数据,只有在状态改变时才会执行接下来的(这个状态包括请求成功和请求失败)。
ajax特点:AJAX 是一种用于创建快速动态网页的技术,对网页的某部分进行更新,不用刷新整个网页。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页面。
ajax工作原理
get请求
function btnClick() {
//创建核心对象
xmlhttp = null;
if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText)
}
}
//open设置请求方式和请求路径
xmlhttp.open("get", "/Ajax/ajax2?username=张三");//一个servlet,后面还可以写是否同步
//send 发送
xmlhttp.send();
}
POST请求
function btnClick() {
//创建核心对象
xmlhttp = null;
if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xmlhttp.onreadystatechange = function() {
/* alert(xmlhttp.readyState); */
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText)
}
/* alert(123); */
}
//open设置请求方式和请求路径
xmlhttp.open("post", "/Ajax/ajax2");//一个servlet,后面还可以写是否同步
//设置请求头
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")
//send 发送
xmlhttp.send("username=张三");
}
状态说明
onreadystatechange表示请求状态改变的事件触发器
readystate表示请求状态,4表示完成,具体如下表:
第一种说法
第二种说法
0:初始化,XMLHttpRequest对象还没有完成初始化
1:载入,XMLHttpRequest对象开始发送请求
2:载入完成,XMLHttpRequest对象的请求发送完成,已收到全部响应内容但尚未解析
3:解析,XMLHttpRequest对象开始解析服务器的响应内容
4:完成,XMLHttpRequest对象读取服务器响应结束
第三种说法
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
封装一个ajax方法
function ajax(){
var ajaxData = {
type: (arguments[0].type || "GET").toUpperCase(),
url: arguments[0].url || "",
async: arguments[0].async || "true",
data: arguments[0].data || null,
dataType: arguments[0].dataType || "json",
contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8",
beforeSend: arguments[0].beforeSend || function(){},
success: arguments[0].success || function(){},
error: arguments[0].error || function(){}
}
ajaxData.beforeSend()
var xhr = createxmlHttpRequest();
xhr.responseType=ajaxData.dataType;
xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
xhr.setRequestHeader("Content-Type",ajaxData.contentType);
xhr.send(convertData(ajaxData.data));
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200){
ajaxData.success(xhr.response)
}else{
ajaxData.error()
}
}
}
}
function createxmlHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function convertData(data){
if( typeof data === 'object' ){
var convertResult = "" ;
for(var c in data){
convertResult+= c + "=" + data[c] + "&";
}
convertResult=convertResult.substring(0,convertResult.length-1)
return convertResult;
}else{
return data;
}
}
ajax({
type:"POST",
url:"ajax.php",
dataType:"json",
data:{
"name":"abc",
"age":123,
"id":"456"
 },
beforeSend:function(){
//some js code
},
success:function(msg){
console.log(msg)
},
error:function(){
console.log("error")
}
})
IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest(); IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。使用下面的语句创建: var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);
GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;POST 请求中,在发送数据之前,要设置表单提交的内容类型;