项目场景：
提示：这里简述项目相关背景：
例如：本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
实现效果
这是请求前的前端页面，点击两个Button按钮分别发起不同的请求
这是请求后的前端页面，第一个button发起请求，从服务器端传过来一段字符串，并重新渲染在第一个绿色框中，第二个Button按钮发起请求后从服务器端传过来一份Json数据
代码：
Html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>AjaxTest</title><style>p { font-style: italic;font-size: 12px; } div { width: 200px;height: 100px;border: 10px solid green;text-align: center;}</style>
</head>
<body><button id="btn">发起Ajax请求</button><p>点击按钮发起请求</p><div id="content">这是请求前的内容</div><button id="btn1">发起Ajax请求Json数据</button><p>点击按钮发起请求</p><div id="JsonContent">这是请求前的Json数据</div>
</body>
<script src="AjaxTest.js"></script>
</html>
Javascipt:
当单击按钮时触发函数，发起Ajax请求，两个按钮的请求代码大致相同，此仅发其中一个请求代码
btn.onclick = function() {const xhr = new XMLHttpRequest()// 初始化 设置请求方法和 urlxhr.open("GET", "http://127.0.0.1:8888/")// 发送xhr.send()// 事件绑定 处理服务端返回的结果// on 事件// readystate 表示状态 : 0 未初始化 1 open执行 2 send 3 返回部分结果 4 返回所有结果 // change 改变时触发xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status >= 200) {// 处理返回结果 行 头 空行 体console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态字符串console.log(xhr.getAllResponseHeaders()); // 响应头console.log(xhr.response); // 响应体div.innerHTML = xhr.response}}
}
node：
服务器代码如下，打开服务器之后，当接收到前端的请求，将触发onRequest函数，响应相关的数据到前端，此处数据为虚拟数据，没有采用数据库连接
function start(route) {function onRequest(request, response) {var pathname = url.parse(request.url).pathname;console.log("request for " + pathname + " receied.")route(pathname)if (pathname == "/") {response.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" })response.write("这是服务器传来的内容1111")response.end()} else {myObj = {"name": "jiezi","alexa": 10000,"sites": {"site1": "www.jiezi.com","site2": "m.jiezi.com","site3": "c.jiezi.com"}}response.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" })response.write(JSON.stringify(myObj))response.end()}}http.createServer(onRequest).listen(8888)console.log("服务器已启动")}
遇到问题：
问题一：点击按钮后回调函数无法触发，抛出NULL 异常
问题二：发起AJax请求时，被拦截，经百度了解是存在跨域问题
问题解决
问题一：
JavaScript代码引入放在《Head》标签内，导致Javascrip初始化发生在Html树渲染之前，导致DOM对象的获取失败，返回一个NULL，当触发onclick回调函数时发出异常。
解决方案：把JavaScript代码引入放在《body》的结束标签后，问题解决。
问题二：
解决方案，在响应头中设置Access-Control-Allow-Origin，问题得到解决。
response.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" })
