我们平常工作中经常会用到ajax向服务器发送请求，今天就来详细的来了解一下ajax的前世与今生！
简介
浏览器与服务器之间，采用HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。
1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX这个词就成为JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
AJAX 包括以下几个步骤。
- 创建XMLHttpRequest
- 发出 HTTP请求
- 接受服务器传回的数据
- 更新网页数据
那么什么是ajax呢
就是一句话，AJAX通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
所以我用一句话来总结两者的关系：
我们使用XMLHttpRequest对象来发送一个Ajax请求。 具体请参考这里：XMLHttpRequest
创建
实现一个最简单功能的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的状态码，表示服务器返回是正常状态。
网友评论