一、AJAX - 阿贾克斯
1、什么是AJAX?
Asynchronous Javascript And Xml
是可以创建快速动态网页的技术。可以实现异步更新,而不需要加载整个网页,只加载需要更 新某部分网页。
同步访问:当客户端向服务器发送请求时,服务器在处理过程中,浏览器只能等待,效率偏 低。
异步访问:当客户端向服务器发送请求时,服务器在处理过程中,客户端可以做其他的操作 不需要一直等待,效率偏高。
** Xml : eXtensible Markup Language
可扩展的 标签 语言
AJAX优点:
1、异步 访问
2、局部 刷新
AJAX的使用场合:
1、搜索建议
2、表单验证
3、前后端完全分离
2、AJAX的核心对象 – 异步对象(XMLHttpRequest)
1、什么是XMLHttpRequest?
简称为“xhr”,称为异步对象,代替浏览器向服务器发送请求并接受响应
xhr是由JS来提供
2、创建异步对象(xhr)
主流的异步对象是XMLHttpRequest类型的,并且主流浏览器都支持(IE7+, Chorme,Firefox,Opera)全部支持,但不支持IE低版本浏览器(IE6以及以下)
XMLHttpRequest,需要使用ActiveXobject() 来创建异步对象
支持 XMLHttpRequest:
new XMLHttpRequest()
不支持 XMLHttpRequest:
new ActiveXobject("Microsoft,XMLHTTP")
下面是common.js代码:
function getXhr(){
//如果浏览器支持XMLHttpRequest,则创建XMLHttpRequest的对象并返回
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
//如果浏览器不支持XMLHttpRequest的话,则创建ActiveXObject的对象并返回
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
3、xhr的成员
1、方法 - open()
作用:创建请求
语法:open(method,url,async)
method:请求方法,取值为'get'或'post'
url:请求地址,字符串
async:是否采用异步的方式发送请求
true:使用异步方式发送请求
alse:使用同步方式发送请求
ex:
xhr.open('get','/server',true)
2、属性 - readyState
作用:请求状态,通过不同的请求状态值来表示xhr与服务器的交互情况
由0-4共五个值来表示五个不同的状态
0:请求尚未初始化
1:xhr已经与服务器建立链接
2:服务器端已经开始接收请求
3:请求正在处理中
4:响应已完成
3、属性 - status
作用:表示服务器端的响应状态码
200:表示服务器正确处理所有的请求以及给出响应
404:请求资源不存在
500:服务器内部错误
4、属性 - responseText
作用:服务器端的响应数据
5、事件 - onreadystatechange
作用:每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
在该函数中,只有当readyState的值为4并且status的值为200时,可以正常接收 responseText
6、方法 - send()
作用:通知xhr向服务器发送请求
语法:send(body)
body:表示请求的主体
get请求:没有请求主体的,所以body的值为null
xhr.send(null)
post请求:有请求主体的,所以body的位置处要表示请求数据
xhr.send("请求数据")
xhr.send("参数=值&参数=值")
4、AJAX的操作步骤
1、GET请求
1、创建xhr对象
2、创建请求 - open()
3、设置回调函数 - onreadystatechange
判断状态并且接收数据
4、发送请求 - send()
注意:如果有请求提交数据,则需要在url的后面拼查询字符串
2、POST请求
1、请求提交的数据要作为send() 的参数进行提交
xhr.send('参数=值&参数=值');
2、修改请求消息头
在AJAX中,提交POST请求时,AJAX默认将Content-Type请求消息头的值修改 为”text/plain“,所以导致数据无法正常提交
解决方案:
将Content-Type的请求消息头再修改回”application/x-www-form- urlencoded“即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
注意:如果有请求提交数据,则需要在send()中传递数据
例如:
$(function(){
$("#btnAjax").click(function(){
//1.获取xhr
var xhr = getXhr();
//2.创建请求
xhr.open(‘get’,’/01-server’,true);
//3.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
var resTxt = xhr.responseText;
console.log(resTxt);
}
}
//4.发送请求
xhr.send(null)
});
});
二、JQUERY 与 AJAX
1、$obj.load(url,data,callback)
作用:异步加载数据到 $obj 元素中
参数:
url:异步请求的地址
data:传递给服务器端的参数(可选),该数据将决定请求方法是什么
1、可以传递普通的字符串
"name=MrWang&age=30"
2、可以是JSON对象
{
"name":"Mrwang",
"age":30,
}
callback:异步请求成功之后的回掉函数(可选)
取值为匿名函数
function(resText,statusText){
rexText:响应数据,
statusText:响应数据的状态
}
2、$.get(url,[data],[callback],[type])
url:异步请求地址
data:异步请求的参数
1、字符串:name = value&name=value
2、JSON:{"name":"value","name":"value"}
callback:请求成功后的回调函数
function(resText){
rexText:表示响应成功后的响应数据
}
type:响应回来的数据的类型
1、html:响应回来的是html文本
2、text:响应回来的是数据是text文本
3、json:json对象
4、script:js脚本代码
注意:如果此处指定了类型,那么在callback中,无需做类型的转换
3、$.post()
4、$.ajax()
作用:自定所有的ajax行为
语法:$.ajax({ajax设置的参数数据对象});
参数:
1、url:字符串,表示异步请求的地址
2、type:字符串,请求方式(get,post)
3、data:传递到服务器端的参数
1、字符串:"name=value&name=value"
2、JSON对象:{"name":"value"}
4、dataType:字符串,响应回来的数据的格式
1、html
2、xml
3、text
4、script
5、json
6、jsonp
5、success:回调函数,请求响应成功时的回调函数
function(data){
data:表示服务器端响应回来的数据
}
6、error:回调函数,请求或响应失败时的回调函数
7、beforeSend:回调函数,在发送ajax请求之前的回调函数,如果return false的话则表示终止本次请求
例子:以下便是Jquery中$ajax():
$(function(){
$("#btnload").click(function(){
var params = {
'name':'MrWang',
'age':32,
}
$("#show").load('/02-server',
params,
function(resText,statusText){
console.log("响应成功");
console.log("resText:"+resText);
console.log("statusText:"+statusText);
});
});
});