1. ajax 是什么？有什么作用？
ajax，全称：Asynchronous JavaScript And XML，异步的JavaScript和XML。
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的 CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。
ajax 应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。
作用：
1.运用 XHTML+CSS 来表达信息；
2.运用 JavaScript 操作 DOM（Document Object Model）来运行动态效果；
3.运用 XML 和 XSLT 操作数据
4.运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步数据交换；
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
传统模式
-
传统的开发模式：用户的每一次操作都触发一次返回服务器的HTTP请求，服务器做出处理后，返回一个html页面给用户。
ajax模式 - ajax开发模式：页面将用户的操作通过ajax引擎与服务器进行通信，将返回的结果给ajax引擎，然后ajax将数据插入指定位置。
2. 如何mock数据
mock：前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发
-
http-server：安装Node.js ，通过http-server开启本地服务器
获取端口http://localhost:8000
然后通过在文件夹创建html和json文件来测试数据 - server-mock：使用 server-mock node 工具启动一个能处理静态文件和动态路由的服务器。
-
手写一个 nodejs 服务器线上 mock 数据：
使用 http://easy-mock.com/
使用 http://rapapi.org/org/index.do
3.把视频中GET 和 POST 类型的 ajax 的用法手写一遍
var xhr = new XMLHttpRequest()
//GET写法
xhr.open('GET','/login?username=star&password=123',true)
//POST写法
xhr.open('POST','/login',true)
//监听握手状态是否完成 等同于 xhr.addEventListener('onreadystatechange', function(...){})
xhr.onreadystatechange = function(){
if(xhr.readystate === 4){
if((xhr.status => 200 && xhr.status < 300) || xhr.status === 304){ //200-299和304的请求都是成功
console.log(xhr.responseText)
}else{
console.log('请求异常')
}
}
}
//监听页面是否完全加载完成 等同于 xhr.addEventListener('load', function(...){})
xhr.onload = function(){
if((xhr.status => 200 && xhr.status < 300) || xhr.status === 304){
console.log(xhr.responseText)
}else{
console.log('请求异常')
}
}
//设置超时
xhr.timeout = 5000
xhr.ontimeout = function(){
console.log('请求超时')
}
//与服务器断开
xhr.onerror = function(){
console.log('连接失败')
}
//上传二进制文件获取进度
xhr.upload.onprogress = function(){
console.log('loading...')
}
//GET写法
xhr.send()
//POST写法
xhr.send('username=star&password=123')
4.封装一个 ajax 函数，能实现如下方法调用
function ajax(options){
//补全
}
ajax({
url: 'http://api.jirengu.com/weather.php',
data: {
city: '北京'
},
dataType: json,
onsuccess: function(ret){
console.log(ret)
},
onerror: function(){
console.log('服务器异常')
}
})
function ajax(opt){
var url = opt.url || '/login'; //默认地址
var data = opt.data || {}; //默认空对象
var type = opt.type || 'GET'; //默认GET
tpye = type.toUpperCase();
var onsuccess = opt.onsuccess || function(e){console.log(e)}; //默认
var oneroor = opt.oneroor || function(e){console.log(e)}; //默认
var dataType = opt.dataType || 'json'; //默认json
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.onoload = function(){
if((xhr.status >= 200 && xhr.status < 300) || (xhr.status === 304)){
if(type === 'json'){
onsuccess(Json.parse(xhr.responseText));
}else{
oneroor('error');
}
}
};
xhr.oneroor = oneroor;
if(type === 'GET'){
xhr.send();
}else{
xhr.send(dataStr);
}
}
//执行
ajax({
url: 'http://www.jirengu.com/city.php',
data: {
city: '北京'
},
onsuccess: function(ret){
console.log(ret);
},
onerror: function(){
console.log('服务器异常');
}
});
