Ajax学习笔记
目录
前言
Ajax(Asynchronous Javascript And XML)即为异步的JavaScript和XML，其核心为XMLHttpRequest对象（简称为XHR）。这种技术方式虽然名字中包含XML的成分，但是通信与数据格式是无关的，其最大的优势就是无须刷新新页面就可以从服务器获得数据。
Ajax脚本基本框架
- 创建xhl对象；
- 设置onreadystatechange()事件回调，处理响应数据返回的数据；
- 初始化一个请求，执行xhr的open（）方法；
- 设置请求头信息（可选）；
- 发送请求send（）。
简易代码
open()方法是建立前端到服务器的请求,而send方法是向服务器发送请求。 xhr.open(‘get’,url,’true’);//open中有三个参数,第一个参数用来指定使用get还是post方式提交,第二参数是指定要发送的url地址,第三个参数指定是否使用异步,第三个参数默认是true;
其中url相对于执行代码的当前页面，调用open（）方法并不会真正发送请求，只是启动一个请求准备发送而已。
向服务器端发送了请求，服务器会根据我们的参数或者是它自身运算的结果来给我们返回数据，这里我们并不是一定要发送给数据库参数的，那么我们现在发送了请求后,我们面临一个问题,我们怎么判断请求是否发送成功以及服务器时候处理了我们的请求,还有如果服务器响应了,它返给我们的数据我们该怎么去获取呢?
XHR实例上有一个readystate属性,这个属性的代表着当前XMLHttpRequest的状态:
0:请求没有发出(在调用open之前)
1:请求已经建立但还没有发出
2:请求已经发出
3:请求正在处理当中
4:请求已经被服务器处理完毕,相应准备就绪
每当readystate状态改变的时候,就会调用onreadystatechange()这个函数,所以我们可以在onreadystatechange进行相应状态的判断以及相应返回数据的获取,当readystate为4时,代表着我们的请求被服务器成功的执行,但我们还需要判断,我们的需要的数据是否成功被返回了呢?我们还有一个status属性,而这个status也有很多的状态码代表着不同的响应状态,其中200代表着响应成功,并且将响应的数据返回到了前端中:
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){//请求已经成功被处理
if(xhr.status == 200){//成功的从服务器得到了响应
//这里进行处理返回的数据
}
}
}得到了响应之后,responseText表示字符串形式的相应数据,responseXML表示获取XML形式的响应数据,getAllResponseHeader():获取所有的响应报头,这里我们来完整的写一个ajax请求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>显示欢迎词</button>
<h2></h2>
</body>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
var xhr = new XMLHttpRequest(); //创建Ajax对象
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
var h2 = document.getElementsByTagName('h2')[0];
h2.innerHTML = xhr.responseText;
}
}
xhr.open('get','test.php',true);
xhr.send(null);
}
</script>
</html>以上实例可以实现通过点击显示欢迎词按钮就可以在不刷新网页的情况下显示test.php中的内容，不过要求是不跨域。
Ajax完成get请求
get请求流程
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<div align="center">
<h3>用户登录</h3>
<form action="check.php" method="get">
<p>帐号: <input type="text" name="name" id="name"></p>
<p>密码: <input type="password" name="password" id="password"></p>
<p><input type="submit" id="submit" value="提交"></p>
<p id="tips"></p>
</form>
</div>
</body>
<script>
var submit = document.getElementById('submit'); //获取提交按钮
submit.onclick = function () {
//1.创建Ajax对象
var xhr = new XMLHttpRequest();
//2.创建请求事件的监听
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status == 200){
console.log(typeof xhr.responseText);
//解析返回的json字符串
var json = JSON.parse(xhr.responseText);
var tips = document.getElementById('tips');
tips.innerHTML = '欢迎用户'+json.name+'再次回来';
}
}
//3.初始化一个url请求
var user = document.getElementById('name').value;
var password = document.getElementById('password').value;
var url = 'check.php?name='+user+'&password='+password; //生成url地址
xhr.open('get',url,true); //请求类型为get，交互方式为异步
//4.发送url请求
xhr.send(null);
return false; //禁止提交按钮的默认行为
}
</script>
</html>所有方式都是直接在一个页面完成的，由于返回的是json字符串数据，所以还是得转为json对象。
Ajax完成post请求
post请求流程
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<div align="center">
<h3>用户登录</h3>
<form action="check.php" method="post">
<p>帐号: <input type="text" name="name" id="name"></p>
<p>密码: <input type="password" name="password" id="password"></p>
<p><input type="submit" id="submit" value="提交"></p>
<p id="tips"></p>
</form>
</div>
</body>
<script>
var submit = document.getElementById('submit'); //获取提交按钮
submit.onclick = function () {
//1.创建Ajax对象
var xhr = new XMLHttpRequest();
//2.创建请求事件的监听
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status == 200){
// console.log(typeof xhr.responseText);
//解析返回的json字符串
var json = JSON.parse(xhr.responseText);
var tips = document.getElementById('tips');
tips.innerHTML = '欢迎用户'+json.name+'再次回来';
}
}
//3.初始化一个url请求
var user = document.getElementById('name').value;
var password = document.getElementById('password').value;
var data = 'name='+user+'&password='+password; //生成post请求数据
var url = 'check.php';
xhr.open('post',url,true); //请求类型为get，交互方式为异步
//4.设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//5.发送url请求,需要传入参数
xhr.send(data);
return false; //禁止提交按钮的默认行为
}
</script>
</html>实现效果与get请求一样，不过post更安全。
XML和json
当我们完成了发送请求并且从后端获取了数据后,我们应该再进一步的去思考,那么我可以指定从后端传过来的数据吗?那么接下来就出现了我们的json和XML数据格式,这两种都是我们进行前端和后端进行传送数据的格式,那么我们先来看一下XML,XML数据其实你也可以看做我们的html标签,只不过它是我们可以自定义的标签,你可以给它的标签名取的很有意义,那样就会很方便你去使用:
<china>
<province name='四川'>
<city>成都</city>
</province>
</china>
//这就是一个简单的XML格式的数据,我们对于这样的数据进行操作的时候可以使用js操作DOM对象的方法,
//xml数据必须有一个根节点另外一种经常使用的数据格式就是json了,json是一种独立于语言的数据格式,就是说它是可以在很多种语言中使用的,不限定于某一个特定的语言,而且它相较于xml来说代码量较小,而且易于解析,xml就有些数据量庞大解析不便了,但是碍于json出现的较晚,所以现在大部分人还是使用的xml,无奈与很多后端数据都是用xml存储,json的格式有些类似于我们的JavaScript中的对象字面量:
{"name":"james",
"hobby":"basketball",
"son" : {"littleson":"er","bigson":"san"}
}//这种就是一个简单的json格式数据,json数据代码量较小,但是可读性来说
还是xml看着比较顺眼,但是人看着不顺眼的代码块恰恰是机器最喜欢的得到了数据,我们还需要去解析一下才能够使用,相较于xml有些dom一样的解析方法,xml的解析在js中最长用的解析方法就是json.parse()了,而将js对象转化为json对象我们使用json.stringify(),当然了,json和xml的区别还有很多。
jQuery中的Ajax
一个简单的post请求方式在jQuery中的应用:
$.ajax({
type:"post", //请求方式
url:"a.php", //服务器的链接地址
dataType:"json", //传送和接受数据的格式
data:{
username:"james",
password:"123456"
},
success:function(data){//接受数据成功时调用的函数
console.log(data);//data为服务器返回的数据
},
error:function(request){//请求数据失败时调用的函数
alert("发生错误:"+request.status);
}
});跨域请求
通常使用ajax请求的都是在本地和我们同源的文件,因为JavaScript在设计时出于安全方面的考虑,不允许跨域请求,那么什么情况才算是跨域呢?
上边的就是我们的不同源的情况,遇到这种情况,再去使用上边所讲的方式就不行了,那么我们该怎样去解决跨域请求的问题呢?
JSONP(JSON with Padding)是 JSON 的一种“使用模式”，可用于解决主流浏览器的数据访问问题,因为html的<script>元素标签可以从其他来源动态的加载数据,所以我们可以利用<script>标签来实现跨域请求,这种方式就成为jsonp,当然了,jsonp和json可不是一回事,json是数据的一种传输格式,而jsonp是一种跨域请求方式。
