项目场景：

提示：这里简述项目相关背景：

例如：本篇文章通过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": "*" })

Ajax技术实例篇相关推荐

Java EE中Ajax技术实例
下面,我们使用Ajax技术实现登录验证问题: 在这里,我通过两个例子进行实验说明,在开始之前,我们需要知道ajax的一些基本知识: 如下面代码: <script type="text/ ...
AJAX技术简介及入门实例[收藏]
最近在学校参加暑期实习,参与的是一个社交网站项目,学长那边分配给的任务是前端开发,需要学习AJAX技术. 对于一个像我一样刚刚接触Web开发且无多少实际项目经验的新手而言,AJAX技术显得复杂而又深奥 ...
AJAX技术（第一篇博客）
1.关于AJAX AJAX是网页可以异步提交的一种技术. 异步提交表现在于页面并不是全部提交,只是局部提交,在局部提交进行后台处理的过程中,用户在页面没有进行提交的部分还可以操作,无需等待局部提交的完 ...
【AJAX】AJAX技术详细解析以及实例
Ajax技术介绍: 全称: Asynchronized(异步) JavaScript And Xml 技术组成有: Javascript.DOM.CSS 和 XMLHttpRequest AJAX ...
ajax技术运用案例,第12篇：Ajax技术与项目案例
Ajax技术 Ajax是一种技术组合,利用Ajax可以快速实现客户端与服务端的通信,而无需了解通信的底层技术,如XMLHttpReques,XML等技术,Ajax对这些技术进行了封装. jQuery提 ...
AJAX调试技术 IE篇
AJAX技术在WEB开发中是一种最常用的开发技术,因为具有的一些优秀的特点,成为广大程序员优先使用的技术之一.AJAX可以在局部刷新的情况下从服务端抓取数据,给用户良好的体验,而传统的页面刷新则采用重 ...
深入理解ajax系列第一篇——XHR对象
前面的话 1999年,微软公司发布IE5,第一次引入新功能:允许javascript脚本向服务器发起HTTP请求.这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Ma ...
Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
Asp.Net MVC2.0 Url 路由入门---实例篇
本篇主要讲述Routing组件的作用,以及举几个实例来学习Asp.Net MVC2.0 Url路由技术. 接着上一篇开始讲,我们在Global.asax中注册一条路由后,我们的请求是怎么转到相应的Vi ...

Ajax技术实例篇

项目场景：

实现效果

代码：

遇到问题：

问题解决

Ajax技术实例篇相关推荐

最新文章

热门文章

Ajax技术 实例篇

项目场景：

实现效果

代码：

遇到问题：

问题解决

Ajax技术 实例篇相关推荐

最新文章

热门文章

Ajax技术实例篇

Ajax技术实例篇相关推荐