发表于 | 分类于

基本功能

设置请求request

第一步 let request = new XMLHttpRequest()
第一部分：
request.open('GET', '/xxx')
第二部分：(不能设置User-Agent，会报错)
request.setRequestHeader('Content-Type', 'x-www-form-urlencoded')
第四部分：
request.send('a=0&b=1')

获取响应response

第一部分：获取HTTP状态
request.status //200
request.statusText //OK

第二部分：获取响应header
request.getAllResponseHeaders() //获取第二部分所有内容
request.getResponseHeader('Content-Type') //获取Content-Type 的内容

第四部分：
request.responseText()

阅读全文 »

发表于 | 分类于

AJAX的发展历史

历史上发送请求的方式

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行
以上都除了form都只能发get请求

  • 所以需要一个能发任何请求（GET,POST,PUT,DELETE）并且想以什么形式展现就以什么形式展示的方法。后来就有了AJAX。

XMLHttpRequest的发明

微软当时取得了重大突破：
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进了，取名 XMLHttpRequest，并被纳入 W3C 规范

阅读全文 »

发表于 | 分类于

以前是如何发送请求的？

有一些HTML标签能发送请求，比如<form>标签、<a>标签、<link>标签、<script>标签、<img>标签。

我们引入一个例子来说明：
例子
用户每点击一下付款按钮，页面和数据库中的余额减少1。

使用form表单

1
2
3
4
5
6
<body>
    <h5>你的账户余额为<span id="amount">&&&amount&&&</span></h5>
    <form action="/pay" method="post">
        <input type="submit" value="付款1块钱">
    </form>
</body>

form表单一旦提交就会自动刷新页面，进入pay页面，需要用户退回index页面，刷新页面才能看到结果。
而a标签也会刷新页面或打开新页面。
这样的用户体验很差，程序员就想办法怎么样才能发送请求并局部刷新页面。

阅读全文 »

发表于 | 分类于

如何模仿jQuery实现一个API？

jQuery是一个 JavaScript 库，核心理念是 - write less, do more。
其实jQuery就是一个函数，里面封装了很多方法，我们通过这些方法来获取节点(元素)并进行操作，大大方便了我们的编程。

  • 那么关于下面的代码，如何实现类似jQuery提供的api呢？
    1
    2
    3
    4
    5
    6
    window.jQuery = ???
    window.$ = jQuery

    var $div = $('div')
    $div.addClass(['red','blue']) // 可将所有 div 的 class 添加 red 和 blue  注意这里是数组的写法
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
阅读全文 »

发表于 | 分类于

什么是函数

函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。
函数的本质就是对象，或者说可以执行代码的对象就是函数。

函数的五种声明方法

函数体内部的return语句，表示返回。JavaScript 引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即使还有语句，也不会得到执行。也就是说，return语句所带的那个表达式，就是函数的返回值。如果没有return，该函数就返回undefined。

  • 具名函数
    1
    2
    3
    function fn1() {
       return undefined; // 如果不写return ，浏览器默认返回undefined
    }
阅读全文 »

发表于 | 分类于

数组是什么

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
其实本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

数组的length属性

数组的length属性，返回数组的成员数量。只要是数组，就一定有length属性。

数组的构造方法

1
2
3
var x = new Array(3) ; // 3表示数组的长度，每一个元素都为undefined
var y = new Array(3,3); // 得到一个数组[3,3]，是仿自Java中的写法，不常用。
var a = [3,3] ; // 得到了一个数组[3,3]，常用
阅读全文 »

发表于 | 分类于

全局函数

  1. Number
    1
    2
    var n1 = 1
    var n2 = new Number(1)  // 创建一个 Number 对象

  • 两者的区别是什么？
    前者将数据直接存在 Stack 里，后者实际上是一个哈希对象，把 Heap 地址存在 Stack 里。

  • 但是前者没有toString()属性，为什么n1.toString()的结果是'1'？
    JS引擎会建立一个临时的对象，

    1
    2
    temp = new Number(n1)
    temp.toString()

    然后再把temp回收掉，所以几乎没人用第二种写法。

阅读全文 »

发表于 | 分类于

数据类型

JS一共有7中数据类型，其中分为两类：基本类型 和 引用类型。

概述

  • 基本类型：
    number
    string
    boolean
    undefined
    null
    symbol

  • 引用类型：
    object (array和function都属于object类型)

typeof 运算符

typeof运算符可以返回一个值的数据类型，用来确定一个值到底是什么类型。。

1
2
3
4
5
6
7
typeof 123  // "number"
typeof '123'  // "string"
typeof false  // "boolean"

通过这个运算符可以发现两个bug
typeof null //object
typeof Function //function

阅读全文 »

发表于 | 分类于

CCS布局技巧

1. 左右布局

如果有以下html结构，设置左右两栏布局

<div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
</div>

设置浮动

左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：

阅读全文 »