什么是Ajax（Asynchronous JavaScript and Xml）：
Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理
什么是HTTP请求？
浏览器与服务器之间，采用HTTP协议通信。
- 用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。
- 服务器端接收到请求，会进行计算，向浏览器返回一个包含事务结果的HTTP响应报文。
为什么要使用Ajax？
- 能够向服务器请求额外的数据而无需加载整个页面，会带来好的用户体验
- Ajax是一种技术方案，可以和后端交换数据，不用刷新页面。
优点：
- 更新数据而不需要刷新页面：它能在不刷新整个页面的前提下与服务器通信维护数据，按照需求请求数据，避免了发送大量的数据。
- 异步通信：与服务器使用异步的方式通信，不会打断用户的操作。
前后端负载平衡：可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。 - 数据与呈现分离：利于分工，降低前后耦合。
缺点：
- 浏览器历史记录的遗失：在使用Ajax对页面进行改变后，由于没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
- Ajax的安全问题：Ajax的出现就像建立起了一直通信服务器的另一条通道，容易遭受一些攻击。
如何和后端进行交互呢？
- form表单提交
通过submit按钮被点击，浏览器会默认将inpiut中的内容提交到form的action的地址上
<form action="/form.html" method="get">
//会提交到当前域名下的form.html
//缺点：页面会跳转，单项提交，没有后台反馈，影响用户体验。
- ajax
- websocket
Ajax包括以下几个步骤：
- 创建Ajax对象
- 发出HTTP请求
- 接收服务器返回的数据
- 更新网页数据
接下来通过代码来看一下如何实现一个Ajax
- 实现一个最简单功能的Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest() //创建一个对象
xhr.open('GET', '/hello.json', true)//设置参数，请求的类型，地址，是否使用异步
//hello.json 可以把他当作一个资源，而不是一个文件
//true为异步，false为同步获取的方式
xhr.send()//发送请求
//内部数据到达会默认触发load
xhr.addEventListener('load', function(){
var data = xhr.responseText;
console.log(data);
})//监听
</script>
- 当请求不存在的文件时防止服务器挂掉，看看下面的方法
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', '/hello2.json', true)//请求不存在的文件，404 not found
xhr.send()//发送请求
//监听通信状态的变化
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.addEvenListener('onreadystatechange' = function(){
console.log('readyState:', xhr.readyState);
//准备状态，握手的过程，每次握手会发生改变，可以监听到内部状态的改变
})
xhr.addEventListener('load', function(){
//内部数据到达会默认触发load
console.log(xhr.status);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
//304 请求缓存
//成功了
var data = xhr.responseText;
console.log(data);
}else{
console.log('error');
}
xhr.onerror = function(){ //内部出现错误
console.log('error');//例如断网，数据还未到达服务器
}
xhr.ontimeout = function(){ //超时
}
}) //监听
//status: 服务器的一个状态，数据是否OK
//readystate: 交互流程是否完毕，0-4 五个状态
//load: 状态为4时会自动触发load，交互完毕一定是4，所以可以不写readystate
</script>
- POST方法
<script>
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', true);
//把需要发送的数据拼好放在send中
xhr.send('username=zuodong&password=123');
//也可以将这个函数写进send中，拼接URL
/*makeUrl({
username: 'zuodong',
age: 23
})*/
//需要发送的数据，函数的方式
/*makeUrl({
username: 'zuodong',
age: 23
})*/
xhr.addEventListener('load', function(){
console.log(xhr.status);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ //304 请求缓存
var data = xhr.responseText;
console.log(data);
}else{
console.log('error');
}
})
xhr.onerror = function(){ //内部出现错误
console.log('error');//例如断网，数据还未到达服务器
}
makeUrl({
username: 'zuodong',
age: 23
})
function makeUrl(obj){
var arr = []
for(var key in obj){
arr.push( key + '=' + obj[key])
}
return arr.join('&')
}
//最终拼接成：username=zuodong&password=123
</script>
</body>
</html>
- 封装一个Ajax
<script>
function ajax(opts){
var url = opts.url;
//假设用户没有设置type，则默认为GET
var type = opts.type || 'GET';
//数据类型默认为json
var dataType = opts.dataType || 'json';
//如果用户没有设置，则传递一个空函数
var onsuccess = opts.onsuccess || function(){};
var onerror = opts.onerror || function(){};
//如果没有数据，默认传递一个空数据
var data = opts.data || {};
//将用户传递的参数，如用户名密码，将这个对象进行一个处理，序列化
var dataStr = [];
for(var key in data){
dataStr.push(key + '=' + data[key]);
}
dataStr = dataStr.join('&');
if(type === 'GET'){
url +='?' + dataStr;
}
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
//如果用户设置的需要返回的数据类型需要的是json格式
if(dataType === 'json'){
//把对象返回的数据解析成json格式
onsuccess(JSON.parse(xhr.responseText));
}else{
onsuccess(shr.responseText);
}
}else{
//如果是其他状态，调用用户的onerror
onerror();
}
}
xhr.onerror = onerror;
if(type === 'POST'){
xhr.send(dataStr);
}else{
xhr.send();
}
}
//约定好的需要传递的参数
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服务器异常');
}
})
</script>
XMLHttpRequest实例的属性
readyState
只读属性，用一个正数对应的常量，表示XMLHttpRequest请求当前所处的状态。
0：对用常量UNSET，表示XMLHttpRequest实例已经生成，但是open()方法还没有调用。
1：对应常量OPENED，表示send()方法还没有被调用，任然可以使用setRequestHeader()，设定HTTP请求头信息。
2：对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已收到。
3：对应常量LOADING，表示正在接受服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
4：对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。
在通信过程中，每当发生状态变化的时候，readyState属性的值就会发生改变。这个值每一次变化，都会触发readyStatyChange事件。
responseType
responseType属性用来指定服务器返回数据类型。
""：字符串（默认值）
arraybuffer：ArrayBuffer对象
blob：Blob对象
document：Document对象
json：JSON对象
text：字符串
status
status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。
200：OK，访问正常
301：Moved Permanently，永久移动
302：Move temporarily，暂时移动
304：Not Modified，未修改
307：Temporary Redirect，暂时重定向
401：Unauthorized，未授权
403：Forbidden，禁止访问
404：Not Found，未发现指定网址
500：Internal Server Error，服务器发生错误
基本只有2xx和304的状态码，表示服务器返回是正常状态。
网友评论