点击刷新
项目场景
提示：这里简述项目相关背景：
例如：本篇文章通过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()
// 初始化 设置请求方法和 url
xhr.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": "*" })
© 著作权归作者所有
举报
发表评论
0/200
