ajax new,手写new和Ajax

  • Post author:
  • Post category:其他


手写new

new 的作用:首先创建了一个新的空对象

设置原型,将对象的原型设置为函数的 prototype 对象。

让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)

判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。

实现:function myNew() {

// 1.创建空对象

let obj = {}

let constructor = […arguments][0]

let params = […arguments].slice(1)

// 2.空对象的原型指向构造函数的原型

obj.__proto__ = constructor.prototype

// 3.执行构造函数的代码

var ret = constructor.apply(obj, params)

// 4.判断返回值类型:

// 如果是基本值类型,则返回的创建的’空对象’

// 如果是引用类型,则返回这个引用类型的对象

var flag = ret && ret instanceof Object

return flag ? ret : obj

}

// test

function A(name) {

this.name = name

}

var a1 = myNew(A, ‘Lee’)

var a2 = new A(‘Lee’)

console.log(a1, a2)

手写Ajax

AJAX 包括以下几个步骤创建 XMLHttpRequest 对象,也就是创建一个异步调用对象

创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

设置响应 HTTP 请求状态变化的函数

发送 HTTP 请求

获取异步调用返回的数据

使用 JavaScript 和 DOM 实现局部刷新

一般实现:const SERVER_URL = ‘/server’

let xhr = new XMLHttpRequest()

// 创建 Http 请求 第三个参数为async,指定请求是否为异步方式,默认为 true。

xhr.open(‘GET’, SERVER_URL, true)

// 设置请求头信息

xhr.responseType = ‘json’

xhr.setRequestHeader(‘Accept’, ‘application/json’)

// 设置状态监听函数

xhr.onreadystatechange = function () {

if (this.readyState !== 4) return

// 当请求成功时

if (this.status === 200) {

handle(this.responseText)

} else {

console.error(this.statusText)

}

}

// 设置请求失败时的监听函数

xhr.onerror = function () {

console.error(this.statusText)

}

// 发送 Http 请求

xhr.send(null)

promise 封装实现:function getJSON(url) {

// 返回一个 promise 对象

return new Promise(function (resolve, reject) {

let xhr = new XMLHttpRequest()

// 新建一个 http 请求, 第三个参数为async,指定请求是否为异步方式,默认为 true。

xhr.open(‘GET’, url, true)

// 设置状态的监听函数

xhr.onreadystatechange = function () {

/*0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪*/

if (this.readyState !== 4) return

// 当请求成功或失败时,改变 promise 的状态

/*200: “OK”

404: 未找到页面*/

if (this.status === 200) {

resolve(this.responseText)

} else {

reject(new Error(this.statusText))

}

}

// 设置响应的数据类型

xhr.responseType = ‘json’

// 设置请求头信息

xhr.setRequestHeader(‘Accept’, ‘application/json’)

// 发送 http 请求

xhr.send(null)

})

}