手写原生ajax

2018-05-17  本文已影响48人  阿亮2019

重要参考
ajax与XMLHttpRequest
阮一峰 XMLHttpRequest Level 2 使用指南

  1. 手写 原生js实现ajax请求
const xhr = new XMLHttpRequest();
// 注意这里其实是可以用四三个参数的,
// true表示异步请求
// false表示同步请求,
xhr.open('GET', 'http://www.zhengshengliang.com:9999/'); 

xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) { // 注意readyState大写
        console.log('请求都相应完毕了');
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log('相应成功');
          const res = xhr.responseText; // 你才返回对象,你全家才返回对象 作为http的第四部分,返回的永远是字符串
          console.log(typeof res); // "string"
          
          let obj = window.JSON.parse(res);
        } else if (xhr.status >= 400) {
           console.log('相应失败');
        }
    }
}

xhr.ontimeout = (e) => {
  alert('请求超时了');
}

xhr.timeout = 3000; // 3000ms超时
xhr.send();

// 若为异步(true),则先打印1,后打印请求内容
// 若为同步(false),则先打印请求内容,后打印1
console.log(1); 

  1. json 和 js的区别
    json是一门语言,javascript也是一门语言(发明者Brendan Eich 布兰登·艾克)。json(发明者道格拉斯·克罗克福特 Douglas Crockford)是抄袭JavaScript的。

  2. JSON没有抄袭 js中的function 和 undefined

  3. JSON的字符串首尾必须是 ""

https://www.json.org/ 火车图
"leon" 是json
null 是json
{'name': leon} 不是json 因为首尾没有双引号

上一篇下一篇

猜你喜欢

热点阅读