Ajax

通过Ajax可以不刷新页面请求服务端的数据

1. 创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 请求

xmlhttp.open("GET","getData.json",true);
xmlhttp.send();

3. 相应

xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
    console.log(xmlhttp.responseText); // string
    console.log(JSON.parse(xmlhttp.responseText))
}
}

readyState 存有XMLHTTPRequest的状态

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

statu

200: ok

304: Not Modified 客户端有缓存的文档并发出了一个条件性的请求（一般是提供If-Modified-Sin ce头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

400: Bad Request 请求出现语法错误 404: 找不到资源

500: 服务器错误

505: HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

注意！！！

异步与同步

异步是前者开始执行，后者继续执行

同步一个接着一个执行前者执行完之后才会执行后者

jquery_Ajax

jQuery.Ajax 执行异步的HTTP(Ajax)请求

getData.json

{
  "errno": 0,
  "errmsg": "success",
  "data": [
    {
      "name": "wx",
      "age": 18
    },
    {
      "name": "wxc",
      "age": 20
    }
  ]
}

//jquery get请求
 $.get('getData.json',function(data){
    console.log(data)
})

 $.ajax({
  url: 'getData.json',
  data: {
    start: 0,
    count: 10,
    //没有缓存 每次随机
    _: Math.random()
  },
  method: "GET",
  success: function(res){
    console.log(res)

Promise

promise 异步编程解决方法

回调地狱: 层层嵌套函数

例

//多重嵌套
setTimeout(function(){
    console.log('1-success')
    setTimeout(function(){
         console.log('2-success')
    },100)
},100)

Promise 解决回调地域问题

new 一个Promise

 let p = new Promise(function(resolve, reject){
    //resolve成功的回调 reject失败的回调
    //做一些异步操作
    setTimeout(function(){
      console.log('1-success');
      resolve();
      }, 1000);
  }).then(function(){
        console.log('1-success-doing')
        return new Promise(function(resolve,reject){
            setTimeout(function(){
              console.log('2-success')
              resolve()
            },2000)       
    }).then(function(){
      console.log('2-success-doing')
    })
});

//p.then(f1,f2)
let p new = Promise(funciton(resolve,reject){
    
}).then(function(){
    //成功
},function(){
//失败
})
//p.then().catch()
let p new = Promise(funciton(resolve,reject){
    
}).then(function(){
   // 成功
}).catch(function(){
    //失败
})

三个请求同时成功执行

    let p1 = new Promise(function(resolve, reject){
      setTimeout(function(){
        console.log('1-success')
        resolve();
        // reject()
      }, 400)
    })
    
    let p2 = new Promise(function(resolve, reject){
      setTimeout(function(){
        console.log('2-success')
        // reslove();
        resolve()
      }, 100)
    })

    let p3 = new Promise(function(resolve, reject){
      setTimeout(function(){
        console.log('3-success')
        resolve();
      }, 600)
    })
    //判断所有的
    Promise.all([p1,p2,p3]).then(function(){
      console.log('all-success')
    })
    //判断最快的
    Promise.race([p1,p2,p3]).then(function(){
      console.log('one-success')
    }).catch(function(){
      console.log('fail')
    })

Promise 对象特点

对象的状态不受外界影响
一旦状态改变就不会再变

模块

export : 模块导出

import 模块导入 index.js

export let a = 10

test.js

import {a} from index.js;
console.log(a)

类

新建类

function Person(_name, _age){
      this.name = _name;
      this.age = _age;
      this.eat = function(){
        console.log('eating...')
      }
    }
    let p = new Person('xiaoming','18')//实例化
    console.log(p)

在原型下添加方法

 Person.prototype.say =  function(){
  console.log('say...')
}

新建类Student 使其 继承Person 原型下的方法

function Student(_name,_age){
//Student 指向Person 但原型下方法无法继承 继承父类属性
  Person.call(this,_name,_age)
}
//将person下原型赋值给student
Student.prototype = new Person()
Student.prototype.constructor = Student
var s = new Student('xx',20)

console.dir(s)

class 定义类与继承

class Person{
    constructor(_name,_age){
        this.name = _name;
        this.age = _age;
    }
    say() {
         console.log('hello')
    }
}
class Student extends Person{
  constructor(_name,_age) {
        super(_name,_age);//调用父类的constructor(x,y)
  }
  say(){
    super.say()
  }
}
let p1 = new Student('xx',1)
console.dir(p1)

继承

在子类中通过父类.call() 继承父类的属性 >把实例化对象传给父类子类的prototype等于父类的实例化对象

子类prototype下的constructor指向子类 es6用 extends继承

ES6(三)