试想这样一个场景：
在浏览器地址栏输入网址，请求 HTML、CSS、JS、PDF、JSON、图片
用 <link rel="stylesheet" href="xxx"> 请求 CSS 内容
用 <script src="xxx"> 请求 JS 内容
用 <img src="xxx"> 请求图片内容
这样请求一个不同的内容就需要不同的写法，那么JS 有没有一种通用方式可请求任意内容？
答案：AJAX
AJAX就是为了解决类似场景应运而生的，最初由微软发明其每个字母的含义是 AJAX = async (异步的) + JS + And + XML 后面JSON更加流行通用，但是XML的这个缩写还是保留了下来。
接下来我们看看AJAX的代码：
代码太多，我们将其简单封装一下，而且参数太多，把参数改为对象：
######这里给一个AJAX的应用范例：
let http = require('http')
let fs = require('fs')
let url = require('url')
let port = process.argv[2]
if (!port) {
console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
let server = http.createServer(function (request, response) {
let parsedUrl = url.parse(request.url, true)
let pathWithQuery = request.url
let queryString = ''
if (pathWithQuery.indexOf('?') >= 0) { queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
let path = parsedUrl.pathname
let query = parsedUrl.query
let method = request.method
/******** 从这里开始看，上面不要看 ************/
console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)
// 表驱动编程
const table = {
'/': ['text/html;charset=utf-8', `
<html>
<head>
<link rel=stylesheet href="/style.css" />
</head>
<body>
<h1>hello</h1>
<button id=x>点击</button>
<script src="/ajax.js"></script>
<script src="/main.js"></script>
</body>
</html>
`],
'/style.css': ['text/css;charset=utf-8', `
h1{color: red;}
`],
'/main.js': ['text/javascript;charset=utf-8', `
const button = document.getElementById('x')
button.onclick = ()=>{
ajax({
method: 'get',
path: '/data',
successFn: (xhr) => {
console.log('成功了')
console.log(xhr.responseText)
console.log(typeof xhr.responseText)
const obj = JSON.parse(xhr.responseText)
console.log(obj)
},
failFn: (xhr) => {
console.log('失败了')
}
})
}
`],
'/ajax.js': ['text/javascript;charset=utf-8', `
const ajax = ({ method, path, body, successFn, failFn }) => {
const xhr = new XMLHttpRequest()
xhr.open(method, path) // 1
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
successFn(xhr) // 2
} else if (xhr.status >= 400) {
failFn(xhr) // 3
}
}
}
xhr.send(body)
}
`],
'/data': ['application/json;charset=utf-8', `
{
"name":"frank",
"age":18
}
`]
}
if(table[path] !== undefined) {
response.statusCode = 200
response.setHeader('Content-Type', table[path][0])
response.write(table[path][1])
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)
最后我们看看AJAX的优缺点：
优点： 可以请求任何内容，不用刷新页面
缺点：代码难记，不能跨域
