AJAX(Async JavaScript And XML)

背景

AJAX是浏览器上的功能
浏览器可以发请求，收响应
浏览器在window上添加了一个XMLHttpRequest函数
使用这个构造函数可以构造出一个对象
JS通过它实现发请求，收响应

准备一个服务器

使用 server.js 作为我们的服务器
下载或复制代码即可用 node server.js 8888 启动
添加 index.html / main.js 两个路由

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/

  console.log('有个人发请求过来啦！路径（带查询参数）为：' + pathWithQuery)

  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`哈哈`)
    response.end()
  } else if(path === '/x'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(`body{color: red;}`)
    response.end()
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(`你输入的路径不存在对应的内容`)
    response.end()
  }

  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

挑战1

加载 CSS

以前我们用
今天请用 AJAX 加载 CSS

四个步骤

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onload & onerror 事件
——专业前端会改用 onreadystatechange 事件
——在事件处理函数里操作 CSS 文件内容
调用对象的 send 方法（发送请求）

挑战2

加载 JS

以前我们用 <script src="2.js"></script>
今天请用 AJAX 加载 JS

四个步骤

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的** open 方法
监听对象的** onreadystatechange 事件
在事件处理函数里操作 JS 文件内容
调用对象的 send 方法（发送请求）

挑战3

四个步骤

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onreadystatechange 事件
——在事件处理函数里操作 HTML 文件内容

XMLHttpRequest.readyState

参考内容：XMLHttpRequest.readyState - Web API 接口参考 | MDN (mozilla.org)

挑战4

四个步骤

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onreadystatechange 事件
——在事件处理函数里操作 responseXML

调用对象的 send 方法（发送请求）

                          创建一个XML的路由，添加一个按键都同前面的步骤一样。

挑战5

加载 JSON （JavaScript Object Notation）
JSON 是一门语言
JSON 不是编程语言,而是标记语言

支持的数据类型

string - 只支持双引号，不支持单引号和无引号
number - 支持科学记数法
bool - true 和 false
null - 没有 undefined
object
array
就这六种，注意跟 JS 的七种数据类型区别开来不支持函数，不支持变量(所以也不支持引用)

四个步骤

创建 HttpRequest 对象（全称是 XMLHttpRequest）
调用对象的 open 方法
监听对象的 onreadystatechange 事件
——在事件处理函数里使用 JSON.parse
调用对象的 send 方法（发送请求）

JSON.parse

将符合 JSON 语法的字符串转换成 JS 对应类型的数据
JSON 字符串 => JS 数据
由于 JSON 只有六种类型，所以转成的数据也只有6种
如果不符合 JSON 语法，则直接抛出一个 Error 对象
一半用 try catch 捕获错误

JSON.stringify

是 JSON.parse 的逆运算
JS 数据 => JSON字符串
由于 JS 的数据类型比 JSON 多，所以不一定能成功
如果失败，就抛出一个 Error 对象

加载列表

需求

用户打开页面，看到第一页数据

用户点击下一页，看到第二页数据
用户点击下一页，看到第三页数据

用户点击下一页，提示没用更多了

AJAX的原理

AJAX(Async JavaScript And XML)

背景

挑战1

挑战2

挑战3

XMLHttpRequest.readyState

挑战4

挑战5

加载列表