AJAX
2018-08-22 本文已影响0人
礼知白
ajax 是什么？有什么作用？
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest对象与服务器通信。 它可以使用JSON，XML，HTML和文本等多种格式发送和接收。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，更新页面。
你可以使用AJAX最主要的两个特性做下列事：
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
AJAX是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互
可参考：
MDN AJAX
JavaScript 标准参考教程
如何 mock 数据？
- 搭建本地服务器
安装Node.js ，通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据
示例:
//html文件
<body>
<script>
var xhr = new XMLHttpRequest() //调用XMLHttpRequest()
xhr.open('GET','/hello.json',true) //指定方式，文件，是否异步
xhr.send() //发送请求
xhr.addEventListener('load',function(){
var date = xhr.responseText;
console.log(date)
}) //监听事件，执行相应程序
</script>
//.json文件，需要符合JSON格式
{
"name":"xxx",
"age":"2"
}
- 通过线上来mock数据
- 在github写一个服务器
- 使用 https://easy-mock.com
- 使用 http://rapapi.org/org/index.do
把视频中GET 和 POST 类型的 ajax 的用法手写一遍，如
var xhr = new XMLHttpRequest()
xhr.open...
xhr.send...
xhr.onload...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<script>
//GET的使用
var xhr = new XMLHttpRequest()
xhr.open('Get','/login?username=jirengu&password=123',true)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
} //此判断方式不全面
//POST的使用
var xhr = new XMLHttpRequest()
xhr.timeout = 3000 //可选，设置xhr请求的超时时间
xhr.open('POST', '/register', true)
//判断加载是否正常
xhr.onload = function(e) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(this.responseText)
}
}
//可选
xhr.ontimeout = function(e) {
console.log('请求超时')
}
//可选
xhr.onerror = function(e) {
console.log('连接失败')
}
//可选
xhr.upload.onprogress = function(e) {
//如果是上传文件，可以获取上传进度
}
xhr.send('username=jirengu&password=123456')
</script>
</body>
</html>
封装一个 ajax 函数，能实现如下方法调用
function ajax(options){
//补全
}
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服务器异常')
}
})
function ajax(opts){
var url = opts.url //定义url参数
var type = opts.type || 'GET' //定义方式，默认为'GET'
var dataType = opts.dataType || 'json' //返回的数据类型，默认为'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('&')
//如果方式为'GET'，拼接url
if(type === 'GET'){
url += '?' + dataStr
}
//AJAX
var xhr = new XMLHttpRequest()
xhr.open(type, url, true)
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//成功了
if(dataType === 'json'){
onsuccess( JSON.parse(xhr.responseText)) //解析JSON对象
}else{
onsuccess( xhr.responseText)
}
} else {
onerror()
}
}
xhr.onerror = onerror
if(type === 'POST'){
xhr.send(dataStr) //如果方式是POST，发送处理后的数据
}else{
xhr.send()
}
}
