原生JavaScript实现AJAX通信实例

下面是正文!

我会使用模拟服务器, 所以请先到官网下载Node.js

这个实例的完整代码及使用请到我的库中获取: AJAX-demo. 本文为了叙述方便利索只介绍核心代码

创建index.html

首先创建一个index.html文件, 在文件中写入如下代码:

这是AJAX-demo

假设我们要向服务器请求这个页面, 服务器会将此页面发送个浏览器作为响应.

浏览器会解析页面, 当解析到标签时, 它会再向服务其发送请求, 服务器根据属性指向的地址返回相应的文件. 注意指向的是资源的, 而不是文件

上面这句话是铺垫.

创建main.js

我们的main.j如下, 在main.js文件中定义函数, 这个函数会进行AJAX通信:

button.addEventListener('click', function(e) {

letxhr =newXMLHttpRequest() xhr.onreadystatechange = function(e) {

if(xhr.readyState ===4) {

//xhr.readyState为4表示请求完成(并不一定成功)letstring= xhr.responseText;

letobject= JSON.parse(string) console.log(object) console.log("object: "+object) console.log("object.people.name: "+object.people.name) console.log(object.others['two']) console.log("object.others['two']: "+object.others['two']) console.log("object.others['two'].parents[0]: "+object.others['two'].parents[]) } } xhr.open('GET','/xxx',true) xhr.send()}

监听按钮, 若按钮发生点击事件, 则发生AJAX通信

创建server.js

为了叙述我只介绍重要的部分, 完整的代码请去我的github库-AJAX-demo中获取

我们通常在输入如:的网址时浏览器发送请求, 服务器发送页面作为响应, 因此我们需要在后台加入下面的代码:

因为页面中含有标签, 所以我们还要添加处理地址的代码:

执行上面两段代码后, 及其引用的文件就全部加载完了

我们在中监听按钮的点击事件, 若发生点击向服务器发送请求. 服务处理这个请求的代码如下:

至此, 我们的文件的核心代码编写完了. 剩下的都是一些边边角角落.

运行

再次提醒, 我们需要使用作为服务器.

在命令行下, 输入的命令, 会出现如下字符:

这个字符是我们在文件中设置. 为啥要使用? 因为这个也是在中设置的. 这个不是核心, 核心是理解通信.

此时不要关闭命令行窗口, 在浏览器中输入地址, 会看到如下页面:

打开控制台, 点击按钮, 我们可以在控制台中看见获取的信息: