JavaScript 动态创建标记与Ajax
2015-01-13 13:53
351 查看
JavaScript 动态创建标记与Ajax
一:简介
前面都是针对已经存在的标记进行操作、JavaScript同样可以动态创建标记并且与现有标记组合生成新的Document。同时简单的介绍了Ajax。
二:动态创建标记与组合
相关方法:
/**
* Some old-shcool method
*/
document.write("str");
var node = document.getElementById('id');
var htmlValue = node.innerHTML;
node.innerHTML = htmlValue;
/**
* DOM methods
*/
var parent = document.getElementById('id');
var node = document.createElement(nodeName);
parent.appendChild(node);
var txt = document.createTextNode("hello world");
para.appendChild(txt);
/**
* example : <p>This is <em>my</em> content.</p>
*/
//1. create p and p's children elements
var p = document.createElement("p");
var txt1 = document.createTextNode("This is");
var em = document.createElement("em");
var txt2 = document.createTextNode("content.");
//2. create em's child element
var txt3 = document.createTextNode("my");
//Assemble them
p.appendChild(txt1);
p.appendChild(em);
p.appendChild(txt2);
em.appendChild(txt3);
/**
* insertBefore
*/
parentElement.insertBefore(newElement, targetElement);
/**
* insertAfter,without exiting method, custom create
*/
function insertAfter (newElement, targetElement) {
var parentNode = targetElement.parentNode;
if (parentNode.lastChild == targetElement){
parentNode.appendChild(newElement);
} else {
parentNode.insertBefore(newElement, targetElement.nextSibling);
}
}
三:Ajax
Ajax(Asynchronous JavaScript And XML)异步JavaScript和XML、用于对页面请求以异步方式与服务器进行交互进而达到局部刷新页面的效果。
Ajax实现过程:
/**
* Ajax
* 1. create request -- XMLHTTPObject
* 2. request.open("methodType", url, isAsynchronously);
* 3. request.onreadystatechange = function(){ //key request.readyState == 4}
* 4. request.send(parameter);
*
* request.readyState have five possible values:
* 0 : uninitialized
* 1 : loading
* 2 : loaded
* 3 : interactive
* 4 : complete
*/
function getHTTPObject () {
if (typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function () {
try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch (e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch (e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {}
return false;
}
return false;
}
return new XMLHttpRequest();
}
function getNewContent() {
var request = getHTTPObject();
if (request) {
request.open("GET", "example.txt", true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById("new").appendChild(para);
}
};
request.send(null);
}
}
四:完善图片库
动态创建用于显示默认图片和指定链接的图片和title相关标记——showPicture.js:
/**
* Attach onclick even on a link tag.
*/
function prepareGallery () {
if (!document.getElementById) { return false }
if (!document.getElementsByTagName) {return false}
var imageGalleryNode = document.getElementById('imageGallery');
if (!imageGalleryNode) {return false}
var links = imageGalleryNode.getElementsByTagName("a");
if (links.length > 0) {
for (var i = links.length - 1; i >= 0; i--) {
links[i].onclick = function (){
/*
if show picture work then stop a link active.
a link will not work if return false.
*/
return showPicture(this) ? false : true;
};
links[i].onkeypress = links[i].onclick;
}
}
}
/**
* Insert after the specified node
*/
function insertAfter (newNode, targetElement) {
var parentNode = targetElement.parentNode;
if (parentNode.lastChild == targetElement) {
parentNode.appendChild(newNode);
} else {
parentNode.insertBefore(newNode, targetElement.nextSibling);
}
}
/**
* Construct placeholder element
*/
function preparePlaceholder () {
if (!document.createElement) { return false; }
if (!document.createTextNode) { return false; }
if (!document.getElementById){ return false; }
if (!document.getElementById('imageGallery')) { return false; }
var imgElement = document.createElement("IMG");
imgElement.src = "../picture/benchi.jpg";
imgElement.alt = "my image gallery";
imgElement.id = "placeholder";
var pElement = document.createElement("p");
pElement.id = "description";
var txt = document.createTextNode("Choose one picture !");
var galleryNode = document.getElementById('imageGallery');
insertAfter(imgElement, galleryNode);
pElement.appendChild(txt);
insertAfter(pElement, imgElement);
}
/**
* Show the clicked picture.
* which picture is clicked.
* false if something is unexpected .
*/
function showPicture(whichPicture){
var placeholder = document.getElementById('placeholder');
if (!placeholder) {return false}
if (placeholder.nodeName != "IMG") {return false}
var source = whichPicture.getAttribute('href');
placeholder.setAttribute('src', source);
var description = document.getElementById('description');
if (description) {
var text = whichPicture.getAttribute('title') ? whichPicture.getAttribute('title') : "";
var firstChildNode = description.firstChild;
if (firstChildNode.nodeType == 3) {
firstChildNode.nodeValue = text;
}
}
return true;
}
/**
* Multiple execute window.onload;
*/
function addEvent(fun){
var oldFunction = window.onload;
if (!oldFunction) {
window.onload = fun;
} else {
window.onload = function () {
oldFunction();
fun();
}
}
}
addEvent(prepareGallery);
addEvent(preparePlaceholder);
相关文章推荐
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- javascript 基础 创建动态标记 2017-1-8
- 给图片各个位置做标记,实现类似百度地图的标记功能(动态创建页面元素,各种定位,Ajax,MVC)
- 简化 Ajax 和 Java 开发,第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- JavaScript动态创建标记的方法
- JavaScript-DOM学习笔记之动态创建标记
- javascript 动态创建标记的几种方法
- JavaScript DOM 动态创建标记
- 动态创建表格js文件,javascript,Ajax,DHTML动态实现表格的创建,动态读取XML中的文件,读取dom节点的例子。
- 简化 Ajax 和 Java 开发,第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- Firefox中动态创建元素后不能马上使用的解决方法 Ajax__
- javascript 动态创建表格:新增、删除行和单元格
- 使用Javascript,CSS和Ajax创建ASP.NET自定义控件
- javascript 动态创建表格:新增、删除行和单元格
- 使用Javascript动态创建表格,不同的方法,巨大的运行时间差异!
- [转]javascript 动态创建表格:新增、删除行和单元格
- JavaScript Tip/Trick: 动态创建Table时,在IE中需要注意的一个问题
- aptana-jaxer-用javascript开发ajax效果的服务器端动态页面
- JavaScript Tip/Trick: 动态创建Table时,在IE中需要注意的一个问题
- 如何对动态创建控件进行验证以及在Ajax环境中的使用