AJAX
AJAX:通过 JS 异步的向服务器发送请求并接受响应数据,响应数据的格式原来是xml,后来变成了JSON
同步请求:
当客户端向服务器发送请求时,服务器在处理的过程中,浏览器只能等待,效率较低
异步请求:
当客户端向服务器发送请求时,服务器在处理的过程中,浏览器可以做其他的操作,不需要一直等待
AJAX的优点：
- 异步访问
- 局部刷新
AJAX的使用场景：
- 搜索建议
- 表单验证
- 前后端完全分离时使用
2.AJAX核心对象 - 异步对象(XMLHttpRequest)
-
什么是XMLHttpRequest
简称为 xhr，称为 “异步对象” 代替浏览器向服务器发送异步的请求并接收响应
-
创建异步对象
主流的异步对象是 XMLHttpRequest 类型的.并且所有主流浏览器(IE7+,Chrome,Firefox,Safari,Opera)也都支持 XMLHttpRequest.但在IE低版本浏览器(IE7以及以下),就不支持XMLHttpRequest,需要使用 ActiveXObject() 来创建异步对象
如果支持 XMLHttpRequest var xhr = new XMLHttpRequest() 如果不支持 XMLHttpRequest var xhr = new ActiveXObject("Microsoft.XMLHTTP") -
xhr 的成员
1.方法 - open() 作用:创建请求 语法:open(method,url,async) method:请求方式,取值 'get' 或 'post' url:请求地址,字符串 async:是否采用异步的方式发送请求 true:异步请求 false:同步请求 ex: xhr.open('get','/server',true); 2.属性 - readyState 作用:请求状态,通过不同的请求状态值来表示xhr与服务器的交互情况 由 0-4 共 5 个值表示5个不同的状态 0 : 请求尚未初始化 1 : xhr已经与服务器建立连接 2 : 服务器端已经接收请求 3 : 请求正在处理中 4 : 响应已经完成 3.属性 - status 作用:服务器端的响应状态码 200 : 表示服务器已经正确处理请求并给出响应 404 : 请求资源不存在 500 : 服务器内部错误 4.属性 - responseText 作用 : 接收服务器端响应回来的数据 5.事件 - onreadystatechange 作用 : 每当 xhr 的 readyState 值发生改变的时候都要触发的行为操作 - 回调函数 关注: 1.xhr 的 readyState 是否为 4 2.xhr 的 status 是否为 200 如果以上两点同时满足的话,则可以接收响应数据(responseText) ex: xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); } } 6.方法 - send() 作用:通知 xhr 开始向服务器发送请求 语法:xhr.send(body) get : body的值为 null xhr.send(null) post: body的值为具体请求提交的数据 xhr.send("请求数据")
4.AJAX的操作步骤
- GET请求
- 创建 xhr 对象
- 创建请求 - open()
- 设置回调函数 - onreadystatechange # 判断状态,接收响应,业务处理
- 发送请求 - send(null)
- POST请求
- 创建 xhr 对象
- 创建请求 - open()
- 设置回调函数 - onreadystatechange # 判断状态,接收响应,业务处理
- 发送请求 - send(具体数据)
5.原生的AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function btnAjax(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
//xhr.open('get','/server',true);
xhr.open('get','/server?uname=wangwc',true);
//3.设置回调函数
xhr.onreadystatechange=function(){
//判断xhr的状态以及服务器的状态
if(xhr.readyState==4&&xhr.status==200){
document.getElementById('show').innerHTML=xhr.responseText
}
}
//4.发送请求
xhr.send(null);
}
</script>
<!--<button οnclick="console.log(createXhr())">测试异步对象</button>-->
<div id="show"></div>
<button onclick="btnAjax()">AJAX请求</button>
</body>
</html>
js 遍历json对象
packJson = [
{"name":"nikita", "password":"1111"},
{"name":"tony", "password":"2222"}
];
for(var p in packJson){//遍历json数组时，这么写p为索引，0,1
alert(packJson[p].name + " " + packJson[p].password);
}
for(var i = 0; i < packJson.length; i++){
alert(packJson[i].name + " " + packJson[i].password);
}
jqury 遍历json对象
$arr.each(function(i,obj){
i : 遍历出来的元素的下标
obj : 遍历出来的元素
});
$.each(arr,function(i,obj){
i : 遍历出来的元素的下标
obj : 遍历出来的元素
});
6.使用 jquery 操作 AJAX
1. $obj.load(url[,data][,callback])
作用:远程加载数据并加载到$obj元素中
url : 远程请求的地址
data : 要传递的参数
1.字符串拼参数,采用 get 方式发送请求
2.使用 JSON 格式拼参数,采用 post 方式发送请求
callback : 请求和响应完成之后的回调函数
function(resText,statusText){
resText : 响应回来的文本
statusText : 响应回来的状态文本
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnLoad").click(function(){
var params = {
"uname":"wangwc",
"uage":30
}
$("#show").load('/02-jq-load',params,function(resText,statusText){
console.log("响应回来的文本是:"+resText);
console.log("状态文本是:"+statusText);
$(this).html("<h1>"+resText+"</h1>");
});
});
});
</script>
</head>
<body>
<button id="btnLoad">使用load方法加载数据</button>
<div id="show"></div>
</body>
</html>
2.$.get(url[,data][,callback][,type])
作用:使用 get 方式异步的向服务器发送请求
url : 远程请求的地址
data : 请求参数 (可选)
callback : 响应成功后的回调函数(可选)
function(resText){
resText : 表示响应回来的数据
}
type : 响应回来的数据的数据类型
1.html : 响应回来的文本当成HTML文本处理
2.text : 响应回来的文本当成text文本处理
3.json : 响应回来的文本当成JSON进行处理(转换成JS对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnGet").click(function(){
$.get('/03-jq-get',function(resText){
//resText表示的是响应回来的数据
console.log(typeof(resText));
console.log(resText);
console.log(resText.uname);
console.log(resText.uage);
},'json');
});
});
</script>
</head>
<body>
<button id="btnGet">使用get方式发送请求</button>
</body>
</html>
$.post(url[,data][,callback][,type])
url : 远程请求的地址
data : 请求参数 (可选)
callback : 响应成功后的回调函数(可选)
function(resText){
resText : 表示响应回来的数据
}
type : 响应回来的数据的数据类型
1.html : 响应回来的文本当成HTML文本处理
2.text : 响应回来的文本当成text文本处理
3.json : 响应回来的文本当成JSON进行处理(转换成JS对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnPost").click(function(){
var params = {
'uname':'wangwc',
'ugender':'男'
}
$.post('/04-jq-post',params,function(data){
$("#show").html(data);
});
});
});
</script>
</head>
<body>
<button id="btnPost">发送post请求</button>
<div id="show"></div>
</body>
</html>