首先说下问题背景:想要通过异步请求一个文本文件,然后通过该文件的内容动态创建一个DOM节点添加到网页中。

基于这个需要了解:

1 DOM如何动态添加节点

2 Ajax异步请求

3 Chrome浏览器如何处理本地请求

DOM如何动态添加节点

想要动态的添加节点,就需要良好的理解DOM文档。

常用的几个方法:

getElementById() getElementsByTagName() getAttribute() setAttribute()

以及

createElement() createTextNode() appendChild()

等等。

下面看一下创建一个DOM节点的方法过程,首先需要有一个挂载的div,这个div需要设置上一个id,这样方便通过getElementById来获取。

这样就完成了动态的创建节点。

Ajax异步请求

首先针对不同的浏览器,创建XMLHttpRequest对象,可以采取下面的方法:

 

这样就可以返回浏览器支持的request对象了。然后创建对应的request的open send onreadystatechange方法。

这里直接放在一个方法中:

 

然后等待出发getNewContent就可以了。

全部代码:

执行结果:

Chrome处理本地Ajax异步请求

由于Chrome不支持本地的异步请求,因此直接通过file://访问文件就会报错!

报错信息如下:

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

Uncaught NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘file:///C:/Users/Administrator/Desktop/test.txt’.

所以在Chrome的快捷方式后面添加:–allow-file-access-from-files 即可。注意后面要添加一个空格,不然会提示错误!

正确的写法:

“C:Program Files (x86)GoogleChromeApplicationchrome.exe” –allow-file-access-from-files

这样就可以正确访问了。

2 收藏


直接登录