JavaScript 动态创建标记与Ajax
来源:互联网 发布:eve目标证据数据 编辑:程序博客网 时间:2024/04/30 07:02
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 elementsvar 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 elementvar txt3 = document.createTextNode("my");//Assemble themp.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);
1 0
- JavaScript 动态创建标记与Ajax
- JavaScript动态创建标记的方法
- 【JavaScript DOM编程艺术】- 动态创建标记
- JavaScript DOM编程艺术—动态创建标记
- javascript 基础 创建动态标记 2017-1-8
- Javascript DOM(第二版) 动态创建标记---重回图片库
- javascript dom编程艺术学习笔记之动态创建标记
- javascript 动态创建标记的几种方法
- 动态创建标记
- 动态创建标记
- 动态创建标记
- #7动态创建标记
- DOM动态创建标记
- ajax.dll动态创建表格与层
- DOM动态创建标记实例
- 简化 Ajax 和 Java 开发,第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- 简化 Ajax 和 Java 开发,第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- JavaScript DOM编程艺术 学习笔记(七)动态创建标记
- 滋祝谆族租篆走滓宗遵撞座足滓字住桌作
- 解决WPF中popup跟随移动问题
- 手机彩票——Day04_1
- 注兹准椎撰左阻椎佐壮柞住装注装字阻谆
- Qt中文一点奇葩的地方
- JavaScript 动态创建标记与Ajax
- 黑马程序员——Java基础学习笔记(一)
- android图片压缩质量参数Bitmap.Config RGB_565等的含义
- 1016.Phone Bills
- Android设置壁纸
- 百度定位SDK错误:Couldn’t load locSDK3: findLibrary returned null
- 坠紫追综嘴滋踪坐诅椎昨族租邹左尊装装
- 黑马程序员——功能定义重载
- JAVA中的FtpClient与FTPClient,并实现jsp页面下载ftp服务器上的文件